简单盘点一下 JavaScript 的选择器

如果需要通过 JavaScript 来操作 HTML 元素就离不开选择器，JavaScript 的选择器有很多，功能也有些不一样。这里就简单写一下我知道的 JavaScript 选择器。这里只包含原生 JavaScript 的选择器，不包含 jQuery 或其它 库/框架 的选择器。

一般情况下 选择器 都是通过 document 对象来调用，但在有些情况下也可以通过选择器选择的 DOM 来调用。

注意！如果 JavaScript 写在 head 区域内就需要在 window.onload 事件内才能使用选择器。

getElementById(id)

getElementById 可以通过 id 来选择元素。

HTML：

<div id="app"></div>

JavaScript：

var app = document.getElementById('app');  //  选择 id 为 app 的元素

目前基本上所有的浏览器都能兼容 getElementById。

getElementsByTagName(tagName)

getElementsByTagName 可以通过标签名称来选择元素，如果有多个元素就会返回多个元素的集合。

HTML：

<div>1</div>
<div>2</div>
<div>
    3
    <div>4</div>
</div>
<div>5</div>

JavaScript：

var el = document.getElementsByTagName('div');  //  选择所有的 div

for (var i = 0;i < el.length;i ++) {
    console.log(el[i].innerText);  //  按顺序在控制台输出每个元素的文本内容
}

下面是控制台输出的内容：

1
2
3
4
5

目前基本上所有的浏览器都能兼容 getElementsByTagName 。

getElementsByClassName(class)

getElementsByClassName 可以通过元素的 class 来选择元素，如果有多个 class 相同的元素会返回多个元素的集合。

HTML：

<div>
    <button type="button" class="btn">普通按钮</button>
</div>
<div>
    <button type="submit" class="btn">提交按钮</button>
</div>

JavaScript：

var el = document.getElementsByClassName('btn');  //  选择所有 class 为 btn 的元素
console.log(el.length);  //  在控制台输出元素的数量

控制台输出了 2。

下面是浏览器兼容情况：

getElementsByName(name)

getElementsByName 可以通过元素的 name 属性来选择元素，如果有多个 name 相同的元素会返回多个元素的集合。

HTML：

<form>
    <input type="radio" name="gender" id="man">
    <label for="man">男</label>
    <input type="radio" name="gender" id="woman">
    <label for="woman">女</label>
</form>

JavaScript：

var el = document.getElementsByName('gender');  //  选择所有 name 为 gender 的元素
console.log(el.length);  //  在控制台输出元素的数量

控制台输出为 2 。

目前基本上所有的浏览器都能兼容 getElementsByName 。

querySelector(elent)

querySelector 通过类似于 CSS 选择器 的方式来选择元素，如果选择了多个元素也只会返回第一个元素。

HTML：

<div id="app">
    <header>
        <nav class="nav-bar">
            <ul>
                <li>首页</li>
                <li>分类</li>
            </ul>
        </nav>
    </header>
</div>

JavaScript：

var el = document.querySelector('#app .nav-bar li');  //  选择 nav 中的 li
console.log(el);  //  在控制台输出选择的元素

控制台输出为 <li>首页</li>。

下面是 querySelector 的浏览器兼容情况：

querySelectorAll(element)

querySelectorAll 通过类似于 CSS 选择器 的方式来选择元素，如果匹配到多个元素会返回多个元素的集合。

HTML：

<div id="app">
    <header>
        <nav class="nav-bar">
            <ul>
                <li>首页</li>
                <li>分类</li>
            </ul>
        </nav>
    </header>
</div>

JavaScript：

var el = document.querySelectorAll('#app .nav-bar li');  //  选择 nav-bar 中的所有 li
console.log(el.length);  //  在控制台输出元素的数量

控制台输出为 2 。

querySelectorAll 的浏览器兼容情况和 querySelector 是一样的。

在元素上使用选择器

选择器不一定都要在 document 上使用，有的选择器也可以在元素上使用。

HTML：

<ul>
    <li>1.1</li>
    <li>1.2</li>
</ul>
<ul>
    <li>2.1</li>
    <li>2.2</li>
</ul>

下面选择 第 2 组 ul 的第 1 个 li：

JavaScript：

var el = document.getElementsByTagName('ul');  //  选择所有的 ul
console.log(el[1].getElementsByTagName('li')[0].innerHTML);

控制台输出为 2.1 。

以上就是常见的 JavaScript 选择器。

一般情况下如果网页不需要兼容较老的浏览器，或者网页使用了 HTML5 的话建议使用 querySelector 和 querySelectorAll。