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

我该如何解决这个问题？

- EddyKim

---

不要使用 document.all。 - SLaks

你可能是在元素不存在或不匹配后才访问它。 - SLaks

请展示所有相关的代码，包括CSS和HTML。并确保展示您将脚本嵌入HTML的位置。 - Scott Marcus

我找到了为什么不起作用的原因。在父文档加载之前，iframe 进程已经完成。我解决了。谢谢。 - EddyKim

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>

- Bibberty

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>

- gavgrif