JS问题：判断元素无子节点逻辑失效排查

我想要实现一个文本输入框功能：

• 按下键盘按键时，在下方列表中显示对应ASCII码；
• 点击输入框时隐藏上方段落；
• 点击输入框外部时，仅当下方无ASCII码列表（未输入或全部删除）时，重新显示上方段落。

我尝试用if (element.childNodes.length == 0)判断列表是否为空，但该逻辑不生效，请问问题出在哪里？

嗨，这个问题我碰到过不少次，核心原因在于你用的childNodes会把所有子节点都算进去，包括那些看不见的空白文本节点（比如HTML里的换行、空格）。举个例子，如果你的列表HTML是这样写的：

<ul id="ascii-list">
</ul>

<ul>标签之间的换行就会被当作一个文本节点，这时候childNodes.length会等于1，而不是0——哪怕列表里没有任何<li>项，你的判断也会认为列表不为空，逻辑自然就失效了。

给你几个靠谱的解决办法，选哪个都可以：

1. 改用children属性
   children只返回元素类型的子节点（比如<li>），会自动忽略空白文本节点。修改后的判断逻辑：

   const listElement = document.getElementById('ascii-list');
   if (listElement.children.length === 0) {
     // 重新显示上方段落的代码
   }
   

2. 直接查询<li>元素的数量
   既然我们关心的是有没有ASCII码列表项，直接用querySelectorAll统计<li>的数量最直观：

   const listElement = document.getElementById('ascii-list');
   if (listElement.querySelectorAll('li').length === 0) {
     // 重新显示上方段落的代码
   }
   

3. 检查文本内容是否为空（需去空白）
   如果你的列表里不会有其他文本内容，可以用textContent配合trim()来判断：

   const listElement = document.getElementById('ascii-list');
   if (listElement.textContent.trim() === '') {
     // 重新显示上方段落的代码
   }
   

这三个方法都能解决你的问题，个人推荐前两个，尤其是第二个，逻辑更清晰，和你的需求直接对应。

内容的提问来源于stack exchange，提问作者Rob Kwasowski