www.webdeveloper.com
Page 2 of 2 FirstFirst 12
Results 16 to 30 of 30

Thread: Javascript newbie on getelement

  1. #16
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,648
    Code:
    <div><p></p><h1></h1></div>
    div is the parentNode for p and h

    p is the firstChild for div and at the same time the previousSibling for h (p and h are on the same nesting level)

    h is the nextSibling for p and the lastChild for div

    take a look at this scheme
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  2. #17
    Join Date
    Oct 2013
    Posts
    18
    Thank you

    I understand Siblings but dont no why the span is a sibling and not a child and why i need to access as sibling rather than the child if P tag


    Code:
    <p id="test">
    This
    <span id="span">is</span>
    a test.
    </p>

  3. #18
    Join Date
    Oct 2012
    Location
    Croatia
    Posts
    241
    Because span is on the same level as This text node and nodes which are on the same level are siblings to each other.
    Last edited by tech_soul8; 10-19-2013 at 03:33 PM.

  4. #19
    Join Date
    Oct 2012
    Location
    Croatia
    Posts
    241
    nodes.jpg

    really don't know how to help you any further on this...

  5. #20
    Join Date
    Oct 2013
    Posts
    18
    Sorry and i appreciate your help
    So even though it is like the span is a child of the P tag, because it is in the same level as the text note you can only access it the way i am by its siblings?

  6. #21
    Join Date
    Oct 2013
    Posts
    18
    My confusion was that span looks loke the 2nd child of the P tag and i am aware that it is a sibling to the text but but why could i just have not accessed it as the 2nd child as the p tag but have to access as the sibling after the this text

  7. #22
    Join Date
    Oct 2013
    Posts
    18
    So its not the 2nd child of the p tag but is a sibling to the text node which i clearly understand but dont understand why it is not a 2nd child to p tag even though it looks like it is

  8. #23
    Join Date
    Oct 2013
    Posts
    18
    OMD wat a plunka i am

    I get it now.... I think

    Span is a child (2nd) of the p tag but because there is only an option for firstchild and lastchild, i cant access it directly using this method to the (2nd child) so i acces the firstchild and select its next sibling? Well i hope i an getting this now

    I am aware that i could access like this

    P.childnode[1] as the span is the second child?

    Is this correct

  9. #24
    Join Date
    Oct 2012
    Location
    Croatia
    Posts
    241
    Quote Originally Posted by Mahmed1 View Post
    My confusion was that span looks loke the 2nd child of the P tag and i am aware that it is a sibling to the text but but why could i just have not accessed it as the 2nd child as the p tag but have to access as the sibling after the this text
    That's the reason why I have told you that it depends on which method you use to traverse the DOM tree.

    Just to recall... In DOM everything is a node. So if everything is a node how do you know which node is a text node, element node, attribute node...? Nodes come in a variety of types. The node object has different objects to represent each possible type of node in a document. Some of them and most interesting to us are:

    Element
    Attr
    Text

    Each of this objects inherits properties and methods of Node object but also have some of it's own properties and methods. Hence the reason why you can achieve different things on many different ways. Here's excellent reference: http://www.w3schools.com/jsref/default.asp

    Some of the most interesting properties of Node object are:

    firstChild
    nextSibling
    previousSibling
    lastChild
    nodeValue

    and so on...

    Let's take a look at famous "This is a test" example:

    Code:
    <p id="test">This <span id="span">is</span> a test.</p>
    How can you access span element?

    Code:
    //first method using element's object document.getElementById() method
    var span = document.getElementById('span');
    //second method using low-level Node object's properties
    var span = document.getElementById('test').firstChild.nextSibling;
    As you can see from the code above and from the some common list of Node object properties there's no such thing as secondChild, thirdChild... Try to imagine to yourself that you are programming API for traversing the DOM. How can you know how many child nodes some web document's node has and according to that implement all the properties (secondChild, thirdChild, fourthChild...) to cover all of them? Well...you can't!

    That's the reason why we have element.chidlNodes property to retrieve the collection of all child nodes of parent node.

    I hope that now you understand why you cannot use your "2nd" child property to access your "span" tag although when you look at the code it seems to you that it is a second child (which actually it really is but depending on which method you use to access it).

    So your span node from theoretical "second child" becomes practical "second child" when you access it like this:

    Code:
    //get p element's child node list 
    var childList = document.getElementById('test').childNodes;
    //get span element from childList list of nodes
    var span = childList[1] // you set one because JS start's counting from 0 so your second child is at number 1
    Last edited by tech_soul8; 10-19-2013 at 05:46 PM.

  10. #25
    Join Date
    Oct 2012
    Location
    Croatia
    Posts
    241
    Quote Originally Posted by Mahmed1 View Post
    OMD wat a plunka i am

    I get it now.... I think

    Span is a child (2nd) of the p tag but because there is only an option for firstchild and lastchild, i cant access it directly using this method to the (2nd child) so i acces the firstchild and select its next sibling? Well i hope i an getting this now

    I am aware that i could access like this

    P.childnode[1] as the span is the second child?

    Is this correct
    Yessssss!!!! You could figure it out before I have written all this bible and save me some time... just kidding!

  11. #26
    Join Date
    Oct 2013
    Posts
    18
    Thank u
    Appreciate all ur help
    God bless you

  12. #27
    Join Date
    Oct 2013
    Posts
    18
    Again thank you soooo much

    I appreciate you being patient

  13. #28
    Join Date
    Oct 2012
    Location
    Croatia
    Posts
    241
    You're welcome! I'm glad I was able to help you...

  14. #29
    Join Date
    Sep 2007
    Posts
    315
    Selam!

    The code is working on firefox 4.0b9

    Code:
      
    <body>
    <p id="test">
    This
    <span id="span"> is</span>
    a test.
    </p>
    
    <script type="text/javascript">
    // http://www.webdeveloper.com/forum/showthread.php?285035-Javascript-newbie-on-getelement
    
    var el = document.getElementById('test');
    
    alert(el.firstChild.nodeName); // #text
    alert(el.firstChild.nodeValue); // This
    alert(el.firstChild.nextSibling ) ; // [Object HTMLSpanElement]
    alert(el.firstChild.nextSibling.nodeName); // SPAN
    alert(el.firstChild.nextSibling.firstChild); // [object Text]
    alert(el.firstChild.nextSibling.firstChild.nodeValue); // is
    alert(el.lastChild);  // [object Text]
    alert(el.lastChild.nodeValue); // a test
    alert(el.lastChild.previousSibling); // [Object HTMLSpanElement]
    alert(el.lastChild.previousSibling.firstChild.nodeValue); // is
    
    
    alert(el.childNodes[0]); // [object Text]
    alert(el.childNodes[0].nodeValue); // This
    alert(el.childNodes[1]); // [Object HTMLSpanElement]
    alert(el.childNodes[1].nodeName);  // SPAN
    alert(el.childNodes[1].firstChild);  // [object Text]
    alert(el.childNodes[1].firstChild.nodeValue); // is
    
    alert(el.childNodes[2].nodeName); // #text
    alert(el.childNodes[2].nodeValue); // a test
    
    
    </script>
    The Time Through Ages
    1. By the Time,
    2. Verily Man is in loss,
    3. Except such as have Faith, and do righteous deeds, and (join together) in the mutual enjoining of Truth, and of Patience and Constancy.

  15. #30
    Join Date
    Oct 2013
    Posts
    18
    Salaam

    Thank you

    Appreciated

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles