LayoutTests/fast/dom/children-nodes.html - WebKit - Git at Google

 <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 += '&nbsp;&nbsp;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 += '&nbsp;&nbsp;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>
	<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>