获取页面元素的5种方式-js-39课8.13

1.获取页面元素的5种方式

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>如何获取页面元素</title>
  </head>
  <body>
    <div id="list">
      <ul class="poster">
        <li name="active">博客</li>
        <li>情感</li>
        <li>科技</li>
      </ul>
    </div>
    <script>
      // 1. 标签: 返回的是一个元素对象的集合
      var ul = document.getElementsByTagName("ul");
      //   console.log(ul);
      //   console.log(ul[0]);
      //   console.log(ul.item(0));
      // 2. id: 只返回具有指定id的第一个元素(唯一)
      var list = document.getElementById("list");
      //   console.log(list);
      // id的替代语法
      var div = document.getElementsByTagName("div");
      //   在返回的div集合中, 选择具有'list'这个标识符的div
      //   namedItem(id)
      console.log(div.namedItem("list"));
      //   两种方法一样的，相同，判断一下，返回是true
      console.log(div.namedItem("list") === list);
      //   namedItem(name)
      var lis = document.getElementsByTagName("li");
      console.log(lis);
      console.log(lis.namedItem("active"));
      var active = document.getElementsByTagName("li").namedItem("active");
      console.log(active);
      active.style.color = "red";
      //   在元素级别调用以上的api方法来获取元素，获取第一个
      var lis = ul.item(0).getElementsByTagName("li");
      console.log(lis);
      lis.namedItem("active").style.backgroundColor = "yellow";
      // 3. class, 返回一个html集合，给集合加边框
      var poster = document.getElementsByClassName("poster");
      console.log(poster);
      poster.item(0).style.border = "1px solid";
      // 4. 推荐使用下面的方式
      // querySelector(css选择器): 获取满足条件的集合中的第一个元素(类似于id)
      // querySelectorAll(css选择器): 获取满足条件的全部元素组成的集合
      var div = document.querySelector("#list");
      console.log(div);
      //   以下返回第1个
      var li = document.querySelector("#list li");
      //   以下返回第2个
      var li = document.querySelector("#list li:nth-of-type(2)");
      var li = document.querySelector("#list li:last-of-type");
      console.log(li);
      // 5.获取多个
      var lis = document.querySelectorAll(".poster > *");
      console.log(lis);
      console.log(lis.item(2));
      lis.item(2).style.backgroundColor = "green";
    </script>
  </body>
</html>

总结：可获取DOM页面单个或多个元素：
标签: document.getElementsByTagName()
ID: document.getElementById()
class: document.getElementsByClassName()
API: document.querySelector() / document.querySelectorAll()

1.获取页面元素的5种方式

相关文章