SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Hybrid View

  1. #1
    SitePoint Enthusiast dineroking's Avatar
    Join Date
    Nov 2008
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Beginner in JavaScript has question...

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>DOMinating JavaScript</title>
    </head>
    <body>
    <h1 id="pageTitle">
    DOMinating JavaScript
    </h1>
    <p>
    If you need some help with your JavaScript, you might like
    to read articles from:
    </p>
    <ul id="test">
    <li><a href="http://www.danwebb.net/" rel="external">Dan Webb</a></li>
    <li><a href="http://www.quirksmode.org/" rel="external">PPK</a></li>
    <li><a href="http://adactio.com/" rel="external">Jeremy Keith</a></li>
    </ul>
    <script type="text/javascript" src="example.js"></script>
    </body>
    </html>

    If I try this code the alert I get in the browser is object Text
    var test=document.getElementById("test");
    var testChild=test.childNodes[0];
    alert(testChild);

    If I try this code the alert I get in the browser is object HTMLLIELEMENT
    var test=document.getElementById("test");
    var testChild=test.childNodes[1];
    alert(testChild);

    If I try this code the alert I get in the browser is object Text
    var test=document.getElementById("test");
    var testChild=test.childNodes[2];
    alert(testChild);

    If I try this code I get no alert
    var test=document.getElementById("test");
    var testChild=test.childNodes[childNodes.length-1];
    alert(testChild);

    I was expecting all of the alerts to come back with LI but I do not know why that was not the result for all of them.

    Help please.

    Thank you.

    Ronny

  2. #2
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    childNodes is a little deceiving when you first come across it. You'd think it would just get child elements.

    What's easy to overlook is that childNodes actually gets child text nodes as well. (Because newlines and spaces between tags are considered text nodes).

    If you want to just get the child elements (i.e. the <li>s) try using the .children property instead
    https://developer.mozilla.org/en/DOM/Element.children
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  3. #3
    SitePoint Enthusiast dineroking's Avatar
    Join Date
    Nov 2008
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I tried the following code with no results

    var test=document.getElementById("test");
    var testChild=test.children[children.length-1];
    alert(testChild);

  4. #4
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Ah, that's because when you try to get the children.length, children isn't defined, you would have to use test.children.length

    What browser are you working in? If you're in Firefox, I would highly recommend installing Firebug. If you're in Chrome or Opera, they have built-in developer tools you can use. (Paul Irish did a video a little while ago with some tips for the Chrome dev tools that might be worth watching.)
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  5. #5
    SitePoint Enthusiast dineroking's Avatar
    Join Date
    Nov 2008
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks a lot for your help after some tries I came up with this and I got the result I wanted.

    var list = document.getElementById("test");
    var listItems = list.children;
    for (i=0; i<listItems.length;i++)
    {
    alert(listItems[i].nodeName)
    }


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
  •