js中的原生元素選擇器

當我們想要選擇dom中的元素時，第一個想到的就是document.getElementById()和document.getElementsByTagName()，還有針對表單的document.getElementsByName();

在h5中我們又有了類選擇器：getElementsByClassName(),但這個方法不兼容IE8及以下,我么在使用時還是需要寫一個兼容的函數，因為現在還是很多IE8的，至於為什么不考慮IE8以下，呵呵，我給你一個眼神，自己體會。

但在前幾天我突然看到書上的兩個選擇器querySelect()和querySelectAll(),發現他們竟然兼容IE8，這個真的是太棒了。

他們的用法和getElement用法是一樣的,但是選擇符適合JQuery一樣的！：

<ul>
    <li class="aa"></li>
    <li class ="a"></li>
    <li class="b aa"></li>
    <li class="aa"></li>
　　 <li id="a"></li>

</ul>

我們使用querySelect()

            console.log(document.querySelector('#a'));
            console.log(document.querySelector('.a'));
            console.log(document.querySelector('.aa'));

我們發現輸出的是 <li id="a"></li>,<li class = 'a'></li>,<li class="aa"></li>

這說明querySelector()選擇的只是所有中的第一個元素，而且返回的是元素對象，不是數組。

使用querySelectAll()

console.log(document.querySelectorAll('#a'));
console.log(document.querySelectorAll('.a'));
console.log(document.querySelectorAll('.aa'));

這時輸出的是[li#a],[li.a],[li.aa,li.b.aa,li.aa];

這說明querySelector()選擇的是所有符合條件的元素，並返回數組。

因為這兩個方法兼容IE8所以可以大膽的使用