0

現在DOMメソッドを使用して要素を作成している、独自のインターフェースを表示するopera用のuserjsスクリプトがあります。これはうまく機能しますが、インターフェースがコードに結び付けられているため、保守が困難です。そこで、レイアウトをコードから分離する方法を探しています。また、物事をシンプルに保ちたいので、そのためにフレームワーク（jquery ...）に依存したくありません。クロスブラウザー機能は気にしません。とにかく、これは Opera でしか動作しません。

私はすべてのスタイルのものをcssに入れました。今、レイアウトを抽象化する方法を探しています。UI の大部分は非常に動的であるため、1 つの大きな静的 HTML だけを使用することはできません。思いついたアイデアは、さまざまな UI パーツのレイアウトを含む html を用意し、そこからフラグメントを抽出し、必要に応じてすべてをまとめるというものでした。

これはある程度うまく機能します：

  • を作成しdiv、親にしないでください。
  • .innerHTMLhtmlをロードするために使用します
  • このgetElementsByClassName()を使用して、その中のウィジェットを見つけます
  • それらをクローンしますwidget.cloneNode(true)
  • 親それなど...

(重複する ID のリスク、およびクローンにイベント ハンドラーが見つからない)に関するいくつかの問題を知っていますcloneNode()が、それらを回避することはできます。

問題は、.innerHTMLロードすると、DOM コード バージョンからキャプチャされたレイアウトを使用しているにもかかわらず、現在の DOM コードとは異なる結果が得られることです。たとえば、テーブルでこれを見ています。シンプルに

<table><tr><td></td></tr></table>

innerHTMLバージョンはトンボでタグ付きで表示され、その<tbody>ため、このような css ルールは適用されなくなりました。

table > tr > td { ... }

私はこのすべてについてひどい気持ちを持っています...

  • DOM と html レイアウトの間に他に大きな違いはありますか?
  • 多分私は本当に<tbody>DOMのもので使うべきですか？
  • これをどうしますか？

おまけの質問:

  • createDocumentFragment()存在の背後にある理由は何ですか？他の方法ではできないことで何ができますか？
4

1 に答える 1

1

そうです、マークアップが定義されていないテーブルは、テーブルのポパティを読み取るときに存在するタグ<tbody>を使用してマークアップに変換されるように見えます。<tbody>innerHTML

しかし、これはあなたにとってそれほど問題を引き起こさないはずです：CSSの問題に関しては>、セレクターからドロップしてください（直接の子孫に制限されます）。

考えられる利点の1つDocumentFragmentは、大量のDOM操作を行う必要がある場合、ドキュメントフラグメントのみを操作し、すべての変換が完了すると、それがDOMにアタッチされると、パフォーマンスが向上する可能性があることです。

于 2013-01-24T14:36:53.143 に答える