前端的第十九天（DOM）

4.操作元素

在这里插入图片描述

    <script>
        var btns = document.getElementsByTagName('button');
        for(var i=0 ; i<btns.length ;i++){
            btns[i].onclick = function(){
                for(var i=0 ; i<btns.length ;i++){
                btns[i].style.backgroundColor = '';
                }
            this.style.backgroundColor = 'pink';
            }
        }
    </script>

在这里插入图片描述

    <style>
        body {
            background-image: url("");
        }
        ul{
            margin: 100px auto;
        }
        li,img {
            width: 200px;
            height: 200px;
            display: inline-block;
        }
    </style>
</head>
<body>
    <ul>
        <li> <img src="./images/1.jpg" alt=""> </li>
        <li> <img src="./images/2.jpg" alt=""> </li>
        <li> <img src="./images/3.jpg" alt=""> </li>
        <li> <img src="./images/4.jpg" alt=""> </li>
    </ul>

    <script>
        var body = document.querySelector('body');
        var imgs = document.querySelector('ul').querySelectorAll('img');
            for(var i=0 ; i<imgs.length ; i++){
                imgs[i].onclick = function(){
                    body.style.backgroundImage = 'url(' + this.src +')';
                }
            }
    </script>

在这里插入图片描述

    <div data-zdy="2"></div>
    <div data-zdy="3"></div>
    <div data-zdy="55"></div>
    <div data-zdy="21"></div>
    <div data-zdy="19"></div>
    <div data-zdy="18"></div>
    <script>
        var divs = document.querySelectorAll('div');
        for(var i=0 ; i<divs.length ; i++){
            console.log(divs[i].getAttribute('data-zdy'));
            divs[i].setAttribute('data-zdy','520caicai')
            console.log(divs[i].getAttribute('data-zdy'));            
        }
    </script>

在这里插入图片描述

5.节点操作

在这里插入图片描述

var nav = document.querySelector('.nav');
var lis = nav.children; // 得到4个小li
for (var i = 0; i < lis.length; i++) {
lis[i].onmouseover = function() {
this.children[1].style.display = 'block';
}
lis[i].onmouseout = function() {
this.children[1].style.display = 'none';
}
}

在这里插入图片描述

   function getNextElementSibling(element) {
      var el = element;
      while (el = el.nextSibling) {
        if (el.nodeType === 1) {
            return el;
        }
      }
      return null;
    }

在这里插入图片描述

    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
            text-align: center;
            line-height: 100px;
            font-size: 20px;
            color: aliceblue;
        }
    </style>
</head>
<body>
    <div style="background-color: white;" class="father">
        <div style="background-color: skyblue;" class="sc">生成盒子</div>
    </div>
</body>
<script>
    var father = document.querySelector('.father');
    var sc = document.querySelector('.sc');
    sc.onclick = function(){
        var son = document.createElement('div');
        father.insertBefore(son,father.children[0]);
    }
</script>