本文深入解析 W3C Selectors API 中的 querySelector 和 querySelectorAll 方法。详细对比两者在返回值类型、实时性（NodeList）以及与 jQuery find 方法的差异，结合代码示例说明如何在 Document、Element 等节点上高效定位元素，并探讨浏览器兼容性及实际开发中的注意事项。
querySelector 与 querySelectorAll 概述
querySelector 和 querySelectorAll 是 W3C Selectors API 规范中定义的标准方法，旨在依据 CSS 选择器规则，帮助用户便捷地定位文档中指定的元素节点。
目前主流浏览器均已支持这两个方法，涵盖 IE8 及以上版本、Firefox、Chrome、Safari 以及 Opera 等浏览器。
在 W3C 规范中，这两个方法被定义在 NodeSelector 接口下，具体接口定义如下所示。
接口定义与返回值差异
module dom { [Supplemental, NoInterfaceObject] interface NodeSelector { Element querySelector(in DOMString selectors); NodeList querySelectorAll(in DOMString selectors); }; Document implements NodeSelector; DocumentFragment implements NodeSelector; Element implements NodeSelector; };
从接口定义可以看出，Document、DocumentFragment 和 Element 类型均实现了 NodeSelector 接口，这意味着这三种类型的节点都具备 querySelector 和 querySelectorAll 两个方法。这两个方法的参数必须是符合 CSS 选择器规范的字符串。它们的主要区别在于返回值：querySelector 返回单个匹配的元素对象，而 querySelectorAll 返回一个包含所有匹配元素的集合（NodeList）。
例如，获取页面中 id 属性为 test 的元素，可以使用以下代码。
基本使用示例
1 document.getElementById("test");
2 document.querySelector("#test");
3 document.querySelectorAll("#test")[0];若要获取页面中 class 属性为 red 的元素，可以使用以下代码。
document.getElementsByClassName('red')
document.querySelector('.red')
document.querySelectorAll('.red')需要注意的是：
需要特别留意的是，querySelectorAll 返回的 NodeList 集合中的元素是非实时的（non-live）。为了区分实时与非实时返回结果，请参考以下示例。
NodeList 的实时性说明
<div id="container">
<div></div>
<div></div>
</div>
//首先选取页面中id为container的元素
container=document.getElementById('#container');
console.log(container.childNodes.length)//结果为2
//然后通过代码为其添加一个子元素
container.appendChild(document.createElement('div'));
//这个元素不但添加到页面了，这里的变量container也自动更新了
console.log(container.childNodes.length)//结果为3通过上述示例可以清晰理解什么是会实时更新的元素。document.getElementById 返回的是实时结果，在上述代码中为其添加一个子元素后，再次获取所有子元素的个数，结果已由原来的 2 个更新为 3 个（此处暂不考虑某些浏览器如 Chrome 将空白文本也解析为一个子节点的情况）。
Element.querySelector 和 Element.querySelectorAll 与 jQuery(element).find(selector) 在选择行为上存在区别。
与 jQuery find 方法的区别
<SPAN style="FONT-SIZE: 15px"><divid="test1"><ahref="https://www.jb51.net/">本站</a></div>
<pid="bar">111</p>
<script>
var d1 = document.getElementById('test1'),
obj1 = d1.querySelector('div a'),
obj2 = d1.querySelectorAll('div a');
obj3 = $(d1).find('div a');
console.log(obj1)//<a href="https://www.jb51.net/">本站</a>
console.log(obj2.length)//1
console.log(obj3)//null
</script>
</SPAN> querySelectorAll 在文档内查找所有符合选择器描述的节点，包括 Element 本身。
jQuery(element).find(selector) 在文档内查找所有符合选择器描述的节点，但不包括 Element 本身。
以上关于 JavaScript 高级选择器 querySelector 和 querySelectorAll 的全面解析内容分享给大家，希望能提供有益参考，也希望大家多多支持本站。