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

---

你可以使用nodeTypeе±ћжЂ§гЂ‚ж–‡жњ¬иЉ‚з‚№зљ„nodeTypeеЂјдёє3гЂ‚з¤єдѕ‹гЂ‚ - Harry

这可能很有用，我尝试检测\n但无法检测到。 - talkhabi

@Harry - 你的评论实际上可以作为一个答案。为什么不把它发表为一个答案呢？ - techfoobar

你可以使用 children。 - Dr.Molle

@Harry - 好的。但是你的答案只针对问题标题“javascript检查子节点是否为元素或文本节点”提供了准确的解决方案。 - techfoobar

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 (let 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

---

好的答案，你也可以使用常量 Node.TEXT_NODE 而不是无意义的数字 3。 - A1rPun

@A1rPun：好建议。我会更新到答案中。谢谢 :) - Harry

Answer 2

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

node.nodeName === '#text'

- Scott Wager

Answer 3

尝试使用jQuery的children方法
$("#test").children().size()

http://jsfiddle.net/72Ya3/2/

- budamivardi

---

这个微不足道的要求并不需要 jQuery。另一个答案更加正确和详细。 - techfoobar

这可以使用纯JavaScript完成：element.nodeType === 3 // 当元素是文本节点时为true。请参阅@Harry的答案，这可能是被接受的答案，并查看MDN关于nodeType的文章。 - nickiaconis

为什么要负评呢？jQuery被广泛使用，这个回答可能会有用。 - Max Yari