操作dom遍历ul下的li出现Uncaught TypeError: list.getElementsByTagName is not a function的原因及解决办法

小严学Java

已于 2022-07-13 16:40:32 修改

阅读量673

点赞数

分类专栏： js 文章标签： javascript

于 2022-07-13 15:58:25 首次发布

本文链接：https://blog.csdn.net/weixin_52339077/article/details/125765852

版权

js 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

正确代码如下

<!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>
  </head>
  <body>
    <ul class="list">
      <li>我是1</li>
      <li>我是2</li>
      <li>我是3</li>
      <li>我是4</li>
    </ul>

    <script>
      var list = document.getElementsByClassName("list");
      var li = list[0].getElementsByTagName("li");
      console.log(li);
    </script>
  </body>
</html>

当我们在控制台打印list的时候，可以看到

这说明打印出来的是一个数组，使用前需要加上索引

为ul增加新的li

<!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>
  </head>
  <body>
    <ul class="list">
      <li>我是1</li>
      <li>我是2</li>
      <li>我是3</li>
      <li>我是4</li>
    </ul>

    <script>
      var list = document.getElementsByClassName("list");
      var newLi = document.createElement("li");
      var node = document.createTextNode("我是被添加进来的新的li");
      newLi.appendChild(node);
      list[0].appendChild(newLi);
      console.log(list);
    </script>
  </body>
</html>

同样的，在要使用list的时候，不要忘记他是个数组，记得带上索引，不然又会报同样的错误。

删除ul下的某个li

<!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>
  </head>
  <body>
    <ul class="list">
      <li class="l1">我是1</li>
      <li>我是2</li>
      <li>我是3</li>
      <li>我是4</li>
    </ul>

    <script>
      var list = document.getElementsByClassName("list");
      list[0].removeChild(list[0].children[0]);//删除第一个
    </script>
  </body>
</html>

同样的，在要使用list的时候，不要忘记他是个数组，记得带上索引，不然又会报同样的错误。