簡(jiǎn)介
HTML5向Web API新引入了
document.querySelector以及document.querySelectorAll兩個(gè)方法用來(lái)更方便地從DOM選取元素冯凹，功能類似于jQuery的選擇器。這使得在編寫原生JavaScript代碼時(shí)方便了許多炒嘲。
用法
兩個(gè)方法使用差不多的語(yǔ)法谈竿，都是接收一個(gè)字符串參數(shù)，這個(gè)參數(shù)需要是合法的CSS選擇語(yǔ)法。
element = document.querySelector('selectors');
elementList = document.querySelectorAll('selectors');
其中參數(shù)selectors 可以包含多個(gè)CSS選擇器啼止，用逗號(hào)隔開。
element = document.querySelector('selector1,selector2,...');
elementList = document.querySelectorAll('selector1,selector2,...');
使用這兩個(gè)方法無(wú)法查找?guī)晤悹顟B(tài)的元素，比如querySelector(':hover')不會(huì)得到預(yù)期結(jié)果。
querySelector
該方法返回滿足條件的單個(gè)元素。按照深度優(yōu)先和先序遍歷的原則使用參數(shù)提供的CSS選擇器在DOM進(jìn)行查找桨嫁，返回第一個(gè)滿足條件的元素
element = document.querySelector('div#container');//返回id為container的首個(gè)div
element = document.querySelector('.foo,.bar');//返回帶有foo或者bar樣式類的首個(gè)元素
querySelectorAll
該方法返回所有滿足條件的元素弥鹦，結(jié)果是個(gè)nodeList集合栓始。查找規(guī)則與前面所述一樣禀忆。
elements = document.querySelectorAll('div.foo');//返回所有帶foo類樣式的div
但需要注意的是返回的nodeList集合中的元素是非實(shí)時(shí)（no-live）的戴涝，想要區(qū)別什么是實(shí)時(shí)非實(shí)時(shí)的返回結(jié)果可帽，請(qǐng)看下例：
<div id="container">
<div></div>
<div></div>
</div>
//首先選取頁(yè)面中id為container的元素
container=document.getElementById('#container');
console.log(container.childNodes.length)//結(jié)果為2
//然后通過(guò)代碼為其添加一個(gè)子元素
container.appendChild(document.createElement('div'));
//這個(gè)元素不但添加到頁(yè)面了，這里的變量container也自動(dòng)更新了
console.log(container.childNodes.length)//結(jié)果為3
通過(guò)上面的例子就很好地理解了什么是會(huì)實(shí)時(shí)更新的元素。document.getElementById返回的便是實(shí)時(shí)結(jié)果，上面對(duì)其添加一個(gè)子元素后收厨，再次獲取所有子元素個(gè)數(shù)，已經(jīng)由原來(lái)的2個(gè)更新為3個(gè)(這里不考慮有些瀏覽器比如Chrome會(huì)把空白也解析為一個(gè)子節(jié)點(diǎn))彪腔。
