getElementsByTagName

Tutorial: DOM操作 Category: JS Published: 2026-04-07 13:58:26 Views: 22 Likes: 0 Comments: 0

获取元素的方式二

<!DOCTYPE html>
<html lang="en">
  <head></head>

  <body>
    <ul>
      <li>知否知否,应是等你好久11</li>
      <li>知否知否,应是等你好久11</li>
      <li>知否知否,应是等你好久11</li>
      <li>知否知否,应是等你好久11</li>
    </ul>

    <ol id="ol">
      <li>生僻字</li>
      <li>生僻字</li>
      <li>生僻字</li>
      <li>生僻字</li>
    </ol>

    <script>
      // 1.返回的是 获取过来元素对象的集合 以伪数组的形式存储的
      var lis = document.getElementsByTagName("li");
      console.log(lis.length); // 8
      console.log(lis[0]); // <li>知否知否,应是等你好久11</li>

      // 2. 我们想要依次打印里面的元素对象我们可以采取遍历的方式
      for (var i = 0; i < lis.length; i++) {
        console.log(lis[i]);
      }

      // 3. 如果页面中只有一个li 返回的还是伪数组的形式

      // 4. 如果页面中没有这个元素 返回的是空的伪数组的形式

      // 5. element.getElementsByTagName('标签名'); 父元素必须是指定的单个元素
      var ol = document.getElementsByTagName("ol"); // [ol], 是个数组
      var lis = ol[0].getElementsByTagName("li"); //  [li, li, li, li]

      var ol1 = document.getElementById("ol"); // 因为页面中只有一个ol
      var lis1 = ol1.getElementsByTagName("li"); // // [li, li, li, li]
    </script>
  </body>
</html>
Prev: getElementById Next: querySelector