在 JavaScript 中按類獲取子元素
Mehvish Ashiq
2023年1月30日
2022年5月10日
-
在 JavaScript 中通過
class獲取子元素 -
在 JavaScript 中使用
querySelector()通過class名稱獲取子元素 -
在 JavaScript 中使用
querySelectorAll()方法獲取具有相同class的所有子節點 -
在 JavaScript 中將
document.getElementById()與子節點的屬性一起使用 -
在 JavaScript 中使用
getElementsByClassName()方法通過class名稱獲取一個或多個子元素 -
在 JavaScript 中使用
:scope來獲取直接的子元素
本教程展示瞭如何使用 JavaScript 通過 class 獲取子元素。它還強調了如何使用它們的 class 名稱訪問一個子元素（第一個或最後一個子元素）或多個子元素。
讓我們開始按順序學習它們。
在 JavaScript 中通過 class 獲取子元素
我們可以通過以下方式在 JavaScript 中通過 class 名稱獲取一個或多個子元素。
- 使用
querySelector()方法。 - 使用
querySelectorAll()獲取所有具有相同class的子節點。 - 將
document.getElementById()與子節點的屬性一起使用。 - 使用
getElementsByClassName()方法。 - 使用
:scope獲得直接子代。
在 JavaScript 中使用 querySelector() 通過 class 名稱獲取子元素
HTML 程式碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Get Child Elements</title>
</head>
<body>
<ul id="parent-element">
<li class="child-element-one">One</li>
<li class="child-element-two">Two</li>
<li class="child-element-three">Three</li>
<li class="child-element-four">Four</li>
</ul>
</body>
</html>
JavaScript 程式碼：
var parent = document.querySelector('#parent-element');
var firstChild = parent.querySelector('.child-element-one');
var lastChild = parent.querySelector('.child-element-four');
document.writeln("The innerHTML of First Child Element is \""+
firstChild.innerHTML + "\"" +
" and The innerHTML of Last Child Element is \""+
lastChild.innerHTML + "\"");
輸出：
我們首先使用 querySelector() 方法來獲取父元素。然後，在選中的父元素上再次呼叫該方法，獲取匹配指定選擇器的第一個和最後一個子節點。
你可能已經觀察到 querySelector() 的範圍僅限於此處的特定元素（具有 id parent-element）。這就是為什麼它只選擇它被呼叫的元素的子元素。
我們也可以使用 document.getElementById() 來選擇父元素。請參閱以下示例，其中我們選擇了所有子元素。
在 JavaScript 中使用 querySelectorAll() 方法獲取具有相同 class 的所有子節點
HTML 程式碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Get Child Elements</title>
</head>
<body>
<ul id="parent-element">
<li class="child-element">One</li>
<li class="child-element">Two</li>
<li class="child-element">Three</li>
<li class="child-element">Four</li>
</ul>
</body>
</html>
JavaScript 程式碼：
var parent = document.getElementById('parent-element');
var allChildElements = parent.querySelectorAll('.child-element');
for(i=0; i < allChildElements.length ; i++)
document.writeln(allChildElements[i].innerHTML);
輸出：
querySelectorAll() 方法選擇具有相同 class 名稱的所有子節點。它返回節點列表並在任何無效選擇器的情況下顯示 SYNTAX_ERR。
在 JavaScript 中將 document.getElementById() 與子節點的屬性一起使用
HTML 程式碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Get Child Elements</title>
</head>
<body>
<ul id="parent-element">
<li class="child-element-one">One</li>
<li class="child-element-two">Two</li>
<li class="child-element-three">Three</li>
<li class="child-element-four">Four</li>
</ul>
</body>
</html>
JavaScript 程式碼：
var parent = document.getElementById('parent-element');
var firstChild = parent.firstElementChild;
var lastChild = parent.lastElementChild;
document.writeln("The innerHTML of First Child Element is \""+
firstChild.innerHTML + "\"" +
" and The innerHTML of Last Child Element is \""+
lastChild.innerHTML + "\"");
輸出：
這裡，firstElementChild 返回第一個子元素節點，lastElementChild 返回最後一個子元素節點。我們還可以如下獲取所有子 Element 節點。
JavaScript 程式碼：
var parent = document.getElementById('parent-element');
var allChild = parent.children;
for(i=0; i < allChild.length ; i++)
document.writeln(allChild[i].innerHTML);
輸出：
在 JavaScript 中使用 getElementsByClassName() 方法通過 class 名稱獲取一個或多個子元素
HTML 程式碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Get Child Elements</title>
</head>
<body>
<ul id="parent-element">
<li class="child-element">One</li>
<li class="child-element">Two</li>
<li class="child-element">Three</li>
<li class="child-element">Four</li>
</ul>
</body>
</html>
JavaScript 程式碼：
var childs = (document.getElementById('parent-element')).
getElementsByClassName('child-element');
for(i=0; i < childs.length ; i++)
document.writeln(childs[i].innerHTML);
輸出：
getElementsByClassName() 是一個只讀屬性，有助於獲取具有相同 class 名稱的所有子節點。
在 JavaScript 中使用 :scope 來獲取直接的子元素
HTML 程式碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Get Child Elements</title>
</head>
<body>
<ul id="parent-element">
<li class="child-element-one">One</li>
<li class="child-element-two">Two</li>
<li class="child-element-three">Three</li>
<li class="child-element-four">Four</li>
</ul>
</body>
</html>
JavaScript 程式碼：
var parent = document.getElementById('parent-element');
var childs = parent.querySelectorAll(':scope > li');
for(i=0; i < childs.length ; i++)
document.writeln(childs[i].innerHTML);
輸出：
我們正在使用一個名為 :scope 的偽類，它對於獲取直接子代非常有用，這意味著我們已經訪問過的元素的直接後代。
Author: Mehvish Ashiq
