Home > Developer > JavaScript
<! Doctype html> <ptml lang = "en"> <pead> <meta charset = "UTF-8"/> <meta content = "IE = 8" http-equiv = "X-UA -Compatible "/> <title> node set by situ zhengmei </title> <style> # aaa {padding: 10px; border: 1px solid red;} p {border: 1px solid blue ;} </style> </pead> <body> <p class = "aaaa"> situ zhengmei </p> <p class = "aaaa"> situ zhengmei </p> <p class = "aaaa"> situ zhengmei </p> <p class = "aaaa"> situ zhengmei </p> <p class = "aaaa"> situ zhengmei </p> </body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
If you convert nodeList to an array in advance, there is no problem!
Copy codeThe Code is 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" http-equiv = "X-UA -Compatible "/> <title> node set by situ zhengmei </title> <style> # aaa {padding: 10px; border: 1px solid red;} p {border: 1px solid blue ;} </style> </pead> <body> <p class = "aaaa"> situ zhengmei </p> <p class = "aaaa"> situ zhengmei </p> <p class = "aaaa"> situ zhengmei </p> <p class = "aaaa"> situ zhengmei </p> <p class = "aaaa"> situ zhengmei </p> </body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
Obviously, nodeList still has some strange features that are not available in arrays. From the running box 2, we can see that the node appendChild will actually be removed from the DOM tree when it reaches the File Fragment. nodeList must follow this change, it dynamically changes itself, and the linear increments of I cannot correspond to the correct node index! So we can get its firstChild every time.
Copy codeThe Code is 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 obtain the first node at a time until it is null.
Div. parentNode. replaceChild (d, div)
}
<! Doctype html> <ptml lang = "en"> <pead> <meta charset = "UTF-8"/> <meta content = "IE = 8" http-equiv = "X-UA -Compatible "/> <title> abnormal childNodes by SITU zhengmei </title> <style> # aaa {padding: 10px; border: 1px solid red;} p {border: 1px solid blue ;} </style> </pead> <body> <p class = "aaaa"> situ zhengmei </p> <p class = "aaaa"> situ zhengmei </p> <p class = "aaaa"> situ zhengmei </p> <p class = "aaaa"> situ zhengmei </p> <p class = "aaaa"> situ zhengmei </p> </body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
By the way, the HTMLCollection obtained by getElementsByTagName also looks like this. Therefore, it takes 12 minutes to process such node sets!
<! Doctype html> <ptml lang = "en"> <pead> <meta charset = "UTF-8"/> <meta content = "IE = 8" http-equiv = "X-UA -Compatible "/> <title> HTMLCollection by SITU zhengmei </title> <style> # aaa {padding: 10px; border: 1px solid red;} p {border: 1px solid blue ;} </style> </pead> <body> <p class = "aaaa"> situ zhengmei </p> <p class = "aaaa"> situ zhengmei </p> <p class = "aaaa"> situ zhengmei </p> <p class = "aaaa"> situ zhengmei </p> <p class = "aaaa"> situ zhengmei </p> </body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
These two node sets are not quite implemented in different browsers. For example, in standard browsers, we can use Array. prototype. slice. call to convert them into Native arrays, and IE reports an error. Standard browsers have hasOwnProperty and valueOf, While IE does not ......
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
