(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内部的变化,依旧可以检测到。

原文地址:https://www.cnblogs.com/usebtf/p/10409786.html

时间: 2024-08-13 08:02:54

(getElementBy**)与 querySelector(querySelectorAll) 的区别的相关文章

html5 新选择器 querySelector querySelectorAll

querySelector 返回满足条件的单个元素 使用实例 HTML <div id="main">主体布局</div> JS var main =document.querySelector('#main'); console.log(main) 这时候结果返回的就是 整个元素 <div id="main">主体布局</div> 返回一个查询元素 测试谷歌 IE11 IE10 IE9  火狐  可以正常使用 PS:

重要选择器querySelector和querySelectorAll

他们的作用是根据 CSS 选择器规范,便捷定位文档中指定元素. 目前几乎主流浏览器均支持了他们.包括 IE8(含) 以上版本. Firefox. Chrome.Safari.Opera. querySelector 和 querySelectorAll 在规范中定义了如下接口: 从接口定义可以看到Document.DocumentFragment.Element都实现了NodeSelector接口.即这三种类型的元素都拥有者两个方法.querySelector和querySelectorAll的

querySelectorAll 与jquery.find 与htmlcollection 的区别

querySelector 和 querySelectorAll 规范定义 querySelector 和 querySelectorAll 方法是 W3C Selectors API Level 1规范中定义的.他们的作用是根据 CSS 选择器规范,便捷定位文档中指定元素. 目前几乎主流浏览器均支持了他们.包括 IE8(含) 以上版本. Firefox. Chrome.Safari.Opera. querySelector 和 querySelectorAll 在规范中定义了如下接口: mod

sizzle分析记录:关于querySelectorAll兼容问题

querySelector和querySelectorAll是W3C提供的新的查询接口 目前几乎主流浏览器均支持了他们.包括 IE8(含) 以上版本. Firefox. Chrome.Safari.Opera. 万能的sizzle在高版本的浏览器中复杂的选择器尽量走querySelectorAll,前提是这个匹配的节点没有兼容问题 从IE8开始虽然支持querySelectorAll的API,但是会有各式各样的BUG,所以sizzle拿rbuggyQSA用来记录这个BUG问题 if ( supp

DOM querySelector选择器

原生的强大DOM选择器querySelector 在传统的 JavaScript 开发中,查找 DOM 往往是开发人员遇到的第一个头疼的问题,原生的 JavaScript 所提供的 DOM 选择方法并不多,仅仅局限于通过 tag, name, id 等方式来查找,这显然是远远不够的,如果想要进行更为精确的选择不得不使用看起来非常繁琐的正则表达式,或者使用某个库.事实上,现在所有的浏览器厂商都提供了 querySelector 和 querySelectorAll 这两个方法的支持,甚至就连微软也

原生的强大DOM选择器querySelector

在传统的 JavaScript 开发中,查找 DOM 往往是开发人员遇到的第一个头疼的问题,原生的 JavaScript 所提供的 DOM 选择方法并不多,仅仅局限于通过 tag, name, id 等方式来查找,这显然是远远不够的,如果想要进行更为精确的选择不得不使用看起来非常繁琐的正则表达式,或者使用某个库.事实上,现在所有的浏览器厂商都提供了 querySelector 和 querySelectorAll 这两个方法的支持,甚至就连微软也派出了 IE 8 作为支持这一特性的代表,quer

JavaScript DOM 选择器 querySelector

W3C的规范与库中的实现 querySelector:return the first matching Element node within the node’s subtrees. If there is no such node, the method must return null .(返回指定元素节点的子树中匹配selector的集合中的第一个,如果没有匹配,返回null) querySelectorAll:return a NodeList containing all of t

getElementById() getElementsByTagName() getElementsByClassName() querySlector() querySlectorAll()区别

1. getElementById() getElementsByTagName()  javascript原生的方法,这两个不会有兼容性问题. 2. getElementsByClassName()是HTML5的DOM API ,IE8以下不支持(不支持HTML5的浏览器). 对于现代浏览器,document.getElementsByClassName( 'wrap' )获取的是DOM中所有class为wrap的元素 在IE8以下,可以模拟实现这种效果 function getElement

Html5新增的属性-querySelector

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>querySelector/querySelectorAll</title> </head> <body> <div> <ul> <li class="item">item1&l