Dom traversal in Javascript

Dom Traversal

With the HTML DOM, we can easily navigate the node tree using node relationships.

When a html page gets  loaded. A node tree/dom tree gets created within ram. The different methods of DOM traversal are :

1)parentNode

2)parentElement

3)childNodes

4)children

5)firstChild

6)firstElementChild

7)lastChild

8)lastElementChild

9)previousSibling

10)previousElementSibling

11)nextSibling

12)nextElementSibling

1)parentNode vs parentElement

pasted image 0 48

pasted image 0 86

parentNode : Let us see an example

pasted image 0 102

Output :

pasted image 0 109

Scenario 2 :

Let us take the reference of h1 tag

pasted image 0 97

Output :

pasted image 0 100

childNodes vs children

1)childNodes : It returns an array. The child node is a read only property that returns a live NodeList of child nodes of the given element. The first child child has index of 0 .

Child nodes  will contain :

1)whitespace inside the element. Text : Text again considered as node

2)tab sign

3)enter

4)return

5)comment

pasted image 0 58

Output :

pasted image 0 53

Now if we want to get , what is the data of #text node

pasted image 0 93

Now apply the comment:

pasted image 0 75

Out :

pasted image 0 63

Child nodes of body :

pasted image 0 88

Output

pasted image 0 72

Note : During the creation of the node tree. The js engine puts the <script>..</script> inside the body tag

See above ex

Finding the style as node inside the head tag

pasted image 0 55

7 child nodes :

pasted image 0 104

Put the style outside the head

pasted image 0 50

Output :

pasted image 0 56

Now , find the child node inside text

pasted image 0 95

Text node does not contain any further child :

pasted image 0 74

Find the child nodes for the paragraph tag :

pasted image 0 51

Output :

pasted image 0 107

Note : span does have one text node. And text node do not have any further node

Children for the element : It only considers the html element. It does not consider the space,enter,backspace, comment , return

Children of head tag :

pasted image 0 83

Output :

pasted image 0 89

Children of h1 tag :

pasted image 0 52

Output

pasted image 0 62

pasted image 0 85

Output :

pasted image 0 87

Because the .children  is returning the array of HTML collection. So to find the length

pasted image 0 96

Let us loop the nodes:

Change the css

Change the attributes

1)loop

pasted image 0 70

Output :

pasted image 0 101

Apply css

pasted image 0 99

Output :

pasted image 0 90

firstChild vs firstElementChild

firstChild will tell about the first node

firstChild calculates the space,comment,backspace,enter,return

pasted image 0 67

Output :

pasted image 0 71

pasted image 0 57

Output :

pasted image 0 73

pasted image 0 78

Output :

pasted image 0 82

Apply the css to specific node

pasted image 0 69

Output :

pasted image 0 59

Another way to get the reference of p tag

pasted image 0 105

Note :

a)previousElementSibling : That checks only html elment

b)previousSibling : It checks the #text node

lastChild vs lastElementChild

pasted image 0 47

Output :

pasted image 0 49

Output:

pasted image 0 92

lastSibling vs lastElementSibling

pasted image 0 60

Output :

pasted image 0 103

How to work on dynamic element :

Up To now we are only traversing through the node tree. Now we are going to create new node and then we will append it acc to the requirement

1)Create the element node (html ka element)

pasted image 0 94

Output :

pasted image 0 54

Create text node :  It is text node (word)

pasted image 0 91

Output :

pasted image 0 76

Comment node

pasted image 0 68

Output :

pasted image 0 98

Append the newly created element to dom element

1)

pasted image 0 65

Output :

pasted image 0 79

insertBefore :

pasted image 0 80

Remove  dom element

pasted image 0 64

Before

pasted image 0 61

After

pasted image 0 66

Remove the child element

pasted image 0 84

Output :

pasted image 0 108

When we click on the element , it needs to be deleted

pasted image 0 106

pasted image 0 77

Output :

pasted image 0 81

Site Footer