如何使用JavaScript迭代所有子元素，包括DOM元素中没有标记的子元素

我正在尝试解析一个ruby标记，如下所示：

気
(
き
)
が
狂
(
くる
)
ってしまう。

问题是，我无法迭代所有子元素，包括那些没有标记的子元素。所有功能包括：

document.getElementById（“foo”）.children

和

$（“#foo”）.children（）

只返回两个ruby标记，中间没有文本

我正试图得到一个如下列表：

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

---

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

您可以使用

Node.childNodes

（请参阅）

但这里是它可能变得棘手的地方：

在HTML中，

标记和

标记之间有空格和换行符。这里将解析为

TextNode

。因此

.childNodes

将返回5个节点：

位于

和第一个

之间的文本节点（包括换行符和空格）

第一个

元素

包含两个

元素（包括两个换行符和空格）之间的文本的TextNode

第二个

元素

包含第二个

和

之间的文本的文本节点。（包括换行符和空格）

因此，如果您只需要非空的TextNode，当实际存在一些文本时：

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

---

您需要的是

document.getElementById（“foo”）.childNodes

，而不是

.children

childNodes

获取元素节点之外的文本节点。注意：你可能会在你想要的文本中得到大量的空白。可能是重复的

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