変態のノード集合
3930 ワード
今日jQueryのunwrap効果を実現したいのは、言い換えれば、その子で親ノードを殺すことです.効率的にドキュメントの破片を使用し、子供を取るときにchildNodesに使用します(nodeListを返します)
実行コード
nodeListを配列に変換しておけば問題ありません!
<p>実行コード</p>
<p>nodeListの奇妙な特性は配列にないことは明らかだ.実行ボックス2では、ノードappendChildをドキュメントの破片にすると、実際にはDOMツリーから剥離されることがわかります.nodeListはこの変化を追跡し、それ自体を動的に変更しますが、直線的に追加されたiは正しいノードに対応できないインデックスです.だから私たちはそのfirstChildを手に入れるたびにいいです.</p>
<pre><code class="language-javascript">
window.onload = function(){
var d = document.createDocumentFragment();
var div = document.getElementById("aaa");
var c = div.childNodes;
while(c.length)d.appendChild(c[0])/毎回最初のノードだけを空にするまで取ります
div.parentNode.replaceChild(d,div)
}
</code></pre> <!doctype html> <html lang="en"> <head> <meta charset="utf-8"/> <meta content="IE=8"http-equiv="X-UA-Compatible"/> <title>変態のchildNodes by司徒正美</title> <style> #aaa { padding:10px; border:1px solid red; } p { border:1px solid blue; } </style> <script type="text/javascript"> window.onload=function(){var d=document.createDocumentFragment();var div=document.getElementById("aaa");var c=div.childNodes;while(c.length)d.appendChild(c[0])/毎回div.parentNode.replaceChild(d,div)}司徒正美司徒正美司徒正美司徒正美司徒正美徒正美徒正美
実行コード
ちなみにgetElementsByTagNameが取得したHTML Collectionもそうなので、このようなノードの集合を処理するには十二分の精神が必要です!HTML Collection by司徒正美#aaa{padding:10 px;border:1 px solid red;}p { border:1px solid blue; } window.onload = function(){ var d = document.createDocumentFragment(); var div = document.getElementById("aaa"); var c = document.getElementsByTagName("p") for(var i=0,n=c.length;i<n;i++){ alert(c[i] + ""+ i) d.appendChild(c[i]) } div.parentNode.replaceChild(d,div)}司徒正美司徒正美司徒正美司徒正美司徒正美
実行コード
この2つのノードの集合は各ブラウザではあまり実現されていません.標準ブラウザではArrayを使用することができます.prototype.slice.callはそれらをオリジナル配列に変換し,IEはエラーを報告する.標準ブラウザにはhasOwnPropertyとvalueOfがありますが、IEにはありません.
by
window.onload = function(){
var d = document.createDocumentFragment();
var div = document.getElementById("aaa");
var c = div.childNodes;
for(var i=0,n=c.length;i<n;i++){
alert(c[i] + " "+ i)
d.appendChild(c[i])
}
div.parentNode.replaceChild(d,div)
}
実行コード
nodeListを配列に変換しておけば問題ありません!
window.onload = function(){
var d = document.createDocumentFragment();
var div = document.getElementById("aaa");
var c = div.childNodes;
var arr = [];
for(var i=0,n=c.length;i<p>実行コード</p>
<p>nodeListの奇妙な特性は配列にないことは明らかだ.実行ボックス2では、ノードappendChildをドキュメントの破片にすると、実際にはDOMツリーから剥離されることがわかります.nodeListはこの変化を追跡し、それ自体を動的に変更しますが、直線的に追加されたiは正しいノードに対応できないインデックスです.だから私たちはそのfirstChildを手に入れるたびにいいです.</p>
<pre><code class="language-javascript">
window.onload = function(){
var d = document.createDocumentFragment();
var div = document.getElementById("aaa");
var c = div.childNodes;
while(c.length)d.appendChild(c[0])/毎回最初のノードだけを空にするまで取ります
div.parentNode.replaceChild(d,div)
}
</code></pre> <!doctype html> <html lang="en"> <head> <meta charset="utf-8"/> <meta content="IE=8"http-equiv="X-UA-Compatible"/> <title>変態のchildNodes by司徒正美</title> <style> #aaa { padding:10px; border:1px solid red; } p { border:1px solid blue; } </style> <script type="text/javascript"> window.onload=function(){var d=document.createDocumentFragment();var div=document.getElementById("aaa");var c=div.childNodes;while(c.length)d.appendChild(c[0])/毎回div.parentNode.replaceChild(d,div)}司徒正美司徒正美司徒正美司徒正美司徒正美徒正美徒正美
実行コード
ちなみにgetElementsByTagNameが取得したHTML Collectionもそうなので、このようなノードの集合を処理するには十二分の精神が必要です!HTML Collection by司徒正美#aaa{padding:10 px;border:1 px solid red;}p { border:1px solid blue; } window.onload = function(){ var d = document.createDocumentFragment(); var div = document.getElementById("aaa"); var c = document.getElementsByTagName("p") for(var i=0,n=c.length;i<n;i++){ alert(c[i] + ""+ i) d.appendChild(c[i]) } div.parentNode.replaceChild(d,div)}司徒正美司徒正美司徒正美司徒正美司徒正美
実行コード
この2つのノードの集合は各ブラウザではあまり実現されていません.標準ブラウザではArrayを使用することができます.prototype.slice.callはそれらをオリジナル配列に変換し,IEはエラーを報告する.標準ブラウザにはhasOwnPropertyとvalueOfがありますが、IEにはありません.