在 JavaScript 中按類獲取子元素

Mehvish Ashiq 2023年1月30日 2022年5月10日
  1. 在 JavaScript 中通過 class 獲取子元素
  2. 在 JavaScript 中使用 querySelector() 通過 class 名稱獲取子元素
  3. 在 JavaScript 中使用 querySelectorAll() 方法獲取具有相同 class 的所有子節點
  4. 在 JavaScript 中將 document.getElementById() 與子節點的屬性一起使用
  5. 在 JavaScript 中使用 getElementsByClassName() 方法通過 class 名稱獲取一個或多個子元素
  6. 在 JavaScript 中使用 :scope 來獲取直接的子元素
在 JavaScript 中按類獲取子元素

本教程展示瞭如何使用 JavaScript 通過 class 獲取子元素。它還強調了如何使用它們的 class 名稱訪問一個子元素(第一個或最後一個子元素)或多個子元素。

讓我們開始按順序學習它們。

在 JavaScript 中通過 class 獲取子元素

我們可以通過以下方式在 JavaScript 中通過 class 名稱獲取一個或多個子元素。

  1. 使用 querySelector() 方法。
  2. 使用 querySelectorAll() 獲取所有具有相同 class 的子節點。
  3. document.getElementById() 與子節點的屬性一起使用。
  4. 使用 getElementsByClassName() 方法。
  5. 使用 :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 + "\"");

輸出:

使用 javascript 按類獲取子元素-輸出一

我們首先使用 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);

輸出:

使用 javascript 按類獲取子元素-輸出二

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 + "\"");

輸出:

使用 javascript 按類獲取子元素 - 輸出三

這裡,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 按類獲取子元素 - 輸出四

在 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);

輸出:

使用 javascript 按類獲取子元素 - 輸出五

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);

輸出:

使用 javascript 按類獲取子元素 - 輸出六

我們正在使用一個名為 :scope 的偽類,它對於獲取直接子代非常有用,這意味著我們已經訪問過的元素的直接後代。

Mehvish Ashiq avatar Mehvish Ashiq avatar

Mehvish Ashiq is a former Java Programmer and a Data Science enthusiast who leverages her expertise to help others to learn and grow by creating interesting, useful, and reader-friendly content in Computer Programming, Data Science, and Technology.

LinkedIn GitHub Facebook

相關文章 - JavaScript Element