3

我正在使用GWT它的底层DOM功能。

我基本上想要实现的是：

  • 有一个包含div一些文本的元素
  • 其中一些文本将被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大量修改outermostDivappendChild()removeFromParent()

我的问题是：

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

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

4

3 回答 3

1

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

return doc.createElement('div');

这样的节点最初并未附加到文档树，但即使在它之前，您已经可以对其执行大多数操作（除了需要其父节点的操作，因为它仍然为空）。

注意：节点是由稍后将附加到的同一文档创建的（这是必要的，因为由不同文档创建的节点可能不兼容 - 所以您不能总是将所有节点附加到任何地方）。

于 2012-09-20T09:08:55.497 回答
1

为了限定这个问题，我必须首先承认我是一个纯粹的前端——我没有玩过 GWT，我写的是原始的 Javascript，所以这个答案是基于浏览器内 DOM 的深奥知识。

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

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

于 2012-09-20T09:39:26.510 回答
0

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

于 2012-09-20T13:29:02.973 回答