JavaScript 获取 HTML 中特定父元素下的子元素
在JavaScript中，你可以使用parentElement.querySelector和parentElement.querySelectorAll方法来获取特定父元素下的子元素。
querySelector方法返回父元素下匹配指定CSS选择器的第一个子元素。querySelectorAll方法返回父元素下匹配指定CSS选择器的所有子元素，结果是NodeList对象。
以下是使用这些方法的示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Query Child Elements Example</title>
</head>
<body>
<div id="parent">
<p>First Child</p>
<p class="special">Second Child</p>
<p>Third Child</p>
</div>
<script>
// 获取id为'parent'的父元素
var parent = document.getElementById('parent');
// 获取父元素下的第一个<p>元素
var firstChild = parent.querySelector('p');
console.log(firstChild.textContent); // 输出: First Child
// 获取父元素下的class为'special'的<p>元素
var specialChild = parent.querySelector('p.special');
console.log(specialChild.textContent); // 输出: Second Child
// 获取父元素下所有的<p>元素
var allChildren = parent.querySelectorAll('p');
allChildren.forEach(function(child) {
console.log(child.textContent);
});
// 输出:
// First Child
// Second Child
// Third Child
</script>
</body>
</html>在这个例子中，我们首先通过getElementById获取父元素，然后使用querySelector和querySelectorAll分别获取单个和多个子元素。
评论已关闭