使用 JS 检查具有特定 ID 的元素是否具有子节点
使用 querySelector()
方法检查一个元素是否有一个具有特定 id 的子元素,例如 if (box.querySelector('#child-3') !== null) {}
。 querySelector
方法返回与提供的选择器匹配的第一个元素或没有元素匹配的 null。
以下是本文示例的 HTML。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
</head>
<body>
<div id="box">
<p>Child 1</p>
<p>Child 2</p>
<p id="child-3">Child 3</p>
</div>
<script src="index.js"></script>
</body>
</html>
这是相关的 JavaScript 代码。
const box = document.getElementById('box');
if (box.querySelector('#child-3') !== null) {
console.log('✅ element has child with id of child-3');
} else {
console.log('⛔️ element does NOT have child with id');
}
我们使用 getElementById
方法来选择父元素。
querySelector
方法可以限定为特定元素,并返回第一个元素,该元素是调用该方法的元素的后代,并且与提供的选择器匹配。
如果没有元素与提供的选择器匹配,则
querySelector
方法返回 null。
在我们的 if 语句中,我们检查返回值是否不等于 null。 如果找到元素,则运行 if 块,否则运行 else 块。
如果我们还没有选择父元素,可以一步完成。
if (document.querySelector('#box #child-3') !== null) {
console.log('✅ element has child with id of child-3');
} else {
console.log('⛔️ element does NOT have child with id');
}
我们使用
querySelector
方法选择一个 id 为 child-3 的元素,该元素是 id 为 box 的元素的后代。
我们传递给 querySelector
方法的选择器可以根据需要指定。 以下示例仅检查元素的任何直接子元素是否具有 id。
if (document.querySelector('#box > #child-3') !== null) {
console.log('✅ element has child with id of child-3');
} else {
console.log('⛔️ element does NOT have child with id');
}
上面的选择器不会匹配 id
为 box
且 id
为 child-3
的元素的任何嵌套子元素。
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布,任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站。本站所有源码与软件均为原作者提供,仅供学习和研究使用。如您对本站的相关版权有任何异议,或者认为侵犯了您的合法权益,请及时通知我们处理。