javascript - documentFragmentで要素を見つける方法はありますか？

Question

var oFra = document.createDocumentFragment();
// oFra.[add elements];
document.createElement("div").id="myId";
oFra.getElementById("myId"); //not in FF

ドキュメントにフラグメントを添付する前に「myId」を取得するにはどうすればよいですか？

Answer 1

これらの答えはすべてかなり古く、当時から広く利用可能querySelectorAllではありませんでした。querySelectorCSSセレクターをパラメーターとして受け入れるこれらの2つの関数はDocumentFragment、最新のブラウザーでは機能するため、問題の状況に対処するための好ましい方法であることに注意してください。querySelectorAllいくつかの回答で提示されている代替ソリューションは、またはをサポートしていなかったレガシーブラウザに適したアプローチですquerySelector。

使用例は次のとおりです。

var df = document.createDocumentFragment();
var div = document.createElement('div');
div.id = 'foo';
df.appendChild(div);
var result = df.querySelector('#foo'); // result contains the div element

優れた実装では、最初にオブジェクト検出を使用して、ブラウザがこれをサポートしているかどうかを確認する必要があります。例えば：

function getElementByIdInFragment(fragment, id) {
    if (fragment.querySelector) {
        return fragment.querySelector('#' + id);
    } else {
        // your custom implementation here
    }
}

Answer 2

いいえDocumentFragment。APIは控えめに言っても最小限です。つまり、APIはプロパティやメソッドを定義しません。つまり、NodeAPIで定義されたプロパティとメソッドのみをサポートします。のようなメソッドはAPIgetElementByIdで定義されているため、。と一緒に使用することはできません。DocumentDocumentFragment

Answer 3

NickFitzは正しいですが、標準またはブラウザにDocumentFragment期待するAPIがありません（これは残念です。フラグメントを設定できると非常に便利です。DocumentElementinnerHTML

フレームワークでさえ、ノードがドキュメント内にあることを要求する傾向があるため、またはフラグメント上に存在しないコンテキストノード上のメソッドを使用する傾向があるため、ここでは役に立ちません。あなたはおそらくあなた自身を書かなければならないでしょう、例えば：

 function Node_getElementById(node, id) {
      for (var i= 0; i<node.childNodes.length; i++) {
          var child= node.childNodes[i];
          if (child.nodeType!==1) // ELEMENT_NODE
              continue;
          if (child.id===id)
              return child;
          child= Node_getElementById(child, id);
          if (child!==null)
              return child;
      }
      return null;
 }

上記のようなナイーブでパフォーマンスの低い関数に依存するよりも、進行中に参照を追跡する方がほぼ確実に優れています。

var frag= document.createDocumentFragment();
var mydiv= document.createElement("div");
mydiv.id= 'myId';
frag.appendChild(mydiv);
// keep reference to mydiv

Answer 4

どうですか：

var oFra = document.createDocumentFragment();
var myDiv = document.createElement("div");
myDiv.id="myId";
oFra.appendChild(myDiv);
oFra.getElementById("myId"); //not in FF

div作成したものをドキュメントフラグメントに追加しない限り、なぜgetElementByIdそれが見つかるのかわかりません。

- 編集

独自のgetElementById関数をロールする場合は、次のコードが機能するため、目的の参照を取得できるはずです。

var oFra = document.createDocumentFragment();
var myDiv = document.createElement("div");
myDiv.id = "myId";
oFra.appendChild(myDiv);
if (oFra.hasChildNodes()) {
    var i=0;
    var myEl;
    var children = oFra.childNodes;
    for (var i = 0; i < children.length; i++) {
        if (children[i].id == "myId") {
            myEl = children[i];
        }
    }
}
window.alert(myEl.id);

Answer 5

jQueryの使用：

// Create DocumentFragment
var fragment  = document.createDocumentFragment(),
    container = document.createElement('div');

container.textContent = 'A div full of text!';
container.setAttribute('id', 'my-div-1');
container.setAttribute('class', 'a-div-class');
fragment.appendChild(container);

// Query container's class when given ID
var div = $('<div></div>').html(fragment);
console.log(div.find('#my-div-1').attr('class'));

jsFiddle： http: //jsfiddle.net/CCkFs/

ただし、jQueryを使用してdivを作成するオーバーヘッドがあります。少しハッキーですが、動作します。

Answer 6

でできることとできないことを見つけるための最善の方法DocumentFragmentは、そのプロトタイプを調べることです。

const newFrag = document.createDocumentFragment();  
const protNewFrag = Object.getPrototypeOf( newFrag );
console.log( '£ protNewFrag:' ); 
console.log( protNewFrag ); 

私は得る

DocumentFragmentPrototype {getElementById：getElementById（）、querySelector：querySelector（）、querySelectorAll：querySelectorAll（）、prepend：prepend（）、append：append（）、children：Getter、firstElementChild：Getter、lastElementChild：Getter、childElementCount：Getter、1 more …}

...これは私が次のようなことができることを教えてくれます：

const firstChild = newFrag.children[ 0 ];

PSこれは機能しません：

const firstChild = Object.getPrototypeOf( newFrag ).children[ 0 ];

...「オブジェクトはDocumentFragmentインターフェイスを実装していません」と表示されます

Answer 7

以下にリストされている外部ソースは、次のコードスニペットを示しています。

var textblock=document.createElement("p")
textblock.setAttribute("id", "george")
textblock.setAttribute("align", "center")

これは、オブジェクトのIDパラメータを設定する別の方法を表示します。

Javascriptキット-ドキュメントオブジェクトメソッド

Answer 8

私のDOMには、要素タグの下に＃document-fragmentがあります。

これは私が使用しているものです（jQueryを使用）。また、文字列にHTMLDOMがあるユースケースもあります-

 var texttemplate = $(filecontents).find('template').html();


 $(texttemplate).children()

      <p>​Super produced One​&lt;/p>​, 
      <appler-one>​&lt;/appler-one>, 
      <p>​Super produced Two​&lt;/p>, 
      <appler-two>​…​&lt;/appler-two>]

$(texttemplate).html()

                "<p>Super produced One</p>
                <appler-one></appler-one>
                <p>Super produced Two</p>
                <appler-two>
                    <p>Super produced Three</p>
                    <appler-three></appler-three>
                </appler-two>"


$(texttemplate).find("appler-one")

              [<appler-one>​&lt;/appler-one>​]