資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究在 JavaScript 中獲取 body 元素子元素的標籤名稱？
元素的一個名為“children”的屬性會將元素的所有子元素作為物件返回。在本教程中，我們將學習如何使用 Javascript 獲取父元素的子元素。挑戰在於使用 JavaScript 選擇 HTML 文件中的某個特定元素，並檢索該父元素的所有子元素。有兩種方法可以實現此目的以獲取子元素 -
- 使用 children 屬性
- 使用 querySelector 方法
我們將透過示例來討論這兩種方法，並瞭解它們的應用方式。
DOM children 屬性透過返回給定元素的所有子元素的 HTMLCollection 來實現。
方法 1
- 選擇要選擇其子元素的元素。
- 使用 .children 屬性訪問元素的每個子元素。
- 根據索引選擇特定的子元素。
children 屬性
當請求特定元素的子元素時，DOM children 屬性會返回所有這些元素的 HTMLCollection。可以透過索引號訪問集合中的元素。ChildNodes 包含所有節點，包括文字和註釋節點，而 Children 僅包含元素節點。這是 ChildNodes 與 Children 不同的地方。此屬性為只讀屬性。
語法
element.children
返回值
它返回一組可以透過索引找到的元素節點。
示例 1
此示例實現了 .children 屬性，以檢索給定元素的所有子元素的 HTMLCollection。
<!DOCTYPE html> <html> <title>Tag names of body element's children in JavaScript - TutorialsPoint</title> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body style="text-align:center"> <p>The count of div id "divCount" is</p> <div id="result"></div> <div id="divCount"> <p>This is first div element</p> <p>This is second div element</p> <p>This is third div element</p> </div> <script> let count = document.getElementById("divCount").children.length; document.getElementById("result").innerHTML = count; </script> </body> </html>
方法 2
querySelector() 方法在 HTML 中返回文件中第一個與給定 CSS 選擇器或選擇器匹配的元素。
- 為了選擇子元素，您必須首先選擇元素的父元素。
- 使用父元素的 .querySelector() 方法。
- 使用該子元素的 className 選擇特定的子元素。
querySelector 方法
querySelector() 方法僅返回與給定選擇器匹配的第一個元素。要檢索所有匹配項，請使用 querySelectorAll() 方法。
必需的欄位是選擇器。它指定一個 CSS 選擇器或選擇器來匹配元素。這些選擇器用於根據其 ID、類、型別等選擇 HTML 元素。如果有多個選擇器，則將使用逗號分隔它們。
返回的元素是文件中首先出現的元素。如果選擇器匹配內容中多次出現的 id（每個頁面上都應該唯一），則返回第一個匹配的元素。
語法
element.querySelector(selectors);
返回值
當文件中存在指定的 CSS 選擇器或選擇器時，此方法用於返回第一個與之匹配的元素。
示例 1
在這個例子中，讓我們瞭解一下“div”元素如何更改第一個“p”元素的文字以理解 -
<!DOCTYPE html> <html> <title>Tag names of body element's children in JavaScript - TutorialsPoint</title> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body style="text-align:center"> <div id="divCount"> <p>This is your "p" element in div.</p> <h4>This is your "h4" element in div.</h4> </div> <p>To modify the text of the first p element in div, click the button.</p> <button onclick="myFun()">Click Here</button> <script> function myFun() { let a = document.getElementById("divCount"); a.querySelector("p").innerHTML = "Welcome to Tutorialspoint!"; } </script> </body> </html>
316 次檢視
