实例演示获取dom元素的二个重要方法

<!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>获取dom元素</title>
  </head>
  <body>
    <ul class="list">
      <li class="item">item1</li>
      <li class="item">item2</li>
      <li class="item">item3</li>
      <li class="item">item4</li>
      <li class="item">item5</li>
    </ul>
    <script>
      //获取所有的li.item并且变成红色
      console.log(document);
      console.dir(document.querySelectorAll(".item"));
      const arr = document.querySelectorAll(".item");
      //用for循环
      for (let i = 0; i < arr.length; i++) {
        arr[i].style.color = "red";
      }
      //将第一个改为蓝色
      const firstItem = document.querySelector(".item");
      console.log(firstItem);
      firstItem.style.color = "blue";
      //获取body  head title html
      console.log(document.body);
      console.log(document.head);
      console.log(document.title);
      console.log(document.documentElement);
    </script>
  </body>
</html>

实例演示获取dom元素的二个重要方法

实例演示获取dom元素的二个重要方法

更多相关文章

随机推荐