<textarea id="runcode39565"><!doctype html> <ptml lang= "en" > <pead> <meta charset= "Utf-8"/> <meta content= "Ie=8" http-equiv= "x-ua-compatible"/> <title> node collection by Masaki </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.createdocumentfrag ment (); 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)} </script> </pead> <body> <div id= "AAA" > <p class= "AAAA" > Masaki </p> <p class= "AAA A "> Masaki </p> <p class=" AAAA "> Masaki </p> <p class=" AAAA "> Masaki </p> <p class=" AAAA " > Masaki </p> </div> </body> </ptml></textarea>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
If you convert nodelist to an array in advance, there is no problem!
Copy Code code as follows:
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<n;i++) {
Arr.push (C[i])
}
for (Var i=0,n=arr.length;i<n;i++) {
Alert (Arr[i] + "" + i)
D.appendchild (Arr[i])
}
Div.parentNode.replaceChild (D,div)
}
<!doctype html> <ptml lang= "en" > <pead> <meta charset= "Utf-8"/> <meta content= "ie=8" htt p-equiv= "x-ua-compatible"/> <title> node collection by Masaki </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.createdocumentfrag ment (); var div = document.getElementById ("AAA"); var c = div.childnodes; var arr = []; for (Var i=0,n=c.length;i<n;i++) {Arr.push (c[i])} for (Var i=0,n=arr.length;i<n;i++) {alert (Arr[i] + "" + i) d.a Ppendchild (Arr[i])} div.parentNode.replaceChild (D,div)} </script> </pead> <body> <div id= "AA A "> <p class=" AAAA "> Masaki </p> <p class=" AAAA "> Masaki </p> <p class=" AAAA "> Masaki </p > <p class= "AAAA" > Masaki </p> <p class= "AAAA" > Masaki </p> </div> </body> </HTML&G T
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
Apparently, NodeList also has some strange features that are not in the array. From Run box 2, we can see that the node appendchild to the document fragment, in fact, it will be stripped out of the DOM tree, nodelist must be tracking this change, dynamic change itself, and the line accumulator I can not correspond to the correct index of the node! So every time we get a firstchild, it's OK.
Copy Code code as follows:
Window.onload = function () {
var d = document.createdocumentfragment ();
var div = document.getElementById ("AAA");
var c = div.childnodes;
while (c.length) D.appendchild (c[0])//Only the first node is fetched at a time, until it is empty
Div.parentNode.replaceChild (D,div)
}
<textarea id="runcode9253"><!doctype html> <ptml lang= "en" > <pead> <meta charset= "Utf-8"/> <meta content= "Ie=8" http-equiv= "x-ua-compatible"/> <title> abnormal childnodes by Masaki </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.createdocumentfrag ment (); var div = document.getElementById ("AAA"); var c = div.childnodes; while (c.length) D.appendchild (c[0])//only takes its first node at a time, until it is empty div.parentNode.replaceChild (d,div)} </script> </pead > <body> <div id= "AAA" > <p class= "AAAA" > Masaki </p> <p class= "AAAA" > Masaki </p> < P class= "AAAA" > Masaki </p> <p class= "AAAA" > Masaki </p> <p class= "AAAA" > Masaki </p> </div& Gt </body> </ptml></textarea>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
Incidentally, the htmlcollection made by getElementsByTagName is the same, so it's a Shipi spirit to handle such a collection of nodes!
<textarea id="runcode48774"><!doctype html> <ptml lang= "en" > <pead> <meta charset= "Utf-8"/> <meta content= "Ie=8" http-equiv= "X-ua-compatible"/> <title>htmlcollection by Masaki </title> <style> #aaa {padding:10p X border:1px solid red; } p {border:1px solid blue; } </style> <script type= "Text/javascript" > window.onload = function () {var d = Document.createdocumentfrag ment (); 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)} </script> </pead> <body> <div id= "AAA" > <p clas s= "AAAA" > Masaki </p> <p class= "AAAA" > Masaki </p> <p class= "AAAA" > Masaki </p> <p class= " AAAA "> Masaki </p> <p class=" AAAA "> Masaki </p> </div> </body> </ptml></textarea>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
These two kinds of nodes are also implemented in different browsers, such as standard browser we can use Array.prototype.slice.call to convert them to a native array, ie is an error. Standard browsers have hasOwnProperty and valueof, and IE are not ...
