用 HTML 表示文档 DOM：兄弟文本节点

Posted 2023-05-09

【中文标题】用 HTML 表示文档 DOM：兄弟文本节点

【英文标题】：Representing Document DOM in HTML: Sibling Text Nodes

【发布时间】：2018-09-06 12:33:41

【问题描述】：

我在very old comment 中读到了@Bergi 的这句话，讨论了nextSibling 的价值：

x.nextSibling 可能不是跨度，而是换行符文本 img 和 span 元素之间的节点

@Bergi 所指的示例是一些脚本，用于选择相当简单的 html 中的第一个元素，并找到 nextSibling：

<img src="something">
<span>

浏览器会在元素节点之间的 DOM 中插入“换行文本节点”吗？我真正想了解的是在关于使用 ProseMirror 将文档模型序列化为 HTML 的较早讨论中的这条评论：

HTML 几乎总是可以用来完全表示文档 DOM。 我们遇到了一个例外：兄弟文本节点。前 使用 ProseMirror 我们发现拥有同级文本很重要 节点，因此我们将 HTML 序列化为 JSON 以存储在数据库中。 出于兼容性原因，我们现在仍然这样做，但鉴于我们 不再需要兄弟文本节点，这可能会消失 我们文件格式的下一个版本。

该线程中的其余讨论内容繁多，与此问题无关，因此我没有将其链接。我认为这位作者之所以说 HTML 不能在兄弟文本节点的情况下镜像 DOM 是因为换行节点会自动插入到 DOM 中（而不是在 HTML 中表示）。这准确吗？

【问题讨论】：

当 HTML 被解析并转换为 DOM 时，空格会被折叠，并且在某些情况下会在浏览器之间不一致地删除（例如，IE 将删除元素之间的多余空格，Firefox 将插入一个空文本节点）。这就是为什么你不能保证序列化的 DOM 将与创建它的源完全匹配，即使在非常微不足道的情况下也是如此。

在不知道 ProseMirror 面临的问题的情况下，很难说出这意味着什么。但是换行节点可以很好地用 HTML 表示。它可能指的是表示相邻文本节点兄弟姐妹。如果您在一个文档中有两个相邻的文本节点，将 DOM 序列化为 HTML，然后将其解析回来，则生成的 DOM 将在该位置包含一个文本节点，而不是两个。如果您希望将 DOM 保留到具有两个文本节点的范围内，则需要使用不同的格式（例如 JSON）对 DOM 进行序列化。

@Alohci 这听起来正是问题所在（两个相邻的文本节点被折叠成一个）。谢谢！它在 ProseMirror 中是相关的，因为应用程序可能希望保持两个相邻节点之间的区别以用于将来的某些操作。

【参考方案1】：

我认为你提到的“隐藏字符”的概念并不准确。 问题是 nextSibling 返回 literally dom 上的下一个兄弟，这并不意味着它将成为 dom 上的下一个 element。 如果您想尝试，请删除所有换行符并重试，或者直接使用 nextElementSibling。