时间戳

首页 > 解决方案 > 如何使用 JavaScript 在 DOM 元素中迭代所有子元素，包括那些没有标签的子元素

javascript - 如何使用 JavaScript 在 DOM 元素中迭代所有子元素，包括那些没有标签的子元素

问题描述

我正在尝试解析这样的红宝石标签：

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

问题是，我无法迭代所有子元素，包括那些没有标签的子元素。所有函数都喜欢： document.getElementById("foo").children并且$("#foo").children() 只返回两个 ruby​​ 标签，中间没有文本。

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

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

标签： javascripthtml

解决方案

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

document.getElementById("foo").childNodes

但这里可能会变得棘手：

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

  1. 介于<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())

推荐阅读