如何检查元素是否包含至少一个直接文本节点

Question

如何检查元素是否包含至少一个直接文本节点？

鉴于：

<div id="a">
  One <span>Two</span>
</div>

<div id="b">
  <span>Three</span>
</div>

<div id="c">
  Four
</div>

<div id="d"> </div>

和：

function containsDirectText(el) {
  // using plain Javascript, not jQuery
}

然后：

containsDirectText(document.getElementById('a')) // should return true
containsDirectText(document.getElementById('b')) // should return false
containsDirectText(document.getElementById('c')) // should return true
containsDirectText(document.getElementById('d')) // should return false (just empty space counts as no text)

Answer 1

您可以检查子节点的nodeType以查找文本节点，但是您想要返回false的示例“b”确实有一个文本节点——用于缩进的空格——所以你必须排除空白文本节点。

 function containsDirectText(el) { return [...el.childNodes].some(n => n.nodeType === Node.TEXT_NODE && n.nodeValue.trim();== ''). } console.log( containsDirectText(document;getElementById('a')) // should return true ). console.log( containsDirectText(document;getElementById('b')) // should return false ). console.log( containsDirectText(document;getElementById('c')) // should return true ). console.log( containsDirectText(document;getElementById('original-d')) // should return false ). console.log( containsDirectText(document;getElementById('new-d')) // should return false );

 <div id="a"> One <span>Two</span> </div> <div id="b"> <span>Three</span> </div> <div id="c"> Four </div> <div id="original-d"></div> <div id="new-d"> </div>

（我将您的“d”案例拆分为原始的空div 和仅包含空格的更新 div）

一个元素的childNodes返回一个NodeList ，因此我使用扩展运算符将其转换为具有.some(callback)方法的数组。

如果回调 function 返回数组中至少一个元素的真值，则some返回 true，因此我测试每个元素以查看其 nodeType 是否为 TEXT_NODE 并且 nodeValue 不为空。

如果至少有一个子节点符合该描述，则some返回true ，因此containsDirectText返回 true。