(getElementBy**)与 querySelector(querySelectorAll) 的区别
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) 的区别的更多相关文章
- getElementBy系列和querySelector系列的区别
		
querySelector和querySelectorAll的用法和getElementBy大致一样,获取的时候带上符号,getElementBy获取的是元素的动态集合,querySelector获取 ...
 - javascript DOM操作之 querySelector,querySelectorAll
		
javascript DOM操作之 querySelector,querySelectorAll
 - HTML5中DOM元素的querySelector/querySelectorAll的工作机制
		
在HTML5中,提供了强大的DOM元素选择API querySelector/querySelectorAll,允许使用JavaScript代码来完成类似CSS选择器的DOM元素选择功能.通常情况下, ...
 - javaScript中的querySelector()与querySelectorAll()的区别
		
之前,在JavaScript获取文档元素一文中,我曾介绍了获取文档元素的几种方法,最后一种方法是通过选择器获取文档元素.它的核心思想便是利用querySelector()或querySelectorA ...
 - querySelector()与querySelectorAll()的区别及NodeList和HTMLCollection对象的区别
		
querySelector().Document.Element类型均可调用该方法. 当用Document类型调用querySelector()方法时,会在文档元素范围内查找匹配的元素:而当用Elem ...
 - getElementById和querySelector方法的区别
		
"querySelector 属于 W3C 中的 Selectors API 规范 .而 getElementsBy 系列则属于 W3C 的 DOM 规范" 1.区别 getXXX ...
 - getElementsBy 系列方法相比querySelector系列的区别
		
最近在做的项目中,使用querySelectorAll获取了同class名的元素后,绑定onmouseover事件和onmouseout后,多次在几个元素上移入移出操作时,控制台出现了报错的问题,最后 ...
 - html5 新选择器 querySelector  querySelectorAll
		
querySelector 返回满足条件的单个元素 使用实例 HTML <div id="main">主体布局</div> JS var main =doc ...
 - CSS选择器比较:queryselector queryselectorall
		
官网解释: querySelector() and querySelectorAll() are two JavaScript functions very useful when working w ...
 
随机推荐
- 热修复框架Tinker的从0到集成之路(转)
			
转自:http://blog.csdn.net/lisdye2/article/details/54411727 热修复框架Tinker的从0到集成之路 转载请标明出处: http://blog.cs ...
 - Linux防火墙设置——iptables
			
防火墙用于监控往来流量,并根据用户定义的规则来过滤数据包以保证安全.iptables是Linux下设置防火墙规则的常用工具,它可以让你设置.维护以及查看防火墙的规则表.你可以定义多个表,每个表可以包含 ...
 - 高性能js之js文件的加载与解析
			
随着网站的发展,现在的网页已经离不开js,经常一个页面会引入大量的js.那么该如何合理的加载这些js? head标签中引入js文件可能是最常见的一种方式,但是这样会造成一个问题.因为j可以说是浏览器中 ...
 - robotframework+python3+selenium自动化测试环境搭建---第一集
			
1.安装python3.6 1.1 可选择Customize installation自定义安装内容,记得要勾选Add to PATH(这样就不用自己配置环境变量了). 1.2 安装成功后,可以输入p ...
 - Delphi max函数和min函数
			
uses单元 math: min函数 min(A,B); 比较A.B的大小,取最小值 max函数 min(A,B); 比较A.B的大小,取最大值 原型示例:function Min(const A ...
 - HTML5新表单新功能解析
			
HTML5新增了很多属性功能.但是有兼容性问题,因为这些表单功能新增的.我这里做了一个简单的练习,方便参考.如果完全兼容的话,那我们写表单的时候就省了很多代码以及各种判断. <!DOCTYPE ...
 - ac自动机暴力跳fail匹配——hdu5880
			
很简单的题,ac自动机里再维护一个len表示每个状态的串长,用s去query时每到一个结点都要暴力跳fail,因为有可能这个结点不是,但是其fail是危险结点,找到一个就直接break 再用个差分数组 ...
 - CTSC2019
			
(upd:随机立方体AC) 太菜了只会部分分.以后慢慢补坑吧…… 随机立方体: 30分: 正常人都能想到的的转移状态(我的确是弱智),从大往小填数,记录有多少个极大值点和三个方向上各占了多少.转移可以 ...
 - D. Who killed Cock Robin--“今日头条杯”首届湖北省大学程序设计竞赛(网络同步赛)
			
题目描述:链接点此 这套题的github地址(里面包含了数据,题解,现场排名):点此 题目描述 由于系统限制,C题无法在此评测,此题为现场赛的D题 Who killed Cock Robin? I, ...
 - 浅谈虚拟机、Docker和Hyper技术
			
操作系统 我们知道: 完整的操作系统=内核+apps 内核负责管理底层硬件资源,包括CPU.内存.磁盘等等,并向上为apps提供系统调用接口,上层apps应用必须通过系统调用方式使用硬件资源,通常并不 ...