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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>获取dom元素</title>
  8.   </head>
  9.   <body>
  10.     <ul class="list">
  11.       <li class="item">item1</li>
  12.       <li class="item">item2</li>
  13.       <li class="item">item3</li>
  14.       <li class="item">item4</li>
  15.       <li class="item">item5</li>
  16.     </ul>
  17.     <script>
  18.       //获取所有的li.item并且变成红色
  19.       console.log(document);
  20.       console.dir(document.querySelectorAll(".item"));
  21.       const arr = document.querySelectorAll(".item");
  22.       //用for循环
  23.       for (let i = 0; i < arr.length; i++) {
  24.         arr[i].style.color = "red";
  25.       }
  26.       //将第一个改为蓝色
  27.       const firstItem = document.querySelector(".item");
  28.       console.log(firstItem);
  29.       firstItem.style.color = "blue";
  30.       //获取body  head title html
  31.       console.log(document.body);
  32.       console.log(document.head);
  33.       console.log(document.title);
  34.       console.log(document.documentElement);
  35.     </script>
  36.   </body>
  37. </html>