| <html> |
| <head> |
| <script> |
| function doit() |
| { |
| var ele = document.getElementById( 'test' ); |
| var output= document.getElementById( 'output' ); |
| |
| output.innerHTML += 'children.length = ' + ele.children.length + ' (should be 5 DIV nodes below)<br>'; |
| |
| for( i = 0; i < ele.children.length; i++ ) { |
| output.innerHTML += ' node: ' + ele.children[i].nodeName + ' (' + ele.children[i].id + ')<br>'; |
| } |
| |
| output.innerHTML += '<br>childNodes.length = ' + ele.childNodes.length + ' (should be 11 nodes below)<br>'; |
| |
| for( i = 0; i < ele.childNodes.length; i++ ) { |
| output.innerHTML += ' node: ' + ele.childNodes[i].nodeName + ' (' + ele.childNodes[i].id + ')<br>'; |
| } |
| } |
| </script> |
| </head> |
| <body onload="doit()"> |
| <div style="border: 1px solid red"> |
| <p> |
| This test verifies that JavaScript returns only direct descendent element nodes in the 'children' collection (an IE extension). |
| We also verify that the 'childNodes' collection contains direct descendent nodes of any type (text, element, etc.) |
| </p> |
| </div> |
| <div id="test"> |
| <div id="one"><b>test</b> <u>non bold</u> <i>italic</i> test</div> |
| <div id="two">plain text</div> |
| <div id="three">another line</div> |
| <div id="four">yet another line</div> |
| <div id="five"><span>fifth <b>line</b></span></div> |
| </div> |
| <div id="output"> |
| <br>Results: |
| </div> |
| </body> |
| </html> |