SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Evangelist GeekSupport's Avatar
    Join Date
    May 2002
    Location
    Southern California
    Posts
    408
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Getting text value from childNodes (ref Simply Javascript)

    Hi All,

    I'm going through Simply Javascript and I'm having trouble getting the value of a childNode (is it possible?). What I am doing is out of the scope of what it was currently teaching me (I think) -- getting the actual value of the node.

    Code:
    <ul id="baldwins">
      <li>Alec</li>
      <li>Daniel</li>
      <li>William</li>
      <li>Stephen</li>
    </ul>
    
    <script type="text/javascript">
    var baldwins = document.getElementById("baldwins");
    var william = baldwins.childNodes[2];
    
    document.write(william.nodeValue); // FireBug DOM says it's "\n      "
    document.write(william) // page displays [object Text]
    document.write(william.nodeName) // page displays #text
    </script>
    Can someone help point me in the right direction? I just want it to display William.

    Thanks

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Inbetween the different elements are whitespace, which most browsers also allow you to reference, IE being the exception.

    So in some browsers the 5th element is the third element

    • 0 - whitespace
    • 1 - 1st li
    • 2 - whitespace
    • 3 - 2nd li
    • 4 - whitespace
    • 5 - 3rd li
    • 6 - whitespace


    Whereas in other browsers, the 2nd element is what you're after.

    • 0 - 1st li
    • 1 - 2nd li
    • 2 - 3rd li


    A safer way to get the element you're after is to use getElementsByTagName instead

    The other problem that you've facing is that the LI element doesn't actually have a value in and of itself. You'll be needing the childNode of the LI element, that being the text node itself.

    Code javascript:
    var baldwins = document.getElementById("baldwins");
    var william = baldwins.getElementsByTagName('LI')[2];
     
    document.write(william.firstChild.nodeValue); // William
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Evangelist GeekSupport's Avatar
    Join Date
    May 2002
    Location
    Southern California
    Posts
    408
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul, this works great!

  4. #4
    SitePoint Evangelist GeekSupport's Avatar
    Join Date
    May 2002
    Location
    Southern California
    Posts
    408
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I was going through it more, and just wondered if there was a way to easily go through the list and their siblings using firstChild, lastChild, nextSibling, previousSibling?

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    When you're dealing with html code you're going to run into the whitespace by using those techniques.

    You can alternatively use something like the following to process the contents of all the LI elements.

    Code javascript:
    var els = baldwins.getElementsByTagName('LI');
    for (var i = 0; i < els; i++) {
        document.write(els.firstChild.nodeValue);
    }
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  6. #6
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There is also the possibility to use the DOM 2 Traversal TreeWalker.

    It is very powerful and allows you choose what kind of elements you want returned, run a filter on each element etc.

    Maybe an overkill for this example, but it this would give you what you want:
    Code JavaScript:
    var ul = document.getElementsByTagName("ul")[0];
    var treeWalker = document.createTreeWalker(ul, NodeFilter.SHOW_ELEMENT, null, false);
     
    while (treeWalker.nextNode()) {
    	alert(treeWalker.currentNode.textContent);
    }

    What is the catch with this? It's not implemented in IE...
    Last edited by Pepejeria; May 7, 2008 at 03:03.


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
  •