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

Question

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

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

Answer 1

何について：

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

あなたは私がgetElementByIdがそれを見つけるだろう、なぜわからないドキュメントフラグメントに作成さdivを追加しました場合を除き？

--edit

独自の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 2

はありませんDocumentFragment APIは、最小限しか言及していません。プロパティまたはメソッドは定義されていません。つまり、Node APIで定義されているプロパティとメソッドのみがサポートされています。 getElementByIdのようなメソッドはDocument APIで定義されているので、DocumentFragmentと一緒に使用することはできません。下記

Answer 3

外部ソースは、次のコードスニペットを示した：

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

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

Javascript Kit - Document Object Methods

Answer 4

NickFitzが正しいと、DocumentFragmentは恥である（標準またはブラウザで、あなたはDocumentまたはElementから期待するAPIを持っていませんが、設定できるように本当に便利だろうフラグメントのinnerHTML。

フレームワークでも、ノードがドキュメント内にある必要があり、そうでなければフラグメントに存在しないコンテキストノードのメソッドを使用する傾向があるので、ここでは役に立ちません。あなた自身：例：

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 5

これらの答えのすべてがquerySelectorAllとquerySelectorが広く利用できなかった背中から、かなり古いです。 CSSセレクタをパラメータとして受け入れるこれらの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 6

の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 7

私のDOMは、要素タグの下に＃文書断片を持っています。見つけるためにはるかに

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


$(texttemplate).children() 

     <p>​Super produced One​</p>​, 
     <appler-one>​</appler-one>, 
     <p>​Super produced Two​</p>, 
     <appler-two>​…​</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>​</appler-one>​] 

Answer 8

最良の方法は何をすることができますと -

この

は、私はまた、私は、私は文字列にHTMLのDOMを持つユースケースを持っている、（jQueryのを使用して）使用していますものです DocumentFragmentを行うことができないそのプロトタイプを検討することである。

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

私は

DocumentFragmentPrototype {getElementByIdをを取得します： getElementByIdを（）、 querySelector：querySelector（）、querySelectorAll：querySelectorAll（）、 プリペンド：プリペンド（）は、追加します（追加）、子供：ゲッター、 firstElementChild：ゲッター、lastElementChild：ゲッター、 childElementCount：ゲッター、1よりこれは動作しません

const firstChild = newFrag.children[ 0 ]; 

PS：

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

を私のようなことを行うことができます私に指示...}

...

...「オブジェクトにDocumentFragmentインターフェイスが実装されていません」というメッセージが表示されます