如何解决HTML中JS获取div子节点文本长度报expected false to equal true错误

问题原因 #

childNodes 属性返回的是元素的所有子节点集合，包含文本节点、注释节点等非元素类型的节点，并非只返回HTML标签元素。
你给出的第一个<div>的起始标签后存在换行和缩进空白字符，浏览器会将这部分空白内容解析为一个文本节点，因此childNodes[0]实际获取到的是这个空白文本节点，而非你预期的<label>元素。该文本节点的内容全部为空白，trim()处理后长度为0，所以最终判断结果为false。

解决方案 #

你可以选择以下任意一种方式调整代码，获取到预期的<label>元素：

• 使用仅返回元素类型子节点的children属性替代childNodes：

  alert(document.querySelector('div:nth-child(1)').children[0].textContent.trim().length > 0)
  

• 使用firstElementChild直接获取父元素的第一个元素子节点：

  alert(document.querySelector('div:nth-child(1)').firstElementChild.textContent.trim().length > 0)
  

内容的提问来源于stack exchange，提问作者Ly Nguyen