[英]HTML getElementsByClassName returns HTMLCollection with length of 0
我正在嘗試使用js document.getElementsByClassName來定位一個 html 元素，它實際上是一個表的 header 元素。
對於以下代碼：
console.log(document.getElementsByClassName('gtableheader'));
從Firebug ，我可以看到它記錄了一個HTMLCollection ，當我單擊它時，它顯示：
-> 0 tr.gtableheader
length 1
所以它確實找到了我想要的元素。
但是當我使用：
console.log(document.getElementsByClassName('gtableheader').length);
然后 output 為0 。 太奇怪了，有什么想法嗎？
那是因為getElementsByClassName返回一個實時集合。 對象的length屬性為0因為在那個時間點，DOM中沒有帶有該className的元素。 由於控制台顯示對象的實時表示，因此當元素添加到DOM時，它會顯示所有匹配的元素。
DOM解析器從上到下解析文檔，當它到達標記時，它會解析它並將它的DOM表示（ HTMLElement接口的實例）添加到文檔對象模型。 您應該將腳本標記移動到body標記的末尾，或者監聽在完全加載和解析初始HTML文檔時觸發的DOMContentLoaded事件。
使用getElementsByClassName()將在文檔中將具有該類名的所有元素作為NodeList返回。 此對象表示可以通過索引號訪問的節點集合，從0開始。要訪問NodeList中的元素，您必須使用循環。
當你console.log(document.getElementsByClassName('gtableheader').length); 你看到0因為當你運行它時沒有類gtableheader元素。 您可以在控制台中查看項目，因為document.getElementsByClassName()返回在添加新元素時更新的實時集合。
同樣，在您使用的代碼中，長度為0，您可以使用下面的代碼訪問類名。
document.getElementsByClassName('gtableheader')[0].style.color="red";
如果要訪問類中的所有元素，可以使用for循環。
var x = document.getElementsByClassName('gtableheader');
for (var i = 0; i < x.length; i++) {
x[i].style.color = "red";
}
更多信息： http ： //www.w3schools.com/jsref/met_document_getelementsbyclassname.asp
用它來使它工作
window.addEventListener("load", function(event) {
console.log(document.getElementsByClassName('gtableheader').length);
});
我有類似的問題，但其他答案並沒有導致我的解決方案。 我最終意識到，在我的代碼運行時，DOM尚未完全構造，因此是空數組。 我在控制台中看到的是一個填充的數組，這是在DOM完全形成並且腳本完成之后存在的。
對我來說有用的是在MutationObserver中包含需要該數組的代碼，並將其設置為觀察包含將動態生成的部分的硬編碼div（請參閱此StackOverflow答案和MDN文檔 ）。
試試這個：
var divArray = document.getElementById('hardCodedContainer');
var observer = new MutationObserver(function(){
console.log(document.getElementsByClassName('gtableheader').length);
console.log(document.getElementsByClassName('gtableheader'));
};
observer.observe(divArray, { attributes: false, childList: true, subtree: true });
// When you've got what you need, you should call this function to trigger a disconnect
function classesFound(){
observer.disconnect();
};
您只需要在聲明類的html代碼之后調用js文件。
我有這個問題在動態創建之后要求元素，用 setTiemout() 修復
只需將<script>標簽放在</body>之前
如果在<body>標簽的末尾沒有添加<script>標簽，那么到那時 DOM 可能還沒有准備好，從而阻止 javascript 對其進行處理，從而導致未知行為
為什么 document.getElementsByName 返回一個 NodeList 而 document.getElementsByClassName 返回一個 HTMLCollection？
[英]Why does document.getElementsByName return a NodeList while document.getElementsByClassName returns an HTMLCollection?
HTMLCollection的長度為8，但記錄其任何索引是否返回未定義？
[英]HTMLCollection's length is 8 but logging any of its indices returns undefined?
即使使用 document.readyState || HTMLCollection 返回 0 作為長度在“DOMContentLoaded”之后
[英]HTMLCollection returns 0 as length even with document.readyState || after "DOMContentLoaded"
無法從getElementsByClassName訪問HTMLCollection中的元素
[英]Unable to access elements in HTMLCollection from getElementsByClassName
HTMLcollection 0 列表長度，[n] 返回未定義，轉換為數組返回空數組
[英]HTMLcollection 0 list length, [n] returns undefined, converting to an array returns an empty array
Javascript (HTMLCollection) 中的 object 長度不一致
[英]Inconsistent object length in Javascript (HTMLCollection)
從 getElementsByClassName 迭代 HTMLCollection 時的奇怪行為
[英]Strange behavior when iterating over HTMLCollection from getElementsByClassName
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.