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. git安装和使用方法url

    1.如何在ubuntu下使用Github? https://blog.csdn.net/tina_ttl/article/details/51326684 https://segmentfault.c ...

  2. Tomcat启动后中文乱码，怎么解决这个问题

    今天很疑惑这个问题,于是去网上找了答案,结果是需要修改Tomcat根目录下面的"logging.properties"文件,把所有的encoding=UTF-8的改成encodng ...

  3. 【TJOI2018】教科书般的亵渎

    题面 题目描述 小豆喜欢玩游戏,现在他在玩一个游戏遇到这样的场面,每个怪的血量为\(a_i\),且每个怪物血量均不相同,小豆手里有无限张"亵渎".亵渎的效果是对所有的怪造成11点伤 ...

  4. leetcode-163周赛-1263-推箱子*

    题目描述: 自己的提交: class Solution: def minPushBox(self, grid: List[List[str]]) -> int: driction = [(0,1 ...

  5. JPA中遇到一些异常的分析与解决

    Spring Data JPA踩坑到填坑:1 JPA多对多关 //作者表 //书籍表 Book和Author是多对多关系 先放两张图做个说明:Jpa底层依赖于hibernate,hibernate默认 ...

  6. onethink中的用户登录session签名

    用户登录签名问题,即防止伪造登录session,增加一个用户登录数组的加密签名 onethink的登录控制,先调用UC表中(UC表也是存储在网站或本地的数据库中的),确认登录信息.如果UC表登录成功, ...

  7. Shiro学习（23）多项目集中权限管理

    在做一些企业内部项目时或一些互联网后台时:可能会涉及到集中权限管理,统一进行多项目的权限管理:另外也需要统一的会话管理,即实现单点身份认证和授权控制. 学习本章之前,请务必先学习<第十章 会话管 ...

  8. xml配置离线约束的目的和ecplipse离线约束配置

    正常情况下如果电脑已经联网的情况下,Spring的核心配置文件编写内容的时候是可以自动提示的,假设电脑如果离线情况下想要自动提示的话,就得配置离线约束文件. https://blog.csdn.net ...

  9. NX二次开发-OLE/COM向EXCEL表格中插入图片

    今晚有一个兄弟问我怎么往EXCEL里插入图片(加工程序单中需要插入图片),这个我之前也没弄过,回复了他一句不知道,后来刚刚干完游戏吃完鸡,就去VC++的书上翻了翻,还真的被我翻到了.VC++的方法往E ...

  10. windows10自动更新好烦啊

    cmd下输入services.msc,找到windows update,把手动变成禁用. https://blog.csdn.net/hwzzyr/article/details/81190442 h ...