javascript之querySelector和querySelectorAll

其实关于querySelector和querySelectorAll的介绍说明很多。

在此主要是做个记录。

一开始很多人都会拿jquery的选择器来跟这两个api做对比（我也是），比较异同本来没事，但却使一些同学对这两个api在浏览器中的实现产生了误解，特别是再dom element上调用此api时。

下面是我的jsFiddle示例，我就以此展开说明：

误解就在于对$('inner').querySelectorAll('#main h4.inside')的实现理解，不少人一开始几乎都认为是直接从div[id='inner']的孩子中进行查找（我也是），这个#main有点碍眼。实际上它还是根据selector string从整个document上查找，再返回属于div[id='inner']的子节点。很多人会疑惑，那么为什么不按照直接按父节点找子节点的方式来实现呢？就像elem.getElementsByTagName，我的想法是灵活selector string吧。

querySelector只返回匹配的第一个元素，如果没有匹配项，返回null。

querySelectorAll返回匹配的元素集合，如果没有匹配项，返回空的nodelist(节点数组)。

并且返回的结果是静态的，之后对document结构的改变不会影响到之前取到的结果。

目前IE8+，ff，chrome都支持此api（IE8中的selector string只支持css2.1的）。

转载于:https://www.cnblogs.com/AndyWithPassion/archive/2011/10/08/javascript_querySelector_querySelectorAll.html

javascript之querySelector和querySelectorAll相关推荐

javascript之原生document.querySelector和querySelectorAll方法
querySelector和querySelectorAll是W3C提供的新的查询接口,其主要特点如下: 1.querySelector只返回匹配的第一个元素,如果没有匹配项,返回null. 2. ...
强大的原生DOM选择器querySelector和querySelectorAll
在传统的 JavaScript 开发中,查找 DOM 往往是开发人员遇到的第一个头疼的问题,原生的 JavaScript 所提供的 DOM 选择方法并不多,仅仅局限于通过 tag, name, id ...
原生DOM选择器querySelector和querySelectorAll
在传统的 JavaScript 开发中,查找 DOM 往往是开发人员遇到的第一个头疼的问题,原生的 JavaScript 所提供的 DOM 选择方法并不多,仅仅局限于通过 tag, name, id ...
原生的强大DOM选择器querySelector - querySelector和querySelectorAll
在传统的 JavaScript 开发中,查找 DOM 往往是开发人员遇到的第一个头疼的问题,原生的 JavaScript 所提供的 DOM 选择方法并不多,仅仅局限于通过 tag, name, id ...
JavaScript中 querySelector 与 getElementById 方法的区别
1. 概述在看代码的时候发现基本上都是用 querySelector() 和 querySelectorAll() 来获取元素,疑惑为什么不用 getElementById(). 可能因为自己没用过 ...
document.querySelector和querySelectorAll方法
querySelector和querySelectorAll是W3C提供的新的查询接口,其主要特点如下: 1.querySelector只返回匹配的第一个元素,如果没有匹配项,返回null. 2. ...
新增的querySelector、querySelectorAll测试
从IE9开始DOM开始支持支持CSS的选择器了,DOM提供了两个接口 querySelector 得到一个DOM querySelectorAll 得到一组DOM 一个个的解释这些选择器也没有必要,我 ...
再谈querySelector和querySelectorAll
先按W3C的规范来说这两个方法应该返回的内容吧: querySelector: return the first matching Element node within the node's sub ...
JavaScript基础教程之querySelectorAll( )方法遇到的问题
Write By Monkeyfly 以下内容均为原创,如需转载请注明出处. 一.前提最近这两天一直在学习JavaScript的事件委托(或称事件代理),用了两天的时间看完了这篇<js中的事件 ...
你不需要jQuery(四)
jQuery是个好东西.它诞生于IE6在互联网称霸的那个时代.jQuery的存在让我们的代码能很好的兼容各种平台. 然而,到如今,浏览器技术已经取得了巨大的进步.我们可以自由的使用所有最新众多ES5/ ...

javascript之querySelector和querySelectorAll

javascript之querySelector和querySelectorAll相关推荐

最新文章

热门文章