4

こんにちは私はDOMの選択と操作をDOMからやりたいと思います。

目標は、ウィジェットをdomから構築し、準備ができてからdomに挿入することです。

私の問題は、getElementByIdがドキュメントフラグメントでサポートされていないことです。createElementとcloneNodeも試しましたが、どちらも機能しません。

私はプレーンなjsでそれをやろうとしています。私はそれをうまく処理するjQueryでこれを行うのに慣れています。jQueryソースでトリックを見つけようとしましたが、今のところ成功していません...

オリヴィエ

4

6 に答える 6

1

jQueryは最初に使用を試みgetElementById、それが機能しない場合は、getAttribute("id")必要なものが見つかるまで、を使用してすべてのDOM要素を検索します。

たとえば、にアタッチされていない次のDOM構造を構築し、documentそれがjavascript varに割り当てられた場合widget：

<div id="widget">
    <p><strong id="target">Hello</strong>, world!</p>
</div>

次に、次のことを行うことができます。

var target;

// Flatten all child elements in the div
all_elements = widget.getElementsByTagName("*");

for(i=0; i < all_elements.length; i++){
    if(all_widget_elements[i].getAttribute("id") === "target"){
        target = all_widget_elements[i];
        break;
    }
}

target.innerHTML = "Goodbye";

IDで検索するだけでは不十分な場合は、Sizzleの機能を複製するのではなく、Sizzleをインストールすることをお勧めします。別のライブラリをインストールする機能があると仮定します。

お役に立てれば！

于 2009-12-03T09:30:05.777 に答える
1

私は似たようなことをしましたが、それがあなたのニーズを満たすかどうかはわかりません. <span id="spanReserve"></span>プレーンやなどの「保持エリア」を作成します<td id="cellReserve"></td>。次に、JS 関数で次のようなことができます。

var holdingArea = document.getElementById('spanReserve'); holdingArea.innerHTML = widgetHTMLValue;

于 2009-12-02T14:14:24.623 に答える
0

編集：

これらの線に沿った単純なものはどうですか:

  DocumentFragment.prototype.getElementById = function(id) {
    for(n in this.childNodes){
      if(id == n.id){
        return n;
      }
    }

    return null;
  }

使用している他のライブラリでjQueryまたは選択APIを使用しないのはなぜですか? 私の知る限り、すべての主要なライブラリはフラグメントの選択をサポートしています。

jQ/Prototype/Dojo/etc のような大きなライブラリをスキップしたい場合は、Sizzle を使用できます。これは、jQ と Dojo を強化するセレクター エンジンであり、スタンドアロンとして提供されます。それも問題外である場合は、Sizzle ソースに飛び込んで、何が起こっているかを確認できると思います。全体として、数 100k を回避するために多大な努力を払っているように見えますが、Sizzle や別のオープン ソース ライブラリに引き込まれたすべての作業よりも、思いついたコードの実行時間が遅くなる可能性が高くなります。

http://sizzlejs.com/

ああまた...（推測）jQのトリックは、要素がDOMの外に出ていないことだと思います。私は間違っているかもしれませんが、あなたが次のようなことをすると思います：

$('<div></div>');

実際にはDOMドキュメントでは、ボディ/ヘッドノードの一部ではありません。それについては完全に間違っている可能性がありますが、それは単なる推測です。

だから、あなたは私に興味をそそられました。私はシズルを見ました..答えよりも - DOMメソッドを使用していません。セレクターのタイプにマップされたさまざまな DOMNode プロパティを比較するアルゴリズムを使用しているようです-何かが欠けていない限り...これは完全に可能です:-)

ただし、以下のコメントに記載されているように、Sizzle は DocumentFragments では機能しないようです...したがって、振り出しに戻ります :-)

于 2009-12-02T15:17:45.407 に答える
0

最新のブラウザー ( read: not IE ) には、Element APIにquerySelectorメソッドがあります。これを使用して、DocumentFragment 内の ID で要素を取得および要素化できます。

jQuery はsizzle.jsを使用します

DocumentFragments で行うことは、フラグメント内のすべての要素を深くループして、要素の属性 (この場合は 'id' ) が探しているものかどうかを確認することです。私の知る限り、sizzle.js は querySelector も使用して (可能であれば)、速度を上げています。

クロス ブラウザーの互換性を探している場合は、独自のメソッドを作成するか、querySelector メソッドを確認する必要があります。

于 2009-12-03T16:35:01.407 に答える
-1

実際には、html() と通常の jQuery 操作演算子を使用して XML ドキュメントを処理し、それを DOM に挿入する 2 つのツールがあります。

ウィジェットを作成するには、次を使用できますhtml():

$('#target').html('<div><span>arbitrarily complex JS</span><input type="text" /></div>');

それはあなたが望むものではないと思います。したがって、jQuery セレクターの追加の動作に注目してください。2 番目のパラメーターが渡されると、それが独自の XML フラグメントになり、それらのドキュメントで操作が行われる可能性があります。例えば。

$('<div />').append('<span>').find('span').text('arbitrarily complex JS'). etc.

append、appendTo、wrap などのすべての演算子は、このようなフラグメントで機能し、DOM に挿入できます。

ただし、注意が必要です。jQuery はブラウザーのネイティブ関数を使用してこれを操作するため (私が知る限り)、ブラウザーごとに異なる動作が得られます。整形式の XML であることを確認してください。不適切な形式の HTML フラグメントを拒否することさえありました。ただし、最悪の場合は、戻って文字列連結とhtml()メソッドを使用してください。

于 2009-12-11T07:06:23.223 に答える
-1

あなたは正しいことをしているように聞こえます。なぜそれがうまくいかないのか分かりません。



// if it is an existing element
var node = document.getElementById("footer").cloneNode(true);

// or if it is a new element use
// document.createElement("div");

// Here you would do manipulation of the element, setAttribute, add children, etc.
node.childNodes[1].childNodes[1].setAttribute("style", "color:#F00; font-size:128px");

document.documentElement.appendChild(node)
于 2009-12-02T14:16:53.307 に答える