JavaScript 获取 DOM 元素

在 JavaScript 中，对于一个页面，我们想要对某个 DOM 元素进行操作，就必须通过一定的方式来获取该元素，只有获取到了，才能对其进行相应的操作。

咦，这不跟 “CSS 选择器” 相似吗？说得没错。只不过选择器是 CSS 的操作方式，而 JavaScript 却有着属于自己的另一套方法。在 JavaScript 中，我们可以通过以下 6 种方式来获取指定元素。

getElementById()
getElementsByTagName()
getElementsByClassName()
querySelector() 和 querySelectorAll()
getElementsByName()
document.title 和 document.body

上面每一种方法都非常重要，我们要一个个地认真学透。请注意，JavaScript 是严格区分大小写的，所以在书写的时候，就不要把这些方法写错了。例如你把 “getElementById()” 写成 “getelementbyid()”，就无法得到正确的结果。

getElementById()

在 JavaScript 中，如果想要通过 id 来选中元素，我们可以使用 getElementById() 方法来实现。 “getElementById” 这个方法的名字看似很复杂，其实根据英文来理解就很容易了，也就是 “get element by id（通过 id 来获取元素）” 的意思。

实际上，getElementById() 类似于 “CSS id 选择器” ，只不过 getElementById() 是 JavaScript 的操作方式，而 id 选择器是 CSS 的操作方式。

语法：

document.getElementById("元素ID")

示例 1：使用 window.onload

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script>
        window.onload = function () {
            const oDiv = document.getElementById("title");
            oDiv.style.color = "red";
        }
    </script>
</head>
<body>
    <h3 id="title">绿叶网</h3>
</body>
</html>

页面效果如下图所示。

使用window.onload

分析：

在这个例子中，我们使用 getElementById() 方法获取 id 为 "title" 的元素，并且把这个 DOM 对象赋值给变量 oDiv，最后使用 oDiv.style.color = "red" 设置这个元素的颜色为红色。这个用法，我们也会在 “JavaScript 修改 CSS” 一节介绍。注意，getElementById() 方法中的 id 是不需要加上 “#” 的，如果你写成 getElementById("#div1") 就是错的。

此外，getElementById() 获取的是一个 DOM 对象，我们在给变量命名的时候，习惯性地以英文 “o” 开头，以便跟其他变量区分开来，让我们一眼就看出来这是一个 DOM 对象。

window.onload = function () {
    ……
}

上面表示在整个页面加载完成后执行的代码块。我们都知道，浏览器是从上到下解析一个页面的（如下图所示）。这个例子的 JavaScript 代码在 HTML 代码的上面，如果没有 window.onload，浏览器解析到 document.getElementById("title") 就会报错，因为它不知道 id 为 "title" 的元素究竟是哪位兄弟。

浏览器解析方向

因此我们必须使用 window.onload，使得浏览器把整个页面解析完了再去解析 window.onload 内部的代码，这样就不会报错了。对于 window.onload，我们在 “JavaScript 页面事件” 这一节会给大家详细介绍。

理解了 JavaScript 的执行顺序之后，实际上想要正常获取 DOM 元素，我们还可以把对应的 JavaScript 代码放到 </body> 结束标签前，请看下面例子。

示例 2：不使用 window.onload

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <h3 id="title">绿叶网</h3>
    <script>
        const oDiv = document.getElementById("title");
        oDiv.style.color = "red";
    </script>
</body>
</html>

页面效果如下图所示。

不使用 window.onload

分析：

对于这个例子来说，JavaScript 从上到下解析 HTML 时，当它执行到 “</body>” 前的 <script></script> 时，此时所有前面的 HTML 元素都已经解析完成。然后我们就可以直接操作 DOM，而不需要再使用 window.onload 了。

不过这种方式只能保证 DOM 结构已经加载完毕，但像图片、样式文件等外部资源可能还在加载中。在绝大多数情况下，这已经足够了。在后面的章节中，我们都是优先使用这种方式。

getElementsByTagName()

在 JavaScript 中，如果想要通过标签名来选中元素，我们可以使用 getElementsByTagName() 方法来实现。getElementsByTagName，也就是 “get elements by tag name（通过标签名来获取元素）” 的意思。

其中，getElementsByTagName() 类似于 “CSS 元素选择器”。

语法：

document.getElementsByTagName("标签名")

说明：

