请选择 进入手机版 | 继续访问电脑版
开启辅助访问
帐号登录 |立即注册

querySelectorAll与getElementByTagName的区别

 
这两个方法都是用来获取元素的DOM方法,不同的是 querySelectorAll 方法返回的是一个 NodeList 节点列表,而 getElementByTagName 方法返回的是一个 HTMLCollection 集合。

两个方法的区别就在于 NodeList 与 HTMLCollection 的区别。

NodeList 是一个静态对象,从捕获到这个对象开始,里面的元素就是固定不变的。
HTMLCollection 是一个动态集合,里面的元素是动态变化的。

这么说可能有些人会一头雾水,举例说明就一目了然了,上代码:

[JavaScript] 纯文本查看 复制代码
<ul id="demo">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>
<script>
  var ul = document.getElementById('demo');
  var li1 = ul.getElementsByTagName('li');
  var li2 = ul.querySelectorAll('li');

  var li3 = document.createElement('li');  
  ul.appendChild(li3);

  console.log(li1.length, li2.length); // 5, 4

  var li4 = document.createElement('li');  
  ul.appendChild(li4);

  console.log(li1.length, li2.length); // 6, 4
</script>

从上面的例子可以看到,querySelectorAll 获取到的是到这个方法执行为止之前的元素,之后即使再有元素变化,li2中始终只有之前的4个元素。而getElementsByTagName则不同,li1里面的元素数量是动态变化的,会随着实际元素数量的变化而实时更新。

以上就是这两个方法的区别,querySelectorAll 方法应该是借鉴jquery的选择器而产生的,上面例子中,将 querySelectorAll 方法换成jquery选择器,会得到相同的结果。


回复

使用道具 举报

0 个回复

倒序浏览

快速回复

您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

友情链接
  • 艾Q网

    提供设计文章,教程和分享聚合信息与导航工具,最新音乐,动漫,游戏资讯的网站。