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
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
Because span is on the same level as This text node and nodes which are on the same level are siblings to each other.
really don't know how to help you any further on this...
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?
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
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
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 as the span is the second child?
Is this correct
That's the reason why I have told you that it depends on which method you use to traverse the DOM tree.
Originally Posted by Mahmed1
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:
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:
and so on...
Let's take a look at famous "This is a test" example:
How can you access span element?
<p id="test">This <span id="span">is</span> a test.</p>
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!
//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;
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:
//get p element's child node list
var childList = document.getElementById('test').childNodes;
//get span element from childList list of nodes
var span = childList // you set one because JS start's counting from 0 so your second child is at number 1
Yessssss!!!! :D You could figure it out before I have written all this bible and save me some time... :) just kidding!
Originally Posted by Mahmed1
Appreciate all ur help
God bless you
Again thank you soooo much
I appreciate you being patient
You're welcome! I'm glad I was able to help you...
The code is working on firefox 4.0b9
<span id="span"> is</span>
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); // [object Text]
alert(el.childNodes.nodeValue); // This
alert(el.childNodes); // [Object HTMLSpanElement]
alert(el.childNodes.nodeName); // SPAN
alert(el.childNodes.firstChild); // [object Text]
alert(el.childNodes.firstChild.nodeValue); // is
alert(el.childNodes.nodeName); // #text
alert(el.childNodes.nodeValue); // a test