SitePoint Sponsor

User Tag List

Results 1 to 9 of 9

Thread: childNodes

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

    childNodes

    in the code below, should link1 not be the <p> element? my code reacts when i attach an event listener to col2.childNodes[1], but when i use col2.childNodes[2] or [3], nothing happens.

    HTML:
    Code:
    <div id="col2">
    	<h2>text</h2>
    	<p><a href="#">text</a></p>
    	<img id="img1" src="# height="120" width="120" />
    </div>
    JS:
    Code:
    /*get the parent node*/
    var col2 = document.getElementById("col2");
    
    /*get the first link*/
    var link1 = col2.childNodes[2];
    I need someone to protect me from
    all the measures they take in order to protect me

  2. #2
    do righteous deeds
    Join Date
    Aug 2006
    Location
    Türkiye Turkey تركيى
    Posts
    266
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
      
    <div id="col2"><h2>text</h2><p><a href="#">text</a></p><img id="img1" src="# height="120" width="120" /></div>
    
    <script type="text/javascript">
    
    /*get the parent node*/
    var col2 = document.getElementById("col2");
    
    alert(col2.childNodes.length); // 3
    
    alert(col2.childNodes[0].nodeName) ;  // H2
    alert(col2.childNodes[1].nodeName) ;  // P
    alert(col2.childNodes[2].nodeName) ;  // IMG
    
    
    alert(col2.childNodes[1].childNodes[0].nodeName)   // A
    
    alert(col2.childNodes[1].firstChild.nodeName)   // A
    
    </script>

  3. #3
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    should link1 not be the <p> element?
    Of course not. The childNodes that you can see are:

    <h2>
    <p>
    <img>

    If those elements were put in an array, their positions would be:

    <h2> ---> childNodes[0]
    <p> ----> childNodes[1]
    <img> --> childNodes[2]

    and childNodes[2] would be the <img> element.

    However, some browsers(like Firefox) form textNodes around any carriage return in your html. The carriage returns in your html are:
    Code:
    <div id="col2"> cr
    	<h2>text</h2> cr
    	<p><a href="#">text</a></p> cr
    	<img id="img1" src="# height="120" width="120" /> cr
    </div>
    So, in FF, col2 has 7 childNodes, and childNodes[2] is the third childNode which is a textNode formed by the carriage return after <h2>.

    In order to get the <p> element, you can use a loop to loop through the childNodes array until you find the first childNode with a nodeName=="P" (must be in caps).

  4. #4
    SitePoint Evangelist stef25's Avatar
    Join Date
    Nov 2004
    Location
    belgium
    Posts
    465
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    what i am trying to do is change the opacity of the img when a mouseover event happens on the p above it. ill have several of these p-img combinations so a loop is required.

    so i have created the array of all the childNodes of my div. then i have to loop through those nodes and assign each p and its image to a variable. only im not sure how to "match up" the p and its image, since they dont have a parent/child relationship. im completely at a loss as to how to construct my loop ...

    so i have

    Code:
    /*start listening for events once the page has loaded*/
    window.addEventListener('load', addListeners, false);
    
    function addListeners(e) {
    var col2 = document.getElementById('col2'); 
    var childNodesArray = new array (col2.childNodes); 
    	
    for (i=0,i<col2.childNodes.length,i++) {
    			
    
    	} 
    
    var x.style.opacity = "1.0";
    
    }
    I need someone to protect me from
    all the measures they take in order to protect me

  5. #5
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by stef25 View Post
    in the code below, should link1 not be the <p> element?
    No.
    HTML Code:
    <div id="col2">
    	<h2>text</h2>
    	<p><a href="#">text</a></p>
    	<img id="img1" src="# height="120" width="120" />
    </div>
    Child nodes of the DIV with id="col2" in Gecko browsers and Opera:
    0: a Text node containing whitespace
    1: an Element node for the H2
    2: a Text node containing whitespace
    3: an Element node for the P
    4: a Text node containing whitespace
    5: an Element node for the IMG
    6: a Text node containing whitespace

    IE (IIRC) ignores whitespace Text nodes between elements, so it would return these child nodes:
    0: an Element node for the H2
    1: an Element node for the P
    2: an Element node for the IMG

    Thus, childNodes&#91;2&#93; is not the P element in any browser (known to me).

    You should never use a hard-coded index into the childNodes list. Instead, iterate over the child nodes, look at the nodeType to find Element nodes (node type 1) and then check the tag name.

    Of course it would be easier in most circumstances to set an ID directly on the P element, if that's what you want to find.
    Birnam wood is come to Dunsinane

  6. #6
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    var col2 = document.getElementById("col2");
    
    for (var i = col2.firstChild; i != null; i = i.nextSibling) {
        if (i.nodeType == 1) {  // Element node
            if (i.nodeValue == "P") {
                // do something with the P element
            }
        }
    }
    Birnam wood is come to Dunsinane

  7. #7
    SitePoint Wizard stereofrog's Avatar
    Join Date
    Apr 2004
    Location
    germany
    Posts
    4,324
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you need some specific tag, getElementsByTagName is much more reliable than childNodes:

    Code:
    var col2 = document.getElementById("col2");
    var firstP = col2.getElementsByTagName("p")[0];

  8. #8
    SitePoint Evangelist stef25's Avatar
    Join Date
    Nov 2004
    Location
    belgium
    Posts
    465
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    very helpful everyone, thanks

    AutisticCuckoo, is the a element not a node aswell? you skipped that in your list.
    I need someone to protect me from
    all the measures they take in order to protect me

  9. #9
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by stef25 View Post
    AutisticCuckoo, is the a element not a node aswell? you skipped that in your list.
    No, the A element is not a child node of the DIV; it is a child of the P (i.e., a grandchild of the DIV).

    If you want to find all A elements that are descendants of the DIV, the best way is to use this:
    Code:
    var anchors = document.getElementById("col2").getElementsByTagName("a");
    for (var i = 0; i < anchors.length; ++i) {
        // do something with anchors&#91;i&#93;
    }
    Each element in the node list returned by getElementsByTagName() is an Element node with the specified tag name.
    Birnam wood is come to Dunsinane


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
  •