getElementsByTagName() 方法中 “elements” 是一个复数，写的时候别漏掉了 “s”。这是因为 getElementsByTagName() 获取的是多个元素（即集合），而 getElementById() 获取的仅仅是一个元素。

示例 3：getElementsByTagName() 基本用法

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <ul id="list">
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li>Vue</li>
        <li>React</li>
    </ul>
    <script>
        const oUl = document.getElementById("list");
        const oLi = oUl.getElementsByTagName("li");
        oLi[2].style.color = "red";
    </script>
</body>
</html>

页面效果如下图所示。

JavaScript getElementsByTagName() 示例

分析：

const oUl = document.getElementById("list");
const oLi = oUl.getElementsByTagName("li");

在上面代码中，首先使用 getElementById() 方法获取 id 为 “list” 的 ul 元素，然后使用 getElementsByTagName() 方法获取该 ul 元素下的所有 li 元素。有小伙伴会想，对于上面两句代码，我直接用下面一句代码岂不是就搞定了吗？

const oLi = document.getElementsByTagName("li");

实际上，这是不一样的。document.getElementsByTagName("li") 获取的是 “整个 HTML 页面” 所有的 li 元素，而 oUl.getElementsByTagName("li") 获取的仅仅是 “id 为 list 的 ul 元素” 下所有 li 元素。如果想要精确获取，聪明的你自然就不会使用 document.getElementsByTagName("li") 这种方式来实现了。

从上面也可以知道，getElementsByTagName() 方法获取的是一组元素。实际上这个方法获取的是一个数组，如果我们想得到某一个元素，可以使用数组下标的形式获取。其中，oLi[0] 表示获取第 1 个 li 元素，oLi[1] 表示获取第 2 个 li 元素……以此类推。

准确来说，getElementsByTagName() 方法获取的是一个 “类数组”（也叫伪数组），这不是真正意义上的数组。为什么这样说呢？因为我们只能使用到数组的 length 属性以及下标的形式，但是对于 push() 等方法是没办法在这里用的，小伙伴试一下就知道了。记住，类数组只能用到 2 点：（1）length 属性；（2）下标形式。

示例 4：getElementsByTagName() 获取的是 “类数组”

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <ul id="list">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <script>
        const arr = ["HTML", "CSS", "JavaScript", "Vue", "React"];
        const oUl = document.getElementById("list");
        const oLi = document.getElementsByTagName("li");

        for (let i = 0; i < oLi.length; i++) {
            oLi[i].innerHTML = arr[i];
            oLi[i].style.color = "red";
        }
    </script>
</body>
</html>

页面效果如下图所示。

JavaScript getElementsByTagName() 获取的是类数组

分析：

oLi.length 表示获取 “类数组” oLi 的长度，有多少个元素，长度就是多少。这个技巧经常会使用到，大家要记住了喔。

oLi[i].innerHTML = arr[i]; 表示设置 li 元素中的内容为对应下标的数组 arr 中的元素，对于 innerHTML，我们在后面 “JavaScript innerHTML 和 textContent” 这一节会详细介绍。

getElementsByClassName()

在 JavaScript 中，如果想通过 class 来选中元素，我们可以使用 getElementsByClassName() 方法来实现。getElementsByClassName，也就是 “get elements by class name（通过类名来获取元素）” 的意思。

其中，getElementsByClassName() 类似于 “CSS class 选择器” 。

语法：

document.getElementsByClassName("类名")

说明：

getElementsByClassName() 方法中 “elements” 是一个复数，写的时候别漏掉了 “s”。跟 getElementsByTagName 相似，getElementsByClassName() 获取的也是一个类数组。

示例 5：getElementsByClassName() 基本用法

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <ul id="list">
        <li>HTML</li>
        <li>CSS</li>
        <li class="select">JavaScript</li>
        <li class="select">Vue</li>
        <li class="select">React</li>
    </ul>
    <script>
        const oLi = document.getElementsByClassName("select");
        oLi[0].style.color = "red";
    </script>
</body>
</html>

页面效果如下图所示。

JavaScript getElementsByClassName() 示例

分析：

getElementsByClassName() 获取的也是一个 “类数组”。如果我们想得到某一个元素，也是使用数组下标的形式获取的，这一点跟 getElementsByTagName() 很相似。

querySelector() 和 querySelectorAll()

在 JavaScript，我们可以使用 querySelector() 和 querySelectorAll() 两个方法，通过 “CSS 选择器” 的语法来获取所需要的元素。

语法：

