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. androidstudio 2.3.3 jni过程汇总（2）：2、使用so文件

    2.使用so文件 1.在java文件中System.loadLibrary加载包,并且引入native方法. 2.在app/src/main/下新建jniLibs文件夹,将so包带arm文件夹形式导入 ...

  2. python 爬取拉勾网

    import requestsimport randomimport timeimport osimport csvimport pandas as pdreq_url = 'https://www. ...

  3. Office VBA 参考

    Office VBA 参考:https://docs.microsoft.com/zh-CN/office/vba/api/overview/

  4. shell脚本每五分钟执行一次可执行程序（nohup）

    两种解决方案:个人推荐第二种,使用crontab来定时执行任务   1.shell代码如下: nohup command &. 解释: 后台永久运行command命令. (nohup表示后台永 ...

  5. Read Committed

    在Read Committed隔离级别下,一个事务可能会遇到不可重复读(Non Repeatable Read)的问题. 不可重复读是指,在一个事务内,多次读同一数据,在这个事务还没有结束时,如果另一 ...

  6. Tomcat启动报：The Server time zone value 'XXXXX' 乱码问题解决

    今天给自己项目打包到服务器发布时,运行时,发现报 java.sql.SQLException: The server time zone value '�й���׼ʱ��' is unrecogniz ...

  7. ES6（简单了解）

    1.import类似于var,不过是定义对外接口的,接受外部的文件. import  xx  from  xx ,有点像var i =3: 如import  profile  from './prof ...

  8. （转）OpenFire源码学习之十五：插件开发

    转:http://blog.csdn.net/huwenfeng_2011/article/details/43418493 Plugin接口规范 插件是openfire功能的增强表现,它的主要任务: ...

  9. HDU6333 求组合数前m项的和

    目录 分块 莫队 @ HDU6333:传送门 题意:求组合数前m项的和. 在线分块or离线莫队 分块 重要的一个定理: \[C_{n}^{m} = 0\;\;m > n\] \[C_{n}^{m ...

  10. java求两个数中的大数

    java求两个数中的大数 java中的max函数在Math中 应用如下: int a=34: int b=45: int ans=Math.max(34,45); 那么ans的值就是45.