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.
}