3

私が使用GWTしているのは、その下にあるDOM機能です。

私が基本的に達成しようとしているのは：

  • テキストを保持するdiv要素があります
  • これらのテキストの一部はspan要素に囲まれます
  • スパン要素は互いにドラッグ可能であり、コンテキストメニューを提供します
  • 新しいspan要素は、エンドユーザーが動的に作成できます

これはそれがどのように見えるかです：

これはそれがどのように見えるかです

アプリケーションの起動時、およびエンドユーザーによるの動的作成中にspans、いくつかElementのNodes操作（作成、挿入、変更、削除）を行う必要があります。これを実現するには、特定の要素を見つけることができるようにDOMツリーを調べる必要があります。

私は自分の要素（すべてのテキストと要素を含む）を構築するアプリケーションの起動に費やされる無駄な時間を減らす方法を探しています。divspan

この例を見てください：

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. DOMに挿入する前に、outermostDivとその子を変更することをお勧めしますか？

  2. outermostDivに追加しなくても、子、子の兄弟にアクセスできますDOM。outermostDivDOMに追加される前でも、閲覧可能な要素のツリーがどのように存在するかを理解したいですか？

4

3 に答える 3

1

Document.createDivElement()com.google.gwt.dom.client.Node次のJavaScriptを呼び出すことにより、を実装するオブジェクトを作成します。

return doc.createElement('div');

このようなノードは、最初はドキュメントツリーに接続されていませんが、接続される前でも、ほとんどの操作を実行できます（親ノードが必要な場合を除き、これはまだnullです）。

注：ノードは、後でアタッチされる同じドキュメントによって作成されます（別のドキュメントによって作成されたノードには互換性がない可能性があるため、これが必要です。したがって、常にすべてのノードをどこにでもアタッチできるとは限りません）。

于 2012-09-20T09:08:55.497 に答える
1

この質問を修飾するには、まず私が純粋なフロントエンダーであることを認める必要があります。GWTを使用したことがなく、生のJavascriptを記述しているため、この回答はブラウザー内DOMの難解な知識に基づいています。

  1. はい！ライブドキュメントのDOM操作にはコストがかかります。スタイル計算、レイアウトリフロー計算、DOMミューテーションイベントなどは、個々の変更ごとではなく1回だけ実行されるため、挿入前のDOMの操作ははるかに高速です。

  2. それはDOMに存在します– DOMは、そもそもそれを作成するために使用されたXML操作の抽象化です–それはまだドキュメントDOMの一部ではなく、それがもたらすすべての追加の複雑さです。

于 2012-09-20T09:39:26.510 に答える
0

実装にはStringBuilderを使用する必要があると思います。StringBuilderを使用してすべての操作（タグの挿入、位置の変更など）を行うことができ、完了したら、そのコンテンツを文字列としてHTMLウィジェットに追加します。要素を作成したり、子を追加したりするよりもはるかに高速です。

于 2012-09-20T13:29:02.973 に答える