lovecoding
/
VIP30


			
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091
							<!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>Document</title>
  <style>
    #div1 {
      width: 100px;
      height: 100px;
      background: red;
    }

    #div2 {
      width: 200px;
      height: 200px;
      background: green;
    }

    .xx {
      background: #ccc;
    }
  </style>
</head>

<body>
  <div id="div1">123</div>
  <div id="div2">456</div>
  <button id="btn">修改背景颜色</button>
  <div class="xx">333</div>
  <div>4444</div>
  <div class="xx">5555</div>
  <div>6666</div>


  <ul id="ul1">
    <li class="xx">1</li>
    <li>2</li>
    <li class="xx">3</li>
    <li>4</li>
    <li class="xx">5</li>
    <li>6</li>
  </ul>
  <ul id="ul2">
    <li class="xx">1</li>
    <li>2</li>
    <li class="xx">3</li>
    <li>4</li>
    <li class="xx">5</li>
    <li>6</li>
  </ul>
  <script>
    var div1 = document.getElementById('div1') //对象
    var div2 = document.getElementById('div2')

    var xx = document.getElementsByClassName('xx') //获取的数组
    var btn = document.getElementById('btn')

    var aLi = document.getElementsByTagName('li') //类数组

    var ul2 = document.getElementById('ul2')
    var bLi = ul2.getElementsByTagName('li')
    div1.onclick = function () {
      // console.log(123)
      // console.log(div1)


    }
    div2.onclick = function () {

    }
    console.log(xx) //类数组

    btn.onclick = function () {
      for (var i = 0; i < xx.length; i++) {
        xx[i].style.background = 'orange'
      }
      for (var k = 0; k < aLi.length; k++) {
        aLi[k].style.color = 'red'
      }
      for (var x = 0; x < bLi.length; x++) {
        bLi[x].style.color = 'pink'
      }
    }
    console.log(bLi)
  </script>
</body>

</html>