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标签，而中间没有文本。

我正在尝试获取以下列表：

{ruby}
が
{ruby}
ってしまう

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

Answer 1

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

document.getElementById("foo").childNodes

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

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

一个<div>和第一个<ruby>之间的TextNode（包括换行符和空格）。
第一个<ruby>元素。
一个TextNode，其中包含两个<ruby>元素之间的文本（包括两个换行符和空白）
第二个<ruby>元素。
一个TextNode，其中包含第二个</ ruby>和</ div>之间的文本。（包括换行符和空格）

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

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

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

1 个答案: