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>

我无法访问HTMLCollection

2 个答案: