Notes for getting a set of child elements in JS

Let's just look 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>

I want to use js to get the four sub-elements under UL and write the following code:

 

1 var objs = Document. getelementsbytagname ("Ul") [0]. All;
2 For (VAR I = 0; I <objs. length; I ++ ){
3 alert (objs [I]. innerhtml );
4}

 

Test results: it runs normally in IE and opera, but does not respond in Firefox and Google Chrome. The trace shows that Firefox and chrome do not have the "all" attribute.

 

1 var objs = Document. getelementsbytagname ("Ul") [0]. Children;
2 For (VAR I = 0; I <objs. length; I ++ ){
3 alert (objs [I]. innerhtml );
4}

Tests show that IE, opera, and chrome are running normally, but they still cannot run in Firefox. The tracing shows that Firefox still does not have the children attribute.

1 var objs = Document. getelementsbytagname ("Ul") [0]. childnodes;
2 For (VAR I = 0; I <objs. length; I ++ ){
3 alert (objs [I]. innerhtml );
4}

 

The test showed that both IE and opera run normally, but in Firefox and chrome, an array with a length of 9 is obtained, five "\ n" more than IE and opera ". Query the information as follows:

All returns the reference of the element set contained in the object.
Childnodes obtains the set of HTML elements and textnode objects that are directly descendant of a specified object.
Children obtains the set of DHTML objects that are directly descendant of objects.

This verifies the test results for five "\ n" in Firefox and chrome ".

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

1 <ul> <li> This's one </LI> <li> This's two </LI> <li> This's three </LI> <li> this's four </LI> </ul>

　　

Conclusion: If you want to get all the sub-elements under an element in JS, the best way is to use the childnodes attribute. As for the linefeed in the middle of the layout, because it is obtained in both Firefox and chrome, you can use the obtained child element to make judgments. My solution is as follows. Have a better way to clarify your suggestions!

 

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}