As we know the HTML DOM is like a tree, which has branches, here known as Nodes. In Fact Everything in HTML DOM is itself a document Node.
documentobject is a Node
- Each and every element of the document is a Node
- All Comments are considered as Node
- Contents inside the element is text Node
DOM Tree Node Relationship
The Nodes in the DOM tree follow hierarchical structure with each other.
Because of this hierarchy Nodes are related as parent, child and neighbour relationship.
- The node which is at top in DOM tree is known as root node
- Every Node has one parent except for root node
- A parent can have any number of children
- Node whose parent are same are called neighbours or siblings
Possible Navigations in DOM Tree
In the dom tree we have following different kinds of navigations :
- Down in the DOM tree :
- firstChild - Returns first child of the element
- firstElementChild - Returns first element child of the parent
- lastChild - Returns last child of the element
- lastElementChild - Returns first element child of the parent
- childNodes - Returns all children of the element as a collection of array
- children - Returns all children which are element as a collection of array
- Up in the DOM tree :
- Sideways in the tree :
- nextSibling - Returns sibling node which is next child of its parent
- nextElementSibling - Returns sibling element which is next child of its parent
- previousSibling - Returns sibling node which is previous child of its parent
- previousElementSibling - Returns sibling element which is previous child of its parent
Let's now see each navigation in detail.
Accessing Child Nodes
firstChild property of element, last node by
lastChild property of the element and collection of all child nodes by using
Example : firstChild
nodeNameproperty return name of the node, i.e if node is anchor tag then return 'A', if node is text then returns #text.
We can see in the above example that the nodeName of first child should be 'H1' but result is '#text', this is because whitespace like newline, tabs are valid text and it becomes part of the node tree. That's why the first child is '#text'.
To get what we expected, use
firstElementChild, it returns the first child of the parent which is an element.
Example : firstElementChild
Last Child : Now let's select the last child of the parent. Use
lastChild to select first child and
lastElementChild to select element child same as you have seen in previous example.
Example : last child
childNodes: Now let's get a collection of children using
In the example below all child nodee are console logged, check by running it.
Example : childNodes
You can see in the above example that
childNodes property returns all types of node including '#text' and 'element' nodes.
children: To get only element nodes use
children property on the parent element.
Example : children
To use collections of children you can access it using the index value of the element just like an array.
Example : accessing children
Accessing Parent Nodes
To get parent node from the DOM tree use
If the parent doesn't exist then it returns
null, which is in the case of a
Example : accessing parent
Similarly like accessing child nodes we also have another property for parent node just for getting parent element, and property is
parentElement. It always returns a parent which is an element.
Example : accessing parent element
Accessing the Sibling Nodes
The elements with common parent are called siblings or neighbours. In sibling Nodes we can access the next sibling and previous sibling.
nextSibling: To access the next sibling use
Example : accessing next node
You can see in above example
nextSibling returns '#text' node, because it is the next node.
nextElementSibling: To get the next node which is element use
Example : accessing next element node
previousNode & previousElementNode: To get previous node use
previousNode property, while to get previous element use
Example : accessing previous node