了解Document.createElement（）

Question

我正在使用GWT及其内置DOM功能。

我基本上想要实现的目标是：

• 拥有div元素，其中包含一些文字
• 其中一些文字会被span元素
包围
• span元素可以相互拖放并提供上下文菜单
• 最终用户可以动态创建新的span元素

这就是它的样子：

在应用程序启动时，在最终用户动态创建spans期间，我必须进行一些Element和Nodes操作（创建，插入，修改，删除） 。为了实现这一点，我必须通过DOM树才能找到特定的元素。

我正在寻找方法来减少在启动应用程序时花费的无用时间，在此我构建我的div元素（包含所有文本和span元素）。

举个例子：

DivElement outermostDiv = Document.get().createDivElement();
processText(outermostDiv, text); // text could be a Java String element
turnTheseIntoSpans(listOfSpans, outermostDiv); // listOfSpans could be a list of text that must be surrounded by span elements.

让我们想象一下，turnTheseIntoSpans使用以下方法对outermostDiv元素进行了大量修改：appendChild()，removeFromParent()，...

我的问题是：

1. 在将 outermostDiv 及其子项插入DOM之前修改它是一个好习惯吗？

2. 我可以访问outermostDiv个孩子，孩子的兄弟，而无需将其添加到DOM。我想了解在将outermostDiv添加到DOM之前，如何存在可浏览的元素树？

Answer 1

Document.createDivElement()通过调用以下JavaScript创建一个实现com.google.gwt.dom.client.Node的对象：

return doc.createElement('div');

这样的节点最初没有附加到文档树，但即使在它之前，你已经可以在它上面执行大多数操作了（除了那些需要它的父节点的操作，因为它仍然是空的）。 p>

注意：节点是由稍后将附加到的同一文档创建的（这是必要的，因为由不同文档创建的节点可能不兼容 - 因此您无法始终将所有节点附加到所有节点。）

Answer 2

要使这个问题合格，我必须首先承认我是一个纯粹的前锋 - 我没有玩过GWT并且我编写了原始的Javascript，所以这个答案是基于对浏览器内DOM的深奥了解。

1. 是的！实时文档DOM操作成本很高。在插入之前操作DOM要快得多，因为样式计算，布局重排计算和DOM突变事件之类的操作只运行一次而不是每次修改。

2. 它存在于DOM中 - DOM只是用于创建它的XML操作抽象 - 它还不是文档DOM的一部分，以及所带来的所有其他复杂性。

Answer 3

我认为您应该使用StringBuilder进行实现。您可以使用StringBuilder进行所有操作（插入标记，更改其位置等），完成后，将其内容作为字符串添加到HTML小部件中。它比创建元素，追加孩子等快得多。