我无法访问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

为了提供一种更现代的方法--使用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>

​

Answer 2

注意:在这里，当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>

​