JavaScript 中 body 元素子元素的标签名称?
元素的属性"children"将该元素的所有子元素作为对象提供。在本教程中，我们将学习如何使用 Javascript 获取父元素的子元素。挑战是使用 JavaScript 在 HTML 文档中选择某个元素并检索父元素的所有子元素。有两种方法可以获取子元素 -
- 使用 children 属性
- 使用 querySelector 方法
通过示例，我们将讨论这两种策略并了解它们的应用方式。
通过 DOM children 属性返回所提供元素的每个子元素的 HTML 集合。
方法 1
- 选择将选择其子元素的元素。
- 要访问元素的每个子元素，请使用 .children 属性。
- 根据索引，选择特定的子元素。
children 属性
当请求特定元素的子元素时，DOM children 属性将返回所有元素的 HTML 集合。索引号允许访问集合的元素。ChildNodes 包含所有节点，包括文本和注释节点，而 Children 仅包含元素节点。这是 ChildNodes 与 Children 不同的地方。此属性只能读取。
语法
element.children
返回值
它返回一组可以通过索引找到的元素节点。
示例 1
为了检索给定元素的每个子元素的 HTML 集合，此示例实现了 .children 属性。
<!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
HTML 中的 querySelector() 方法返回文档中与给定 CSS 选择器匹配的第一个元素。
- 要选择子元素，必须先选择元素的父元素。
- 使用父元素的 .querySelector() 方法。
- 使用该子元素的 className 选择特定子元素。
querySelector 方法
与给定选择器匹配的第一个元素是 querySelector() 函数传递的唯一元素。使用 querySelectorAll() 函数检索每个匹配项。
必需字段是 selectors。它指定与元素匹配的 CSS 选择器。根据它们的 ID、类、种类等，这些选择器用于选择 HTML 元素。如果有多个选择器，则使用逗号将它们分隔开。
返回的元素是文档中首先出现的元素。如果选择器与内容中出现多次的 ID 匹配(每个页面上的 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>
