A note of Child in MSIE and Crome

docco · 09-13-2012, 05:07 PM

With the same method to calculate the number of Child in DOM, I have the different results in MSIE and in Crome. MSIE throws the right result while Crome throws the wrong. Please check the code below to see:

Code:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>calculate Child Number</title>
</head>
<body>
<script type="text/javascript"> 
itemarray = new Array(); 
itemarray[100] = 'This is Item 100'; 

function addtocart(ref) { 
var parentel = document.getElementById('itemlist'); 
newrow = document.createElement('div'); 
newrow.innerHTML = itemarray[ref.id]; 
parentel.appendChild(newrow); 
} 
function getParentLength() {
var parente = document.getElementById('itemlist');
var nodes=parente.childNodes;
alert(nodes.length);
}
</script> 
<p><button id="100" onclick="addtocart(this);return false;">add Hat 100</button></p>
<p><button onclick="getParentLength()">Check number of Child</button></p>
<h2>Your cart:</h2> 
<div id="itemlist"> 
</div> 
</body>
</html>

Anyone have any idea?

DaveyErwin · 09-13-2012, 05:34 PM

Yes the numbers are different
but they are both correct,
browsers other than IE add
an empty text node to
empty divs

Code:

 
function getParentLength() {
 var parente = document.getElementById('itemlist');
 var nodes=parente.childNodes;
 alert(nodes.length);
 a="";
 for(var i=0; i<nodes.length; i++)
  a += nodes[i].nodeType +"\n"
 alert(a)
}

felgall · 09-13-2012, 10:28 PM

If you want to get the same answer in all browsers when counting nodes then you need to get rid of all the blank text nodes first and also combine any adjacent text nodes into single text nodes.

See http://javascriptexample.net/dom36.php for a function that you can run that will do this for you.

xelawho · 09-13-2012, 10:38 PM

depending on what you are trying to do, you may be better testing for children:

Code:

function getParentLength() {
var parente = document.getElementById('itemlist');
var chil=parente.children;
alert(chil.length);
}

(returns consistent in IE, Chrome and FF, except IE<9 counts an inline comment in the html as 1...)

rdspoons · 09-15-2012, 02:20 AM

felgall,

PM was disabled. The normalizeAll function code located at http://javascriptexample.net/dom36.php
has unballanced parentheses in the first conditional. Maybe a type-0?

The conditional in question is repeated below for clarity:

Code:

if((3 === c.nodeType && !/\S/.test(c.nodeValue))) || 8 === c.nodeType) {
	node.removeChild(child);
}