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
    966
    Thanks
    19
    Thanked 211 Times in 209 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,592
    Thanks
    0
    Thanked 645 Times in 635 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,885
    Thanks
    56
    Thanked 539 Times in 536 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
    •