NodeList 的长度不一致答案

【问题标题】：Inconsistent length for NodeListNodeList 的长度不一致
【发布时间】：2021-08-10 11:42:56
【问题描述】：

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

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

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

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

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

【问题讨论】：

我尝试在jsfiddle 中运行您的代码，它运行良好。能否提供更多代码？
@MarkoBorković 我在帖子中写过，但可能不够清楚，但元素从一开始就不在 html 中。我用js添加它们，添加它们之后，我这样做

标签： javascript html nodelist

【解决方案1】：

您可以使用 childElementCount 来获取孩子的数量。

dropdown.childElementCount

【讨论】：

是的，我想使用它，但是当我使用children[0]（例如）我得到undefined。（忘记添加到帖子中）

【解决方案2】：

您应该提供minimal reproducible example。也许我遗漏了一些东西，但在下面的示例中，一切都按预期工作。 children.length 的结果是 11（只有 5 个节点是 li）。一个可能的问题与console.log 的工作方式有关。直接记录对象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>

【讨论】：

我在帖子中写过但可能不够清楚，但元素从一开始就不在html中。我用js添加它们，添加它们之后，我这样做。可能和那个有关？
我想当然地认为你在（同步）插入之后调用了children.length。在这种情况下，没关系。如果是这样，我认为问题的最可能根源是console.log，如答案中所述。

【解决方案3】：

所以，麻烦您了，但显然我需要稍等片刻才能尝试获取所有内容。我在检索它的函数中添加了一个 setTimeout，现在它可以工作了。谢谢大家！

【讨论】：

看看我的回答。 setTimeout 不是等待元素加载到 DOM 中的好方法

【解决方案4】：

不要将 JS 包装在 setTimeout() 函数中，而是将其包装在 eventHandler 中。

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

这将确保只有在所有元素都加载到 DOM 后才会触发您的代码

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

改为使用dropdown.children，它只会返回一个元素列表。

【讨论】：

使用这种方法，它似乎永远不会“加载”我只是一直等待，什么也没有发生。我尝试在该侦听器中添加一个console.log("loaded")，但它从未触发