DOM-操作元素

5天前 73次浏览 已收录 0个评论

js的dom操作可以改变网页内容、结构和样式,可以利用dom操作元素来改变元素里面的内容、属性等。

改变元素的内容

语法:

element.innerText  从起始位置到终止位置的内容,但它不识别html标签,同时空格和换行也会去掉
element.innerHTML 起始位置到终止位置的全部内容,包括html标签,即<p>里面</p>的内容,同时会保留空格换行,
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>改变元素内容</title>
</head>
<body>
    <button>点我</button>
    <div>文章发表时间</div>
    <p>文章发表时间</p>
    <script>
        //当点击率按钮,div里面的文字会发生变化
        var b=document.querySelector('button');
        var d=document.querySelector('div');
        var dp=document.querySelector('p');
        b.onclick=function(){
            d.innerText='2021';
            dp.innerHTML='<strong>2021</strong>';
            //这两个属性是可以读写的,可以获取元素里面的内容
            console.log(dp.innerHTML);
        }
    </script>
</body>
</html>
结果演示

常用元素的属性操作

比如

  • innerText 、innerHTML 改变元素内容
  • src、href
  • id、alt、title
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>修改元素属性</title>
</head>
<body>
    <button id='f'>正方形</button>
    <button id='c'>长方形</button>
    <img src="c.jpg" alt="长方形">
    <script>
        //获取元素
        var ff=document.getElementById('f');
        var cc=document.getElementById('c');
        var i=document.querySelector('img');
        
        ff.onclick=function(){
            i.src='f.jpg'
            i.title='正方形'
        }
        cc.onclick=function(){
            i.src='c.jpg'
            i.title='长方形'
        }
    </script>
</body>
</html>
结果演示

表单元素的属性操作

比如

  • type、value、checked、selected、disabled
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单</title>
</head>
<body>
    <button id='a'>按钮</button>
    <input value="点按钮">
    <script>
        var an=document.getElementById('a');
        var ip=document.querySelector('input');
        //可以一直点击
        var flag=0;
        an.onclick=function(){
            if (flag==0){
                ip.value='哈哈';
                flag=1;
            }else{
                ip.value='呜呜'
                flag=0;
            }
        }
    </script>
</body>
</html>
结果演示

样式属性操作

比如

  • 大小、颜色、位置等
  • element.style 行内样式操作(适合少的改动,但权重比内嵌的高)
  • element.className 类名样式操作

element.style

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>样式</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div>快点我</div>
    <script>
        var d=document.querySelector('div');
        d.onclick=function(){
            this.style.backgroundColor='blue';
        }
    </script>
</body>
</html>
结果演示

element.className

  • className会直接更改元素的类名,会覆盖原先的类名
  • 如果想要保留原先的类名,就要使用多类名的方法,例如this.className=’first change’。
   <style>
        .change{

        }
    </style>

<body>
    <div></div>
    <script>
        var t=document.querySelector('div');
        t.onclick=function(){
            //让当前元素的类名改为了change
            this.className='change';
        }
    </script>
</body>

快速精灵图

<script>
        var lis=document.querySelectorAll('li');
        for(var i=0;i<lis.length;i++){
            var index = i*44;
            lis[i].style.backgroundPosition='0 -'+index+'px'; //即0 -44px
        }
</script>

焦点事件

  • 获得焦点 onfocus
  • 失去焦点 onblur
<script>
    var text=document.querySelector('input');
    text.onfocus=function(){
        console.log('得到了焦点');
    }
    text.onblur = function () {
            console.log('失去了了焦点');
    }
</script>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>焦点</title>
    <style>
        input{
            color: rgb(192, 197, 201);
        }
    </style>
</head>
<body>
    <input type="text" value="渣渣龙">
    <script>
        var t=document.querySelector('input');
        t.onfocus=function(){
            if(t.value=="渣渣龙"){
                t.value="";
            }
            t.style.color='#333';
        }
        t.onblur=function(){
            if(this.value==""){
                this.value="渣渣龙";
            }
            this.style.color= '#999';
        }
    </script>
</body>
</html>
结果演示
渣渣龙, 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:DOM-操作元素
喜欢 (2)

您必须 登录 才能发表评论!