JavaScript DOM 选择器
在本教程中，您将学习如何在 JavaScript 中选择 DOM 元素。
在 JavaScript 中选择 DOM 元素
JavaScript 最常用于获取或修改页面上 HTML 元素的内容或值，以及应用一些效果，如显示、隐藏、动画等。但是，在您执行任何操作之前，您需要 查找或选择目标 HTML 元素。
在以下部分中，您将看到一些在页面上选择元素并使用 JavaScript 对它们进行操作的常用方法。
选择最顶层的元素
HTML 文档中最顶层的元素可直接作为 document 属性使用。 例如，<html> 元素可以使用 document.documentElement 属性访问，而 <head> 元素可以使用 document.head 属性访问，<body> 元素可以使用 document.body 属性访问。 这是一个例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JS Select Topmost Elements</title>
</head>
<body>
<script>
// 显示html元素的lang属性值
alert(document.documentElement.getAttribute("lang")); // 输出： en
// 设置body元素的背景颜色
document.body.style.background = "yellow";
// 显示头元素的第一个子元素的标签名称
alert(document.head.firstElementChild.nodeName); // 输出： meta
</script>
</body>
</html>但小心点。 如果 document.body 在 <body> 标签之前使用（例如在 <head> 内部），它将返回 null 而不是 body 元素。 因为脚本执行的那一点，<body>标签没有被浏览器解析，所以此时document.body确实是null。
让我们看一下以下示例以更好地理解这一点：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JS Document.body Demo</title>
<script>
alert("From HEAD: " + document.body); // 输出： null (since <body> is not parsed yet)
</script>
</head>
<body>
<script>
alert("From BODY: " + document.body); // 输出： HTMLBodyElement
</script>
</body>
</html>按 ID 选择元素
您可以使用 getElementById() 方法根据其唯一 ID 选择元素。 这是在 DOM 树中查找 HTML 元素的最简单方法。
以下示例选择并突出显示具有 ID 属性 id="mark" 的元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JS Select Element by ID</title>
</head>
<body>
<p id="mark">This is a paragraph of text.</p>
<p>This is another paragraph of text.</p>
<script>
// 选择带有 id 标记的元素
var match = document.getElementById("mark");
// 突出显示元素的背景
match.style.background = "yellow";
</script>
</body>
</html>如果找到匹配的元素，getElementById() 方法会将元素作为对象返回，如果在文档中没有找到匹配的元素，则返回 null。
注意： 任何 HTML 元素都可以有一个 id 属性。 此属性的值在页面内必须是唯一的，即同一页面中的两个元素不能具有相同的 ID。
按类名选择元素
同样，您可以使用 getElementsByClassName() 方法来选择所有具有特定类名的元素。 此方法返回具有所有给定类名的所有子元素的类数组对象。 让我们看看下面的例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JS Select Elements by Class Name</title>
</head>
<body>
<p class="test">This is a paragraph of text.</p>
<div class="block test">This is another paragraph of text.</div>
<p>This is one more paragraph of text.</p>
<script>
// 使用类测试选择元素
var matches = document.getElementsByClassName("test");
// 显示选定元素计数
document.write("Number of selected elements: " + matches.length);
// 将粗体样式应用于选择中的第一个元素
matches[0].style.fontWeight = "bold";
// 将斜体样式应用于选择中的最后一个元素
matches[matches.length - 1].style.fontStyle = "italic";
// 通过循环突出显示每个元素的背景
for(var elem in matches) {
matches[elem].style.background = "yellow";
}
</script>
</body>
</html>按标签名称选择元素
您还可以使用 getElementsByTagName() 方法按标签名称选择 HTML 元素。 此方法还返回具有给定标记名称的所有子元素的类数组对象。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JS Select Elements by Tag Name</title>
</head>
<body>
<p>This is a paragraph of text.</p>
<div class="test">This is another paragraph of text.</div>
<p>This is one more paragraph of text.</p>
<script>
// 选择所有段落元素
var matches = document.getElementsByTagName("p");
// 打印所选段落的数量
document.write("Number of selected elements: " + matches.length);
// 通过循环突出显示每个段落的背景
for(var elem in matches) {
matches[elem].style.background = "yellow";
}
</script>
</body>
</html>使用 CSS 选择器选择元素
您可以使用 querySelectorAll() 方法选择与指定 CSS 选择器 匹配的元素。 CSS 选择器提供了一种非常强大且高效的方式来选择文档中的 HTML 元素。 请查看 CSS 教程部分以了解有关它们的更多信息。
此方法返回与指定选择器匹配的所有元素的列表。 您可以像检查任何数组一样检查它，如下例所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JS Select Elements with CSS Selectors</title>
</head>
<body>
<ul>
<li>Bread</li>
<li class="tick">Coffee</li>
<li>Pineapple Cake</li>
</ul>
<script>
// 选择所有 li 元素
var matches = document.querySelectorAll("ul li");
// 打印所选 li 元素的数量
document.write("Number of selected elements: " + matches.length + "<hr>")
// 打印所选 li 元素的内容
for(var elem of matches) {
document.write(elem.innerHTML + "<br>");
}
// 将线条通过样式应用于具有类刻度的第一个 li 元素
matches = document.querySelectorAll("ul li.tick");
matches[0].style.textDecoration = "line-through";
</script>
</body>
</html>