javascript检查子节点是元素节点还是文本节点

Question

我对 childNodes 有疑问，如下所示：

  <ol>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Coca Cola</li>
 </ol>
 //childNodes.length = 7

但

<ol><li> Coffee </li><li> Tea </li><li> Coca Cola </li></ol>
//childNodes.length = 3

似乎每个 \n 或 textnode child childNodes 或

原文由 talkhabi 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以使用 nodeType 检查给定的子节点是否为文本节点。文本节点将具有 nodeType 作为 3 。我们可以使用数字或 常量 Node.TEXT_NODE 进行检查。

 window.onload = function() {
  var el = document.getElementsByTagName('ol')[0].childNodes; // using [0] as there is only one ol in the demo
  console.log('Print with text nodes');
  for (var i = 0; i < el.length; i++) { // will output all nodes with "undefined" for text nodes
    console.log(el[i].innerHTML);
  }
  console.log('Print without text nodes');
  for (var i = 0; i < el.length; i++) { // will output only non text nodes.
    if (el[i].nodeType != Node.TEXT_NODE) // or if (el[i].nodeType != 3)
      console.log(el[i].innerHTML);
  }
}

 <ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

原文由 Harry 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

也可以使用 nodeName 检查文本节点

node.nodeName === '#text'

原文由 Scott Wager 发布，翻译遵循 CC BY-SA 4.0 许可协议