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. visual studio 自定义警告标签

    写代码中经常会遇见某段代码写的不大合适或者是有隐患,但是一时半会有没时间不去完善,总体上不影响程序,也就放下了 结果时间一久就给忘了 vs提供了自定义警告的功能,这样就能有个提醒啦,方便以后改进 us ...

  2. linux给用户赋予root权限

    1.到/etc目录下 2.使用 vi sudoers 3.将username添加到sudoers

  3. BZOJ 3230: 相似子串(后缀数组)

    传送门 解题思路 其实题目挺好想的.首先子串排名可以由后缀数组求得,因为不算重复的,所以后缀数组的每个后缀排名的去掉\(lcp\)的前缀排名为当前后缀的子串排名.这样就可以预处理出每个后缀的\(l,r ...

  4. 学 Win32 汇编[21] - 传送指令: MOV、LEA、XCHG、XLATB、XLAT、MOVZX、MOVSX

    汇编指令的一般性要求: 1.两个操作数的尺寸必须一致; 2.操作数不能同为内存. MOV(Move): 最常用的数据传送指令 ;该指令不影响 EFlags ;指令格式: (其中的 r.m.i 分别表示 ...

  5. iOS 几种定时器

    //第一种 每一秒执行一次(重复性) double delayInSeconds = 1.0; timer = dispatch_source_create(DISPATCH_SOURCE_TYPE_ ...

  6. ASP.NET Core学习——4

    静态文件 静态文件(static files),例如HTML.CSS.图片和JavaScript之类的资源会被ASP.NET Core应用直接提供给客户端. 静态文件通常位于web root(< ...

  7. (52) C# 串口通讯

    一.串口通讯基本参数 1.波特率:每秒传输n个多少个二进制位. 例如 9600 b/s  = 1200 B/s=  1.172KB/S 2.传输数据格式 数据格式由起始位(start bit).数据位 ...

  8. BZOJ 2460 & 洛谷 P4570 [BJWC2011]元素 (线性基 贪心)

    题目链接: 洛谷 BZOJ 题意 给定 \(n\) 个矿石,每个矿石有编号和魔力值两种属性,选择一些矿石,使得魔力值最大且编号的异或和不为 0. 思路 线性基 贪心 根据矿石的魔力值从大到小排序. 线 ...

  9. 【Linux】- CentOS安装docker及docker-compose

    1.安装docker,命令如下: -- 把yum包更新到最新 yum update -- 安装需要的软件包, yum-util 提供yum-config-manager功能,另外两个是devicema ...

  10. Organizing Containers of Balls

    题目 David has several containers, each with a number of balls in it. He has just enough containers to ...