SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Nov 2012
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    how to get child of the element?

    for example:

    <div id="asd">
    <p>blabla</p>
    </div>

    the list below wont work

    document.getElementById("asd").firstChild.style.visibility = "hidden";

    document.getElementById("asd").childNodes[0].style.visibility = "hidden";

    im out of ideas XD

    any help?

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,312
    Mentioned
    178 Post(s)
    Tagged
    8 Thread(s)
    Hi Vincent,

    Welcome to the forums!

    The problem is that some browsers will treat a newline as the first child inside a <div>.
    That is why your code isn't working.
    To see what I mean try running your code with the following HTML (without spaces):

    HTML Code:
    <div id="asd"><p>blabla</p></div>
    Anyway, that doesn't help you much in the real world.
    The best thing to do is to use a simple function to get the firstChild, but which ignores textNodes:

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>firstChild example</title>
      </head>
      
      <body>
        <div id="asd">
          <p>blabla</p>
        </div>
        
        <script>
          function getFirstChild(el){
            var firstChild = el.firstChild;
            while(firstChild != null && firstChild.nodeType == 3){ // skip TextNodes
              firstChild = firstChild.nextSibling;
            }
            return firstChild;
          }
          
          var asd = document.getElementById("asd");
          getFirstChild(asd).style.visibility = "hidden";
        </script>
      </body>
    </html>
    Source: http://stackoverflow.com/questions/2...n-object-in-ff

  3. #3
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,598
    Mentioned
    24 Post(s)
    Tagged
    1 Thread(s)
    Alternatively hide the text nodes as well (assuming you want everything inside the div to be hidden:

    Code:
    ch = document.getElementById("asd").childNodes;
    for (i =ch.length-1, i >= 0; i--) ch[i].style.visibility = "hidden";
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">


Tags for this Thread

Bookmarks

Posting Permissions

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