javascript⾼级选择器querySelector和querySelectorAll全⾯解析
querySelector 和 querySelectorAll ⽅法是 W3C Selectors API 规范中定义的。他们的作⽤是根据 CSS 选择器规范，便捷定位⽂档中指定元素。queryselectorall用法
⽬前⼏乎主流浏览器均⽀持了他们。包括 IE8(含) 以上版本、 Firefox、 Chrome、Safari、Opera。
querySelector 和 querySelectorAll 在规范中定义了如下接⼝：
module dom { [Supplemental, NoInterfaceObject] interface NodeSelector { Element querySelector(in DOMString selectors); NodeList querySelectorAll(in DOMString selectors); }; Document implements NodeSelector; DocumentFragment implements NodeSelect
从接⼝定义可以看到Document、DocumentFragment、Element都实现了NodeSelector接⼝。即这三种类型的元素都拥有者两个⽅法。querySelector和querySelectorAll的参数须是符合 css selector 的字
符串。不同的是querySelector返回的是⼀个对象，querySelectorAll返回的⼀个集合(NodeList)。
获取页⾯I属性D为test的元素：
ElementById("test");
2 document.querySelector("#test");
3 document.querySelectorAll("#test")[0];
获取页⾯class属性为”red”的元素:
document.querySelector('.red')
document.querySelectorAll('.red')
ps:
但需要注意的是返回的nodeList集合中的元素是⾮实时（no-live）的，想要区别什么是实时⾮实时的返回结果，请看下例：
<div id="container">
<div></div>
<div></div>
</div>
//⾸先选取页⾯中id为container的元素
ElementById('#container');
console.log(container.childNodes.length)//结果为2
//然后通过代码为其添加⼀个⼦元素
container.ateElement('div'));
//这个元素不但添加到页⾯了，这⾥的变量container也⾃动更新了
console.log(container.childNodes.length)//结果为3
通过上⾯的例⼦就很好地理解了什么是会实时更新的元素。ElementById返回的便是实时结果，上⾯对其添加⼀个⼦元素后，再次获取所有⼦元素个数，已经由原来的2个更新为3个(这⾥不
考虑有些浏览器⽐如Chrome会把空⽩也解析为⼀个⼦节点)。
Element.querySelector和Element.querySelectorAll和jQuery(element).find(selector)选择器的区别：
<SPAN ><divid="test1"><ahref="www.jb51/"></a></div>
<pid="bar">111</p>
<script>
var d1 = ElementById('test1'),
obj1 = d1.querySelector('div a'),
obj2 = d1.querySelectorAll('div a');
obj3 = $(d1).find('div a');
console.log(obj1)//<a href="www.jb51/"></a>
console.log(obj2.length)//1
console.log(obj3)//null
</script>
</SPAN>
querySelectorAll 在⽂档内全部符合选择器描述的节点包括Element本⾝
jQuery(element).find(selector) 在⽂档内全部符合选择器描述的节点不包括Element本⾝
以上这篇javascript⾼级选择器querySelector和querySelectorAll全⾯解析就是⼩编分享给⼤家的全部内容了，希望能给⼤家⼀个参考，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。