document.querySelector("选择器");
document.querySelectorAll("选择器");

说明：

querySelector() 表示选取满足选择条件的第 1 个元素，querySelectorAll() 表示选取满足条件的所有元素。这两个方法都是非常简单的，它们的写法跟 CSS 选择器的写法是完全一样的。

document.querySelector("#main")
document.querySelector("#list li:nth-child(1)")
document.querySelectorAll("#list li")
document.querySelectorAll("input:checkbox")

对于 id 选择器来说，由于页面只有一个元素，建议大家用 getElementById()，而不是用 querySelector() 或 querySelectorAll() 这两个。因为 getElementById() 方法效率更高，性能也更快。

JavaScript querySelector() 语法

示例 6：querySelectorAll() 基本用法

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <div>绿叶网</div>
    <div class="selected">绿叶网</div>
    <div class="selected">绿叶网</div>
    <div>绿叶网</div>
    <div class="selected">绿叶网</div>
    <script>
        const oDiv = document.querySelectorAll(".selected");
        oDiv[1].style.color = "red";
    </script>
</body>
</html>

页面效果如下图所示。

JavaScript querySelectorAll() 示例

分析：

document.querySelectorAll(".test") 表示获取所有 class 为 “test” 的元素。由于获取的是多个元素，因此这也是一个类数组。想要精确得到某一个元素，也需要使用数组下标的形式来获取。

示例 7：querySelector() 基本用法

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <ul id="list">
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li>Vue</li>
        <li>React</li>
    </ul>
    <script>
        const oLi = document.querySelector("#list li:nth-child(3)");
        oLi.style.color = "red";
    </script>
</body>
</html>

页面效果如下图所示。

JavaScript querySelector() 示例

分析：

document.querySelector("#list li:nth-child(3)") 表示选取 id 为 list 的元素下的第 3 个元素，nth-child(n) 属于 CSS3 的选择器。

事实上，我们也可以使用 document.querySelectorAll("#list li:nth-child(3)")[0] 来实现，两者效果是一样的。特别注意一点，querySelectorAll() 方法得到的是一个类数组，即使你获取的只有一个元素，也必须使用下标 [0] 才可以正确获取。

getElementsByName()

对于表单元素来说，它有一个一般元素都没有的 name 属性。如果想要通过 name 属性来获取表单元素，我们可以使用 getElementsByName() 方法来实现。

语法：

document.getElementsByName("name名")

说明：

getElementsByName() 获取的也是一个类数组，如果想要准确得到某一个元素，可以使用数组下标形式来获取。

getElementsByName() 只用于表单元素，一般只用于单选按钮和复选框。

示例 8：getElementsByName() 获取单选按钮

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    你的最高学历:
    <label><input type="radio" name="status" value="本科">本科</label>
    <label><input type="radio" name="status" value="硕士">硕士</label>
    <label><input type="radio" name="status" value="博士">博士</label>
    <script>
        const oInput = document.getElementsByName("status");
        oInput[2].checked = true;
    </script>
</body>
</html>

页面效果如下图所示。

JavaScript getElementsByName() 用于获取单选按钮

分析：

oInput[2].checked = true; 表示将类数组中的第 3 个元素的 checked 属性设置为 true，也就是将第 3 个单选按钮选中。

示例 9：getElementsByName() 获取复选框

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    你喜欢的水果:
    <label><input type="checkbox" name="fruit" value="苹果">苹果</label>
    <label><input type="checkbox" name="fruit" value="香蕉">香蕉</label>
    <label><input type="checkbox" name="fruit" value="西瓜">西瓜</label>
    <script>
        const oInput = document.getElementsByName("fruit");
        for (let i = 0; i < oInput.length; i++) {
            oInput[i].checked = true;
        }
    </script>
</body>
</html>

页面效果如下图所示。

JavaScript getElementsByName() 用于获取复选框

分析：

这里使用 for 循环来将每一个复选框的 checked 属性都设置为 true（被选中）。

document.title 和 document.body

由于一个页面只有一个 title 元素和一个 body 元素，因此对于这两个元素的选取，JavaScript 专门为我们提供了两个非常方便的方法：document.title 和 document.body。

示例 10：document.title 和 document.body 基本用法

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <script>
        document.title = "梦想是什么？";
        document.body.innerHTML = "<strong style='color:red'>梦想就是一种让你感到坚持就是幸福的东西。</strong>";
    </script>
</body>
</html>

页面效果如下图所示。

document.title和document.body