JavaScript 如何获取父元素的子元素 |
您所在的位置：网站首页 › 获取第一个子元素的方法有哪些步骤 › JavaScript 如何获取父元素的子元素 |
JavaScript 如何获取父元素的子元素
|
JavaScript 如何获取父元素的子元素
在本文中，我们将学习如何使用JavaScript获取父元素的子元素。给定一个HTML文档，我们要选择一个特定的元素，并使用JavaScript获取父元素的所有子元素。有两种方法可以实现这个目标： 使用children属性 使用querySelector方法我们将讨论这两种方法并通过示例来理解它们的实现。 DOM children属性用于返回指定元素的所有子元素的HTML集合。 方法1 选择一个要获取子元素的元素。 使用children属性来访问该元素的所有子元素。 根据索引选择特定的子元素。示例： 这个示例使用children属性来获取指定元素的所有子元素的HTML集合。 Finding child element of parent with pure JavaScript .parent { background: green; color: white; } .child { background: blue; color: white; margin: 10px; } GeeksforGeeks Click on the button select the child node Parent Child click here let res = document.getElementById('result'); function GFG_Fun() { parent = document.getElementById('parent'); children = parent.children[0]; res.innerHTML = "Text of child node is - '" + children.innerHTML + "'"; }输出：
querySelector() 方法在HTML中用于返回匹配文档中指定CSS选择器的第一个元素。 方法2 选择要选择其子元素的父元素。 在父元素上使用 querySelector() 方法。 使用子元素的类名来选择特定的子元素。示例： 这个示例使用 querySelector() 方法来获取文档中匹配指定CSS选择器的第一个元素。 How to get the child element of a parent using JavaScript ? .parent { background: green; color: white; } .child1 { background: blue; color: white; margin: 10px; } .child2 { background: red; color: white; margin: 10px; } GeeksforGeeks Click on the button select the child node Parent Child1 Child2 click here let res = document.getElementById('result'); function GFG_Fun() { let parent = document.getElementById('parent'); let children = parent.querySelectorAll('.child'); res.innerHTML = "Text of child node is - '" + children[0].innerHTML + "' and '" + children[1].innerHTML + "'"; }输出：
|
【本文地址】
今日新闻 |
推荐新闻 |