SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Evangelist stef25's Avatar
    Join Date
    Nov 2004
    Location
    belgium
    Posts
    465
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    simple DOM tree question

    i have the code below on a small testpage. there is one div with id="testing". inside the div are two images. when i mouseover the first image i want to get the alert. i get no error messages in firebug (a debugging extension for FF) but no alert either.

    however, firebug says that "testing" has 5 child nodes and it says firstChild is
    Code:
    [Text] "\n"
    so i my code below really targetting the image?

    Code:
    <script type="text/javascript" >
    /*the function*/
    function popup () {
    	window.alert ("yeeeeey");
    }
    /*grab the child, the image*/
    var child_node = document.getElementById("testing").childNodes.item(0);
    /*attach eventlistener*/
    child_node.addEventListener ('mouseover',popup,false);
    </script>
    I need someone to protect me from
    all the measures they take in order to protect me

  2. #2
    SitePoint Enthusiast Tygatur's Avatar
    Join Date
    Apr 2006
    Location
    Germany
    Posts
    53
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I would rather write childNodes[0] than item(0).
    (what's this item function anyway? )

    Use an ID Attribute for your images or document.getElementsByTagName.
    to code or not to code ?
    that's too much of a question for a signature.

  3. #3
    SitePoint Evangelist stef25's Avatar
    Join Date
    Nov 2004
    Location
    belgium
    Posts
    465
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    the code is generated by my CMS and im unable to add classes to the images. getting all the page's img tags is not specific enough. i have to get it via the its parent node. im trying to change the opacity of the image as i mouseover but first im just trying to get at the image. im using the sitepoint dhtml book as a guide.

    what you propose is the same as what i wrote, see http://www.pageresource.com/dhtml/ryan/part4-1.html

    its definitely a DOM problem because the line below, sans the childnode bit works. so why is the image not the first child of the div?

    Code:
    var child_node = document.getElementById("testing");
    I need someone to protect me from
    all the measures they take in order to protect me

  4. #4
    SitePoint Evangelist stef25's Avatar
    Join Date
    Nov 2004
    Location
    belgium
    Posts
    465
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    right - FF interprets a line break as a child element and i have to use [1] to get at the first image. IE does not interpret that as such and there i have to use [0]

    using the line below gets around that problem.

    Code:
    document.getElementById("testing").getElementsByTagName("img")[0]
    why oh why this isnt mentioned in sitepoint's dhtml book (the inspiration for this script) is completely beyond me.
    I need someone to protect me from
    all the measures they take in order to protect me

  5. #5
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Each Node in the DOM has a nodeType property which has values such as:

    ELEMENT_NODE = 1
    ATTRIBUTE_NODE = 2
    TEXT_NODE = 3

    See Node reference for details.

    Save the following as a file and load it into Firefox/Mozilla then inspect it with the DOM Inspector. You'll see how it puts all whitespace and text into #text nodes. These nodes have nodeType == 3. Element nodes will have nodeType == 1.
    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <html>
    <head>
    </head>
    <body>
    
    <p>
      This is text before the span.
      <span>This is text in the span.</span>
      This is text after the span.
    </p>
    
    </body>
    </html>
    Use the nodeType property when iterating through the DOM (node tree). As an example, the following is a function I wrote to make it easier to do just what you are talking about - get the first child that is an Element node:
    Code:
    // Part of X, a Cross-Browser Javascript Library, Distributed under the terms of the GNU LGPL
    
    function xFirstChild(e, t)
    {
      var c = e ? e.firstChild : null;
      if (t) while (c && c.nodeName != t) { c = c.nextSibling; }
      else while (c && c.nodeType != 1) { c = c.nextSibling; }
      return c;
    }
    For usage details and related X functions:
    xFirstChild()
    xNextSib()
    xPrevSib()


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
  •