var oFra = document.createDocumentFragment();
// oFra.[add elements];
document.createElement("div").id="myId";
oFra.getElementById("myId"); //not in FF
ドキュメントにフラグメントを添付する前に「myId」を取得するにはどうすればよいですか?
var oFra = document.createDocumentFragment();
// oFra.[add elements];
document.createElement("div").id="myId";
oFra.getElementById("myId"); //not in FF
ドキュメントにフラグメントを添付する前に「myId」を取得するにはどうすればよいですか?
これらの答えはすべてかなり古く、当時から広く利用可能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
}
}
いいえDocumentFragment
。APIは控えめに言っても最小限です。つまり、APIはプロパティやメソッドを定義しません。つまり、Node
APIで定義されたプロパティとメソッドのみをサポートします。のようなメソッドはAPIgetElementById
で定義されているため、。と一緒に使用することはできません。Document
DocumentFragment
NickFitzは正しいですが、標準またはブラウザにDocumentFragment
期待するAPIがありません(これは残念です。フラグメントを設定できると非常に便利です。Document
Element
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
どうですか:
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);
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を作成するオーバーヘッドがあります。少しハッキーですが、動作します。
でできることとできないことを見つけるための最善の方法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インターフェイスを実装していません」と表示されます
以下にリストされている外部ソースは、次のコードスニペットを示しています。
var textblock=document.createElement("p")
textblock.setAttribute("id", "george")
textblock.setAttribute("align", "center")
これは、オブジェクトのIDパラメータを設定する別の方法を表示します。
私のDOMには、要素タグの下に#document-fragmentがあります。
これは私が使用しているものです(jQueryを使用)。また、文字列にHTMLDOMがあるユースケースもあります-
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>]