JavaScript/查找元素
要操作 DOM 树中的节点，您需要直接定位它们或从起点开始遍历到它们。DOM 的 Document 接口充当网页内容的入口点。它提供了一组丰富的属性和方法来访问特定节点。这些方法返回单个节点或节点数组。
| 我们使用以下 HTML 页面来演示最重要的方法。 |
<!DOCTYPE html>
<html>
<head>
<script>
function show() {
"use strict";
// ...
}
</script>
<style>
.head_2 {
display: flex;
justify-content: center;
}
.text {
padding-left: 1em;
font-size: 1.4em;
}
.button {
height:1.4em;
width: 4em;
margin-top: 1em;
font-size: 1.2em;
background-color: Aqua;
}
</style>
</head>
<body>
<h1>An HTML header</h1>
<h2 class="head_2">An HTML sub-header</h2>
<div id="div_1">
<p id="p1" class="text">Paragraph 1</p>
<p id="p2" class="text">Paragraph 2</p>
<p id="p3" class="text">Paragraph 3</p>
</div>
<div id="div_2">
<h2>Another HTML sub-header</h2>
<div id="div_3">
<p>Another paragraph 1</p>
<p>Another paragraph 2</p>
<p>Another paragraph 3</p>
</div>
</div>
<button class="button" onclick="show()">Go</button>
</body>
</html>
|
单击 button 会调用 show 函数。示例应包含在其中。
一个易于使用、快速且准确的定位单个元素的方法是使用 HTML 中的 id 属性标记元素，例如 <p id="p2">，并将此 id 作为参数传递给 getElementById()。以下代码片段将定位元素并显示其内容。
function show() {
"use strict";
const elem = document.getElementById("p2");
alert(elem.innerHTML);
}
getElementById 方法返回单个元素（如果 id 不唯一，则返回第一个具有此 id 的元素）。
即使元素不是文本节点而是具有子节点的节点，情况也是如此。返回值是包含所有子元素的单个元素。
function show() {
"use strict";
const elem = document.getElementById("div_3");
alert(elem.innerHTML);
}
// expected output:
// <p>Another paragraph 1</p>
// <p>Another paragraph 2</p>
// <p>Another paragraph 3</p>
在 HTML 页面上查找元素的另一种方法是使用 getElementsByTagName 方法。它接受一个标签名，例如 'h1'、'div' 或 'p'，并返回所有此类元素的数组。
在这里，我们使用此方法来检索所有 'div' 元素的数组。
function show() {
"use strict";
// if you want to search in the complete document, you must specify 'document'
let elemArray = document.getElementsByTagName("div");
// loop over all array elements
for (let i = 0; i < elemArray.length; i++) {
alert(elemArray[i].innerHTML);
}
alert("Part 2");
// if you want to search only a sub-tree, you must previously locate
// the root of this sub-tree
const elem = document.getElementById("div_2");
elemArray = elem.getElementsByTagName("div");
for (let i = 0; i < elemArray.length; i++) {
alert(elemArray[i].innerHTML);
}
}
接下来，可以通过关联的 CSS 类选择器 来定位元素。类选择器可以具有复杂的语法。在这里，我们只使用类名的简单形式。
此示例检索使用 CSS 类 text 的所有元素 - 这是第一个 div 中的 3 个段落所做的事情。请注意，其他段落没有被检索到。
function show() {
"use strict";
let elemArray = document.getElementsByClassName("text");
// loop over all array elements
for (let i = 0; i < elemArray.length; i++) {
alert(elemArray[i].innerHTML);
}
}
显示的定位方法使用专门的语义来定位元素。但还有一种通用方法，它将所有这些方法结合起来，甚至更多。
查询选择器 使用复杂的语法，包括 HTML 元素 ID、HTML 元素名称、HTML 属性、CSS 类、位置等等。它们定位单个元素或元素列表。要检索满足选择器的第一个元素，请使用 querySelector 方法。如果您想检索所有匹配元素，请使用 querySelectorAll。
function show() {
"use strict";
// '#' locates via ID, '.' locates via CSS class
let elemArray = document.querySelectorAll("h1, #p2, .head_2");
// loop over all array elements
for (let i = 0; i < elemArray.length; i++) {
alert(elemArray[i].innerHTML);
}
}
您可以在 DOM 树中从根节点到叶子节点的方向上进行遍历。这是通过定位一个元素并使用此节点作为后续遍历步骤的新根节点来完成的。
function show() {
"use strict";
// start at 'div_2'
const elem_1 = document.getElementById("div_2");
// use this element as the new root for further selections
const elemArray = elem_1.getElementsByTagName("h2");
for (let i = 0; i < elemArray.length; i++) {
alert(elemArray[i].innerHTML);
}
// only the child-'h2' is selected! The first 'h2' is ignored.
}