我尝试结合 getElementsByTagName 和 getElementsByClassName 来缩小搜索范围并计算结果节点的数量，但第二次搜索的结果总是长度为 0，我不知道为什么。
<!DOCTYPE html>
<html>
<head></head>
<body>
<p>Stuff</p>
<p class="content">Stuff2</p>
<p>Stuff</p>
<p class="content">Stuff2</p>
<script type="text/javascript">
pElements = document.getElementsByTagName("p");
console.log(pElements);
for(i = 0; i < pElements.length; i++) {
console.log(pElements[i].getElementsByClassName("content").length);
}
//console.log(document.querySelectorAll('p.content').length);
</script>
</body>
</html>我知道我可以使用 querySelectorAll 来实现此目的，就像我注释掉的行一样，但我想了解为什么第一个解决方案不起作用，以及我可以采取哪些措施来修复它。
谢谢!
最佳答案
第一个示例的问题在于:
pElements[i].getElementsByClassName("content")
搜索 p 元素的子元素。但由于它实际上位于同一个元素上，因此找不到它们。
W3C reference : “getElementsByClassName() 方法返回具有指定类名的元素的子元素的集合”
编辑:要查找 p 元素是否具有内容类，您可以使用
而不是 getElementsByClassName()pElements[i].classList.contains("content")
如果元素具有该类，则返回 true。 Reference
EDIT2:一种更向后兼容的方法是获取 className 属性，将其拆分为空格并迭代数组以查看该类是否存在。
var names = pElements[i].className.split(" ");
var found = false;
for(var i = 0; i < names.length; i++){
if(names[i] === "content"){
found = true;
break;
}
}
if(found){
//Your code here
}
关于javascript - 组合 getElementsByTagName 和 getElementsByClassName，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29254398/