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所以可以大胆的使用