Question

我有一个html页面，其中包含一些用户输入的文字。用户可以放置任何类型的格式化文本，可以插入图像，视频，微笑，可以根据他/她的喜好对齐文本等。简而言之，用户可以通过使用编辑器（CKEditor）完全创建文档。

我的应用程序必须接受该html文本（DOM树）并进行某些操作。

因为我需要能够操作树中的每个单独节点，所以我会将数据属性关联到所有节点，包括节点 #text 。但是，我无法将属性绑定到 #text 节点。所以我想用SPAN节点包围#text节点。所以我将SPAN节点视为#text节点。

编辑器不允许用户直接创建HTML。

这可能有问题吗？ SPAN节点可以是所有节点的子节点吗？

例如，在这些情况下没有问题：

<p>Some text <b>here</b></p>

<img src=".."><a>a link here</a>

<address><span>an address</span></address><br>

但是可能存在放置SPAN可能会产生问题的情况？

谢谢

Answer 1

SPAN节点可以是所有节点的子节点吗？

没有。例如，option元素允许文本内容，但span元素将是无效HTML。

然而，理论上，使用DOM方法，您可以将任何元素作为其他元素的子元素（循环除外）附加。结果可能是无效的HTML并且不可靠地显示，但DOM并不关心。

var s = document.createElement('span');
s.appendChild(document.createTextNode('Bar'));
document.querySelector('option').appendChild(s);
document.write('Span inserted successfully');

<select><option>Foo</option></select>

但是如果要将数据关联到节点，可以尝试使用ES6 WeakMap而不是属性。

var data = new WeakMap();
data.set(textNode, whateverData);
data.get(textNode); // whateverData

使用SPAN节点覆盖#text节点

1 个答案: