DOM 可以是 DAG 还是必须仍然是树？

Question

令人费解。我希望仅在主题行中搜索问题就能提供明确的答案，但由于连任何答案的暗示都没有出现，所以我要问。

下面的代码为了方便使用了D3，但问题是关于DOM的。如果您愿意，可以随意使用（较小的恕我直言）jquery 或（较小的）准系统 DOM 操作代码来回答。

左侧 () 出现多个 DIV。将鼠标悬停在其中一个 DIV 上时，右侧会放大 ()。

function magnify(i) {
    return function() {
        var right = d3.select("right");
        right.selectAll("*").remove();
        right.append("magunit")
             .html("<h2>" + i + "</h2>");
    }
}
for(i=0; i<256; i++) {
    var unit = d3.select("left").append("unit")
                 .on("mouseenter",magnify(i));
    unit.html("<h2>" + i + "</h2>");
}

html, body { width: 100%; height: 100%; margin: 0; }
mycontainer { width: 100%; height: 100%; display: flex; flex-flow: row; }
left { display: flex; flex-flow: row wrap; flex: 1; overflow-y: auto;}
right { display: flex; flex-flow: row; flex: 1; }
unit { flex: 1 1 auto; width: 80px; height: 60px; border: solid 1px black; }

<script src="https://d3js.org/d3.v5.min.js"></script>
    <mycontainer><left></left><right></right></mycontainer>

是否有必要重新创建每个DIV？标准对于从两个叶子指向现有 DIV 从而有效地使 DOM 成为有向无环图 (DAG) 而不是树有何规定？

澄清，回复 Kaiido 的评论

我使用<unit>here代替任意复杂的东西以保持代码简洁。重点是移动指针而不是不断地重新创建（任意复杂的）单元结构。因此，“只需更改其中的文本<h2>”并不能解决问题，但“切换到 SVG 并利用<use>”就可以了。

相关的

• 影子 DOM

Answer 1

我认为您是在问同一个元素是否可以是多个元素的子元素（例如，一个 div 是两个本身是兄弟姐妹的 div 的子元素），那么简单的答案是“否”。

\n\n

想一想 - 如果您必须手动编写 HTML，您将如何使用标记来编写它？HTML 本质上是一种书面标记语言，而 DOM 只是一种以编程方式表示 HTML 文档的方式，以便脚本可以对其进行操作。

\n\n

我们受到这一点的限制，因为 DOM 中的任何内容都必须可以表示为有效的 HTML，反之亦然。最终，浏览器解析 HTML 文档以了解要显示的内容。文档的结构（必须是）严格来说是一棵树，因为在 HTML（和 XML）中，子元素是通过将子元素放置在其父元素中（即嵌套）来创建的。无法使用这种格式来表达多父关系。

\n\n

如果我们今天再次设计网络，我们可能会采取不同的做法，但这是我们近 30 年前留下的遗产的一部分 - 当时 JavaScript 还不是一个东西。

\n\n

如果您想要有关 DOM 和 HTML 文档之间关系的一般参考，我建议您阅读https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/ \xe2\x80\xa6 开始和。

\n\n

另请参阅 https://w3.org/TR/2004/REC-DOM-Level-3-LS-20040407/load-save.html。这是 W3C 规范，描述了 DOM 对象必须如何从 XML 序列化到 XML（当然，HTML 是其中的一个特定变种）。如果它可以序列化为 XML，那么它必须可以表示为分层树，因为这就是 XML 所需要的。

\n\n

https://dom.spec.whatwg.org/#nodes是当前的生活标准，描述了DOM 如何成为节点的分层树。

\n