NodeList 的长度不一致

Question

所以，我是第一次尝试 html/css/js，我遇到了一些没有多大意义的问题（至少对我而言）。

因此，当页面加载时，我在 <ul> 中插入了一些选项（这些选项从一开始就不存在）。插入所有选项后，我尝试使用一些东西来获取所有选项：

const dropdown = document.getElementById("selector");
const children = dropdown.childNodes;

然而，当我使用 console.log(children) 时，我得到这样的结果：

但是当我使用 children.length 时，我得到的值为 0。我可能做错了什么？

Answer 1

您可以使用 childElementCount 获取 children 的计数。

dropdown.childElementCount

Answer 2

您应该提供 minimal reproducible example. Perhaps I am missing something, but in the example below everything works as expected. the result of children.length is 11 (only 5 nodes are li). One possible problem is related to the way console.log works. Logging objects directly is not advisable。如果有问题，可以查看debugger.

const dropdown = document.querySelector("ul");
const children = dropdown.childNodes;

console.log(children.length);

<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>

Answer 3

很抱歉给您带来麻烦，但显然我需要稍等片刻才能全部获取。我在检索它的函数中添加了一个 setTimeout，现在它可以工作了。谢谢大家！

Answer 4

与其将 JS 包装在 setTimeout() 函数中，不如将其包装在 eventHandler 中。

document.addEventListener('DOMContentLoaded', () => {
  // Your JS code here
}

这将确保仅在所有元素都已加载到 DOM

后才触发您的代码

此外，如果您只想计算列表中 li 标签的数量，请不要使用 dropdown.childNodes。 childNodes 将 return HTMLElements 和 TextNodes。因此，如果您在 li 标签之间写了一些内容，该文本也会显示为一个节点。

相反，使用 dropdown.children，它只会 return 个元素列表。

NodeList 的长度不一致

Inconsistent length for NodeList

html

javascript

nodelist