如何使用JavaScript迭代DOM元素中的所有子项（包括那些没有标签的子项）

Question

我试图解析像这样的红宝石标签：

<div id="foo">
  <ruby>
      <rb>気</rb>
      <rp>(</rp>
      <rt>き</rt>
      <rp>)</rp>
  </ruby>
  が
  <ruby>
      <rb>狂</rb>
      <rp>(</rp>
      <rt>くる</rt>
      <rp>)</rp>
  </ruby>
  ってしまう。
</div>

问题是，我无法迭代所有子元素，包括那些没有标签的子元素。 所有的函数，例如： document.getElementById("foo").children和$("#foo").children()仅返回两个ruby标签，而中间没有文本。

我正在尝试获取类似的列表：

• {红宝石}
• が
• {红宝石}
• ってしまう

有没有办法获取所有标签和文本的列表？

Answer 1

您可以使用Node.childNodes （请参阅文档 ）

document.getElementById("foo").childNodes

但是，这可能会变得棘手：

在HTML中，在<div>标记和<ruby>标记之间，有空格和换行符。 这里将其解析为TextNode 。 因此.childNodes将返回5个节点：

1. 一个TextNode，用于介于<div>和第一个<ruby> （包括换行符和空格）。
2. 第一个<ruby>元素。
3. 一个TextNode，其中包含两个<ruby>元素之间的文本（包括两个换行符和空白）
4. 第二个<ruby>元素。
5. 一个TextNode，其中包含第二个</ ruby>和</ div>之间的文本。 （包括换行符和空格）

因此，如果只需要非空的TextNode，则实际上有一些文本时：

const nodes = [...document.getElementById('foo').childNodes].filter(node => !node.nodeValue || node.nodeValue.trim())