js中的原生元素選擇器

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

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

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

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

複製程式碼

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

我們發現輸出的是

這說明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所以可以大膽的使用