Considerations for getting the child elements collection of elements in JS

Http://www.cnblogs.com/phonefans/archive/2008/09/04/1283739.html in JS to get the elements of the collection of child elements considerations

Crap less, look directly at the example:

1 <ul>
2 <li>this ' s one</li>
3 <li>this ' s two</li>
4 <li>this ' s three</li>
5 <li>this ' s four</li>
6 <ul>

Want to use JS to get UL under the four sub-elements, start my code so write:

1 var objs = document.getElementsByTagName ("ul") [0].all;
2 for (Var i=0;i<objs.length;i++) {
3 alert (objs[i].innerhtml);
4}

Test Result: It works in IE and opera, but not in Firefox or Google Chrome. By tracking it, there is no property in Firefox or Chrome.

1 var objs = document.getElementsByTagName ("ul") [0].children;
2 for (Var i=0;i<objs.length;i++) {
3 alert (objs[i].innerhtml);
4}

The test found that both ie, opera and chrome are working, but still not working in Firefox. Tracking, Firefox still has no children this attribute.

1 var objs = document.getElementsByTagName ("ul") [0].childnodes;
2 for (Var i=0;i<objs.length;i++) {
3 alert (objs[i].innerhtml);
4}

Test found in IE, opera is working normally, but in Firefox and Chrome will get an array of length 9, more than IE and opera 5 more "\ n". Check the following information:

All returns a reference to the collection of elements contained by the object.
ChildNodes gets a collection of HTML elements and Textnode objects that are direct descendants of the specified object.
Children gets the collection of DHTML objects as direct descendants of the object.

This verifies the results of the test and why Firefox and Chrome have 5 more "\ n".

So if you change the HTML to the following, four browsers will work.

1 <ul><li>this ' s One</li><li>this's two</li><li>this ' s Three</li><li >this ' s four</li></ul>

　　

Summary: If you want all the child elements under an element in JS, the best way to do this is to use the ChildNodes property. As for the line break in the middle of the layout because it is available in both Firefox and Chrome, you can use the resulting child elements to judge. Finally my plan is as follows. There is a better way to clear advice!

1 var objs = document.getElementsByTagName ("ul") [0].childnodes;
2 for (Var i=0;i<objs.length;i++) {
3 if (objs[i].tagname! = "LI") continue;
4 alert (objs[i].innerhtml);
5}

Considerations for getting the child elements collection of elements in JS