Combining getElementsByTagName and getElementsByClassName

本文关键字：getElementsByClassName and getElementsByTagName Combining 更新时间：2023-09-26

我试图将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参考："getElementsByClassName（）方法返回具有指定类名的元素的子元素的集合"

EDIT：要查找p元素是否具有content类，而不是getElementsByClassName（），可以使用

pElements[i].classList.contains("content")

如果元素具有类，则返回true。参考

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
}

不能组合getElementsByTagName和getElementsByClassName。因为正如@juunas所提到的，pElements现在由所有<p>元素的数组组成的结果组成。

当您使用pElements[i].getElementsByClassName("content")将getElementsByClassName应用于该结果集时，它会在pElements的子元素中进行搜索。

提示性结果：使用getAttribute()功能检查pElements中每个元素的class，如

pElements = document.getElementsByTagName("p");
console.log(pElements);
for(var i = 0, j = 0; i < pElements.length; i++) {
    if (pElements[i].getAttribute("class") === "content") {
        j++;
    }
}
console.log("Length of the resulting nodes: ", j);

这是因为你的p元素没有任何类为"content"的元素。p元素本身有这个类，所以你找不到它，0是正确的。

更改

<p class="content">Stuff2</p>

至

<p><span class="content">Stuff2</span></p>

结果你会得到1。

没有找到相关文章