HTML5 - 获取选择器API

获取选择器（单个）

语法：

document.querySelector("选择器")

实例1：获取id="username"的选择器

<ul>
    <li id="name">Tom</li>
    <li id="age">26</li>
</ul>

<script>
    document.querySelector("#name").style.color="#EE3030";
</script>

实例2：获取class="username"的选择器

<ul>
    <li class="name">Tom</li>
    <li class="age">26</li>
</ul>

<script>
    document.querySelector(".name").style.color="#EE3030";
</script>

实例3：获取ul下的li标签选择器
注意：document.querySelector只返回一个选择器，下例中虽然ul下有两个li标签，但是影响到的只有第一个li标签。

<ul>
    <li>Tom</li>
    <li>26</li>
</ul>

<script>
    document.querySelector("ul li").style.color="#EE3030";
</script>

获取选择器（多个）

语法：

document.querySelectorAll("选择器")

实例：获取ul下的li标签选择器

<ul>
    <li>Tom</li>
    <li>26</li>
</ul>

<script>
    var selector = document.querySelectorAll("ul li");
    selector[0].style.color="#EE3030";
    selector[1].style.color="#EE3030";
</script>