1. 通过类似于 document.getElementByTagName('div') 这种方式获取到的类数组，无法通过 forEach 进行遍历（可以通过for循环）；而通过document.querySelectorAll(div)可以通过forEach 进行遍历。

（1）首先看 getElementByTagName 的这种情况


网页表现

（2）然后看 querySelectorAll 的这种情况


网页表现

2. 通过 getElementBy** 获取这种方式获取到的数组是动态的；而 querySelectorAll 这种方式获取到的是静态的（但是如果是 querySelectorAll 获取到的dom内部发生的变化，依旧是会动态改变的）

（1）首先我们看 getElementBy** 这种方式


网页表现

（2）我们可以看到尽管没有重新获取dom，liArr还是检测到了新加入的 li 标签。接下来我们看一下通过 querySelectorAll 这种方式获取到的dom列表。


网页表现

（3）接下来，我们将一个新的标签放到第一个li标签的内部。


网页表现

可以发现，通过 querySelectorAll 获取到的dom并不是绝对静态的，添加到这些dom内部的变化，依旧可以检测到。

（getElementBy**）与 querySelector(querySelectorAll) 的区别的更多相关文章

  1. getElementBy系列和querySelector系列的区别

    querySelector和querySelectorAll的用法和getElementBy大致一样,获取的时候带上符号,getElementBy获取的是元素的动态集合,querySelector获取 ...

  2. javascript DOM操作之 querySelector,querySelectorAll

    javascript DOM操作之 querySelector,querySelectorAll

  3. HTML5中DOM元素的querySelector/querySelectorAll的工作机制

    在HTML5中,提供了强大的DOM元素选择API querySelector/querySelectorAll,允许使用JavaScript代码来完成类似CSS选择器的DOM元素选择功能.通常情况下, ...

  4. javaScript中的querySelector()与querySelectorAll()的区别

    之前,在JavaScript获取文档元素一文中,我曾介绍了获取文档元素的几种方法,最后一种方法是通过选择器获取文档元素.它的核心思想便是利用querySelector()或querySelectorA ...

  5. querySelector()与querySelectorAll()的区别及NodeList和HTMLCollection对象的区别

    querySelector().Document.Element类型均可调用该方法. 当用Document类型调用querySelector()方法时,会在文档元素范围内查找匹配的元素:而当用Elem ...

  6. getElementById和querySelector方法的区别

    "querySelector 属于 W3C 中的 Selectors API 规范 .而 getElementsBy 系列则属于 W3C 的 DOM 规范" 1.区别 getXXX ...

  7. getElementsBy 系列方法相比querySelector系列的区别

    最近在做的项目中,使用querySelectorAll获取了同class名的元素后,绑定onmouseover事件和onmouseout后,多次在几个元素上移入移出操作时,控制台出现了报错的问题,最后 ...

  8. html5 新选择器 querySelector querySelectorAll

    querySelector 返回满足条件的单个元素 使用实例 HTML <div id="main">主体布局</div> JS var main =doc ...

  9. CSS选择器比较：queryselector queryselectorall

    官网解释: querySelector() and querySelectorAll() are two JavaScript functions very useful when working w ...

随机推荐

  1. nginx获取头部信息带下划线，获取不到解决方案

    nginx获取头部信息带下划线,获取不到解决方案 解决方案: 修改配置文件,进行添加信息如下: underscores_in_headers on; 然后进行重新加载: [root@qa-web co ...

  2. 洛谷P1935 [国家集训队]圈地计划

    题目大意: 有个\(n*m\)的网格图 每个点可以选择\(A\),获得\(A[i][j]\)或选\(B\)获得\(B[i][j]\)的收益 相邻点有\(k\)个不同可以获得\(C[i][j]\)的收益 ...

  3. read more阅读更多，文字超过三行字符后面添加省略号

    var text;$('.blog-item').each(function (i) {text = $(this).find('.blog-excerpt').html();if (text.len ...

  4. 【LeetCode 25】K 个一组翻转链表

    题目链接 [题解] 模拟就好. 就k个k个节点地翻转. 每个节点都把next域指向它前面那个节点 修改完之后把这个节点前面的那个节点的next域改成这一段的最后一个节点. 然后把这一段最左边的那个节点 ...

  5. 【LeetCode 3】无重复字符的最长子串

    描述 [题解] 尺取法 对于[l..r]这段 如果新加进来的s[r]有和之前的重复. 那么就不用重新开始了. 直接递增左区间. 让这段没有重复数字了再说. *****然后再把s[r]加进去. [代码] ...

  6. 最常用的C++序列化方案：protobuf

    参考链接:最常用的两种C++序列化方案的使用心得(protobuf和boost serialization) [c++] Google Protobuf库1. 什么是序列化?程序员在编写应用程序的时候 ...

  7. access注入篇+sqlmap

    access数据库的来历,我就不说了,因为我懒的记,就算记了感觉上也没大多用处,只要记得数据库的结构就行了.先是表名,然后是列名,再者就是数据,我发个实际的图吧,大概就是这么一个结构. 下面,开始说下 ...

  8. 使用并行ssh提高工作效率

    我们经常需要ssh到多个主机上执行相同的命令,为了提高效率,我们通常会自己写个脚本,循环遍历执行我们的命令,比如: for host in `cat hosts.txt`;do ssh usernam ...

  9. Openstack 中的消息总线 & AMQP

    目录 目录 消息总线 消息总线的原理 AMQP 消息总线 Openstack 采用了面向服务的开发模式(有别于面向对象和面向过程),需要我们去考虑各个服务之间和各项目之间是如何传递消息的. Restf ...

  10. SPOJ MAXMATCH - Maximum Self-Matching (FFT)

    题目链接:MAXMATCH - Maximum Self-Matching Description You're given a string s consisting of letters 'a', ...