簡(jiǎn)介
HTML5向Web API新引入了document.querySelector以及document.querySelectorAll兩個(gè)方法用來更方便地從DOM選取元素，功能類似于jQuery的選擇器。這使得在編寫原生JavaScript代碼時(shí)方便了許多。
用法
======
兩個(gè)方法使用差不多的語法，都是接收一個(gè)字符串參數(shù)，這個(gè)參數(shù)需要是合法的CSS選擇語法。
<pre>
element = document.querySelector('selectors');
elementList = document.querySelectorAll('selectors');
</pre>
其中參數(shù)selectors 可以包含多個(gè)CSS選擇器，用逗號(hào)隔開。
<pre>
element = document.querySelector('selector1,selector2,...');
elementList = document.querySelectorAll('selector1,selector2,...');
</pre>
使用這兩個(gè)方法無法查找?guī)晤悹顟B(tài)的元素，比如<b>querySelector(':hover')</b>不會(huì)得到預(yù)期結(jié)果。
querySelector
<pre>
element = document.querySelector('div#container');//返回id為container的首個(gè)div
element = document.querySelector('.foo,.bar');//返回帶有foo或者bar樣式類的首個(gè)元素
</pre>
querySelectorAll
該方法返回所有滿足條件的元素，結(jié)果是個(gè)nodeList集合。查找規(guī)則與前面所述一樣。
<pre>elements = document.querySelectorAll('div.foo');//返回所有帶foo類樣式的div</pre>
需要注意的是返回的nodeList集合中的元素是非實(shí)時(shí)的.
