我试图找到 body 标记内的所有元素,但有一个元素 (div) 具有某种“隐藏”类类型,我想将其及其子元素从我的元素数组中排除。
这是我的 var,其中包含正文中的所有元素:
allTagsInBody = document.body.getElementsByTagName('*');
这是我想要从此列表中排除的 div:
<div class="myHiddenElement">
<button>Click here</button>
<div> <button>Click here</button> </div>
<button>Click here</button>
</div>
问题是我不知道该 div 内有多少元素以及它们的嵌套程度。
最佳答案
当您迭代每个元素时,您不仅需要检查它是否具有您的隐藏类,而且还需要检查其任何父元素是否具有该类。因此,您需要递归地检查每个元素的父元素。这可能会非常昂贵,具体取决于页面上元素的数量以及它们的嵌套深度,但它是如何完成的:
var arr = [];
var len;
var i;
var nodes = document.querySelectorAll('body *');
function checkNode(node) {
if (node.classList.contains('myHiddenElement')) {
return true;
} else if (node.parentNode.nodeType === 1) {
return checkNode(node.parentNode);
}
return false;
};
for (i = 0, len = nodes.length; i < len; i++) {
if (checkNode(nodes[i])) {
continue;
} else {
arr.push(nodes[i]);
}
}
这是一个 JSFiddle 示例:http://jsfiddle.net/xzCfs/5/
不幸的是,我认为没有办法用 CSS 选择器来做到这一点,因为 :not() 选择器只接受简单选择器,而不接受复合选择器(例如 :not(.myHiddenClass *) <-- 会很棒如果有效的话)。
关于javascript - 在纯Javascript中,如何获取body标签内的所有元素(不包括某个div及其子元素)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13129524/