SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Hybrid View

  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,941
    Mentioned
    215 Post(s)
    Tagged
    12 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,830
    Mentioned
    25 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
  •