Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder
    Join Date
    Aug 2012
    Posts
    121
    Thanks
    18
    Thanked 0 Times in 0 Posts

    A note of Child in MSIE and Crome

    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?

  • #2
    Regular Coder
    Join Date
    Aug 2010
    Posts
    945
    Thanks
    19
    Thanked 205 Times in 203 Posts
    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)
    }

  • #3
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,472
    Thanks
    0
    Thanked 634 Times in 624 Posts
    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.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #4
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,774
    Thanks
    55
    Thanked 518 Times in 515 Posts
    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...)
    Last edited by xelawho; 09-13-2012 at 10:44 PM. Reason: IE disclaimer

  • #5
    New Coder
    Join Date
    Jun 2009
    Posts
    81
    Thanks
    0
    Thanked 8 Times in 8 Posts
    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);
    }


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •