我無法訪問 HTMLCollection

Question

當我使用 getElementsByClassName 時，我無法訪問 HTMLCollection 類型。

我想得到長度，但我不能得到那個

var documentHeader = parent.document.all['header'];
var motionClass = documentHeader.getElementsByClassName('motion');

這是motionClass的結果

HTMLCollection []
 0: div.motion
 length: 1
 __proto__ : HTMLColletion

如果我訪問長度結果為 0

我怎樣才能導致這個問題？

Answer 1

注意：這里我們在 DOM 准備好時安全地執行代碼。 確保你這樣做。

 document.addEventListener('DOMContentLoaded', function() { let motionArray = document.getElementsByClassName('motion'); console.log(motionArray.length); });

 <div class='motion'>test</div> <div class='motion'>test</div> <div class='motion'>test</div> <div class='motion'>test</div> <div class='motion'>test</div> <div class='motion'>test</div> <div class='motion'>test</div>

Answer 2

為了提供更現代的方法 - 使用documentQuerySelectorAll()獲取集合 - 然后可以迭代它以提供每個項目 - 或者可以提供集合的長度。

 let motions = document.querySelectorAll('.motion'); console.log(motions.length); // gives 5 console.log(motions[2].textContent); // gives "3" - the text content of that element

 <div class='motion'>1</div> <div class='motion'>2</div> <div class='motion'>3</div> <div class='motion'>4</div> <div class='motion'>5</div>