結合getElementsByTagName和getElementsByClassName

我想結合getElementsByTagName和getElementsByClassName來縮小搜索範圍並計算結果節點，但第二個搜索總是導致長度爲0，我不知道爲什麼。結合getElementsByTagName和getElementsByClassName

<!DOCTYPE html> 
 
<html> 
 
\t <head></head> 
 
\t <body> 
 
\t \t <p>Stuff</p> 
 
\t \t <p class="content">Stuff2</p> 
 
\t \t <p>Stuff</p> 
 
\t \t <p class="content">Stuff2</p> 
 
\t \t <script type="text/javascript"> 
 
\t \t \t pElements = document.getElementsByTagName("p"); 
 
\t \t \t console.log(pElements); 
 
\t \t \t for(i = 0; i < pElements.length; i++) { 
 
\t \t \t \t console.log(pElements[i].getElementsByClassName("content").length); 
 
\t \t \t } 
 
\t \t \t //console.log(document.querySelectorAll('p.content').length); 
 
\t \t </script> 
 
\t </body> 
 
</html>

我知道我可以使用querySelectorAll這就像我註釋掉線，但我想明白爲什麼第一個解決方案是行不通的，而我能做些什麼要解決這個問題。

謝謝！

來源

2015-03-25 Dan

與第一實施例的問題在於：

pElements[i].getElementsByClassName("content")

搜索p元素的孩子。但是因爲它實際上是在同一個元素上，所以沒有找到它們。

W3C reference：「的getElementsByClassName方法（）方法返回與指定的類名的元素的子元素的集合」

編輯：找到，如果AP元素有內容類，而不是getElementsByClassName方法（）你可以使用

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

如果元素有類，它將返回true。編輯2：一種更向後兼容的方式是獲得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 
}

來源

2015-03-25 11:34:55 juunas

所以它不是真的有可能在兩個（ByTagName＆ByClassName）如果你結合尋找具有正確標記和類的元素？ – Dan 2015-03-25 11:36:51

也增加了一種更向後兼容的方式。 – juunas 2015-03-25 11:56:12

這是因爲你的p元素沒有類「內容」的任何元素。 p元素本身有這個類，所以你不能找到它，0是正確的。

變化

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

要

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

，您將獲得1作爲結果。

來源

2015-03-25 11:40:42 Max

您不能合併getElementsByTagName和getElementsByClassName。因爲正如@juunas提到的那樣，pElements現在由包含所有<p>元素的數組組成的結果組成。

而當您將getElementsByClassName應用於此結果集時，使用pElements[i].getElementsByClassName("content")，它會在pElements的子元素中進行搜索。

暗示的結果：使用getAttribute()函數來檢查每個元素的class在pElements一樣，

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);

來源

2015-03-25 11:56:45

結合getElementsByTagName和getElementsByClassName

回答

相關問題