js 获取 DOM 元素注意事项

最新推荐文章于 2023-01-15 00:22:55 发布

agyyl0

最新推荐文章于 2023-01-15 00:22:55 发布

阅读量260

点赞数

分类专栏：每日学习总结文章标签： js

本文链接：https://blog.csdn.net/agyyl0/article/details/80306725

版权

每日学习总结专栏收录该内容

5 篇文章 0 订阅

订阅专栏

js 获取 DOM 元素注意事项

getElementById调用者

getElementById方法是 Document 对象的方法，调用者只能是document，而不像其他获取元素的方式，调用者可以是 DOM 元素。理论上讲，每个ID对用一个元素，只使用document调用方法已经足够。

使用元素调用getElementById 会报错。

通过类名，标签名获取的元素类数组是实时的

getElementsByTagName 方法与 getElementsByClassName 方法返回的类数组是实时的，当元素个数改变，返回数组也会跟着改变，无论是否重新得到数组。也就是说，该方法实际上并没有新创建数组，而是将变量指向了这些元素组成的本就存在的数组，而元素改变时，数组本身已经改变，表现为变量指向的数组跟着改变。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <p class="abc"></p>
  <p class="abc"></p>
  <p class="abc"></p>

  <script>
    var ap = document.getElementsByTagName('p');
    // var ap = document.getElementsByClassName('abc');
    console.log(ap.length);
    var newp = document.createElement('p');
    newp.classList.add('abc');
    document.body.appendChild(newp);
    console.log(newp);
    console.log(ap.length);

  </script>
</body>
</html>

但 querySelectorAll 和 querySelector 方法选中的元素组成的类数组不会由于 DOM 结构的改变而改变。

agyyl0

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js 获取 DOM 元素注意事项

js 获取 DOM 元素注意事项getElementById调用者getElementById方法是 Document 对象的方法，调用者只能是document，而不像其他获取元素的方式，调用者可以是 DOM 元素。理论上讲，每个ID对用一个元素，只使用document调用方法已经足够。使用元素调用getElementById 会报错。通过类名，标签名获取的元素类数组是实...
复制链接

扫一扫

专栏目录