了解Document.createElement（）

Question

我正在使用GWT及其底層DOM功能。

我基本上想要實現的是：

• 有一個div元素持有一些文本
• 其中一些文本將被span元素包圍
• span元素可以相互拖放，並提供上下文菜單
• 最新用戶可以動態創建新的span元素

這就是它的樣子：

在應用程序啟動時，以及在最終用戶動態創建spans ，我必須進行一些Element和Nodes操作（創建，插入，修改，刪除）。 為了實現這一點，我必須通過DOM樹才能找到特定的元素。

我正在尋找方法來減少在應用程序啟動時花費的無用時間，在那里我構建我的div元素（包含所有text和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');

這樣的節點最初並未附加到文檔樹，但即使在它之前，您也可以對其執行大多數操作（除了那些需要其父節點的操作，因為它仍為空）。

注意：節點由稍后將附加到的同一文檔創建（這是必要的，因為由不同文檔創建的節點可能不兼容 - 因此您無法始終將所有節點附加到所有節點）。

Answer 2

為了限定這個問題，我必須首先承認我是一個純粹的前鋒 - 我沒有玩GWT並且我編寫原始Javascript，所以這個答案是基於對瀏覽器內DOM的深奧了解。

1. 是! 實時文檔DOM操作成本很高。 在插入之前操作DOM要快得多，因為樣式計算，布局重排計算和DOM突變事件之類的操作只運行一次而不是每次修改。

2. 它存在於DOM中 - DOM只是用於創建它的XML操作抽象 - 它還不是文檔DOM的一部分，以及所帶來的所有其他復雜性。

Answer 3

我認為你應該使用StringBuilder進行實現。 您可以使用StringBuilder進行所有操作（插入標記，更改其位置等），完成后，將其內容作為字符串添加到HTML小部件中。 這比創建元素，追加孩子等要快得多。