2.1 獲取元素的方法
導航 DOM（Document Object Model）是處理 web 文件時的重要任務。JavaScript 提供許多方法來搜尋和訪問文檔中的元素。這些方法讓開發人員輕鬆找到所需的元素並操作它們。
1. 方法 getElementById()
方法 getElementById() 返回擁有指定 id 屬性的元素。這是最簡單且經常使用的方法之一。
示例：
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<div id="content">This is the content</div>
<script>
const contentDiv = document.getElementById('content');
console.log(contentDiv.textContent); // 顯示: This is the content
</script>
</body>
</html>
2. 方法 getElementsByClassName()
方法 getElementsByClassName() 返回擁有指定 class 的所有元素的集合。集合是 "活的"，這意味著當 DOM 改變時，它會自動更新。
示例：
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<p class="text">Paragraph 1</p>
<p class="text">Paragraph 2</p>
<p class="text">Paragraph 3</p>
<script>
const paragraphs = document.getElementsByClassName('text');
console.log(paragraphs.length); // 顯示: 3
</script>
</body>
</html>
3. 方法 getElementsByTagName()
方法 getElementsByTagName() 返回擁有指定標籤的所有元素的集合。這個集合也是 "活的"。
示例：
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<script>
const paragraphs = document.getElementsByTagName('p');
console.log(paragraphs.length); // 顯示: 3
</script>
</body>
</html>
4. 方法 querySelector()
方法 querySelector() 返回匹配指定 CSS 選擇器的第一個元素。這是一個非常強大和靈活的搜尋元素的方法。
示例：
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<div class="container">
<p>Paragraph 1</p>
<p class="highlight">Paragraph 2</p>
<p>Paragraph 3</p>
</div>
<script>
const highlightedParagraph = document.querySelector('.highlight');
console.log(highlightedParagraph.textContent); // 顯示: Paragraph 2
</script>
</body>
</html>
5. 方法 querySelectorAll()
方法 querySelectorAll() 返回靜態（不變的）集合，所有匹配指定 CSS 選擇器的元素。
示例：
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<div class="container">
<p>Paragraph 1</p>
<p class="highlight">Paragraph 2</p>
<p>Paragraph 3</p>
</div>
<script>
const paragraphs = document.querySelectorAll('.container p');
console.log(paragraphs.length); // 顯示: 3
</script>
</body>
</html>
2.2 節點導航
DOM 也提供方法用於相對於當前元素導航節點。
1. 屬性 parentNode
屬性 parentNode 返回當前節點的父節點。
示例：
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<div id="container">
<p>Paragraph</p>
</div>
<script>
const paragraph = document.querySelector('p');
const parent = paragraph.parentNode;
console.log(parent.id); // 顯示: container
</script>
</body>
</html>
2. 屬性 childNodes
屬性 childNodes 返回當前節點的所有子節點的集合，包括文本節點。
示例：
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<ul id="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<script>
const list = document.getElementById('list');
const children = list.childNodes;
console.log(children.length); // 顯示所有子節點的數量，包括文本
</script>
</body>
</html>
你可能還在想，為什麼結果是 7？
如上所述，屬性 childNodes 返回當前節點的所有子節點的集合，包括文本節點（空格、符號、新行等）。HTML 標記中包含元素 <li> 之間的空格和新行，這些也被算作單獨的節點。
在上面的例子中，標籤 <ul> 和第一個 <li> 之間有一個新行（和可能的空格）——這被算作文本節點。在所有 <li> 之間和最後一個 <li> 之後的情況相同。因此，不是三個列表項，childNodes 包括這些文本節點，導致總數為 7。
要僅獲取元素（忽略文本節點），可以使用屬性 children，它僅返回子元素：
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<ul id="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<script>
const list = document.getElementById('list');
const children = list.children;
console.log(children.length); // 3
</script>
</body>
</html>
3. 屬性 firstChild 和 lastChild
屬性 firstChild 和 lastChild 返回第一和最後的子節點。
示例：
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<ul id="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<script>
const list = document.getElementById('list');
const first = list.firstChild;
const last = list.lastChild;
console.log(first.textContent);
console.log(last.textContent);
</script>
</body>
</html>
你可能會驚訝，控制台什麼都沒顯示。不過事實並非如此。顯示了最後的子節點 Item 1 和 Item 3（新行）。如果你卡在這個點上，應該再回去看看 p.2 屬性 childNodes
4. 屬性 nextSibling 和 previousSibling
屬性 nextSibling 和 previousSibling 返回同一層級的下一個和上一個節點。
示例：
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<ul id="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<script>
const secondItem = document.querySelector('li:nth-child(2)');
const next = secondItem.nextSibling;
const prev = secondItem.previousSibling;
console.log(next.textContent); // 顯示: Item 3
console.log(prev.textContent); // 顯示: Item 1（如果忽略文本節點）
</script>
</body>
</html>
2.3 導航元素節點
5. 屬性 nextElementSibling 和 previousElementSibling
這些屬性返回下一個和上一個元素節點（跳過文本和註釋）。
示例：
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<ul id="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<script>
const secondItem = document.querySelector('li:nth-child(2)');
const next = secondItem.nextElementSibling;
const prev = secondItem.previousElementSibling;
console.log(next.textContent); // 顯示: Item 3
console.log(prev.textContent); // 顯示: Item 1
</script>
</body>
</html>
6. 屬性 firstElementChild 和 lastElementChild
這些屬性返回第一和最後的子元素節點（跳過文本和註釋）。
示例：
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<ul id="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<script>
const list = document.getElementById('list');
const first = list.firstElementChild;
const last = list.lastElementChild;
console.log(first.textContent); // 顯示: Item 1
console.log(last.textContent); // 顯示: Item 3
</script>
</body>
</html>
GO TO FULL VERSION