JavaScript 高级选择器：querySelector 与 querySelectorAll 全面解析

接口定义与返回值差异

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; };

基本使用示例

1 document.getElementById("test");
2 document.querySelector("#test");
3 document.querySelectorAll("#test")[0];

document.getElementsByClassName('red')
document.querySelector('.red')
document.querySelectorAll('.red')

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

与 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>