Useful DOM Traversal Properties
Tags: javascript, webdev, programming, beginners
Published: 2021-01-23 01:56:14

**Check out my books on Amazon at https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62**

**Subscribe to my email list now at http://jauyeung.net/subscribe/**

The main use of client-side JavaScript is to manipulate web pages dynamically. We can do this with the DOM traversal methods and properties available to DOM Node objects.

Getting child and sibling elements is easy for any given Node since there are properties built into DOM Node objects to do so. The following are properties of a DOM Node object for getting parent, child and sibling nodes or elements.

childNodes
==========

The `childNodes` property let us get the child nodes of a Node object. It returns a `NodeList` object, which is an array-like object that we can loop through with the `for` and `for...of` loop and spread with the spread operator. It’s a read-only property.

For example, we can use it as follows:

```
const divChildren = document.querySelector('div').childNodes;
for (let c of divChildren) {  
  console.dir(c);  
  console.log(c.textContent);  
}
```

We get the text nodes as well as the `p` nodes as the children, so the newline character and the `p` elements are both includes. The `console.log` and `console.dir` statements above should reflect that.

We can change the example above to change the color of the text on the fly. For example, we can write:

```
const divChildren = document.querySelector('div').childNodes;
for (let c of divChildren) {  
  if (c.style) {  
    c.style.color = 'red';  
  }  
}
```

to change all the `p` elements to red. We have to check the `style` attribute since the text nodes don’t have the `style` property.

firstChild
==========

The `firstChild` property gets us the first child of the given Node object. For example, if we have the following HTML:

```
<div>  
  <p>  
    foo  
  </p>  
  <p>  
    bar  
  </p>  
  <p>  
    baz  
  </p>  
</div>
```

We get that the first child is a text node with a newline character with the following JavaScript:

```
const firstChild = document.querySelector('div').firstChild;
console.log(firstChild)
```

This property is a read-only property. If there’re no child nodes then it’ll return `null` .

lastChild
=========

The `lastChild` property gets us the first child of the given Node object. For example, if we have the following HTML:

```
<div>  
  <p>  
    foo  
  </p>  
  <p>  
    bar  
  </p>  
  <p>  
    baz  
  </p>  
</div>
```

We get that the last child is a text node with a newline character with the following JavaScript:

```
const lastChild = document.querySelector('div').lastChild;console.log(lastChild)
```

This property is a read-only property. If there’re no child nodes then it’ll return `null` .

nextSibiling
============

The `nextSibling` property is a read-only property that represents the next Node in the tree or `null` if none exists.

For example, if we have the following HTML:

```
<div>  
  foo  
</div>  
<div>  
  bar  
</div>
```

Then we can use the `nextSibling` property as follows:

```
const nextSibling = document.querySelector('div').nextSibling;  
console.log(nextSibling)
```

We should get a text node with a new line character as the node from the `nextSibling` .

To get the second div in the HTML, we can chain the `nextSibling` property as follows:

```
const barNode = document.querySelector('div').nextSibling.nextSibling;  
barNode.style.color = 'red';
```

In the code above, we set the second div’s color to red.

parentNode
==========

The `parentNode` property is a read-only property that gets us the parent node of the given node or `null` if it doesn't exist. Nodes can include HTML elements or other nodes like text nodes or comment nodes.

For example, given the following HTML:

```
<div>  
  foo  
</div>  
<div>  
  bar  
</div>
```

We can write the following code to get the parent node:

```
const parentNode = document.querySelector('div').parentNode;
console.log(parentNode);
```

The `console.log` should get us the `body` node from as the parent.

We can do things to the parent node once we have it. For example, we can write:

```
const parentNode = document.querySelector('div').parentNode;
parentNode.style.color = 'red';
```

to change all the text red.

parentElement
=============

The `parentElement` property is a read-only property that gets us the parent element of the given node. If the node has no parent or the parent node isn’t an HTML element, then it returns `null` .

For example, given the following HTML:

```
<div>  
  bar  
  <div id='foo'>  
    foo  
  </div>  
</div>
```

We can write the following JavaScript to get the parent element of the element with the ID `foo` :

```
const parentElement = document.querySelector('#foo').parentElement;
parentElement.style.color = 'red';
```

In the code above, we get the parent element of `foo` and set its `color` style to the color red, so we should see all the text having the color red because of the parent of `foo` is our outer div.

previousSibling
===============

The `previousSibling` property is a read-only property that returns the previous node in the DOM tree, or `null` if it doesn’t exist.

For example, if we have the given HTML:

```
<div>  
  foo  
</div>  
<div id='bar'>  
  bar  
</div>
```

Then we can get the previous sibling as follows:

```
const previousSibling = document.querySelector('#bar').previousSibling;
console.log(previousSibling);
```

We can see that the previous sibling is the text node with the newline character.

To get the div with the word ‘foo’, we can write:

```
const foo = document.querySelector('#bar').previousSibling.previousSibling;
foo.style.color = 'red';
```

The first line gets the div with the word ‘foo’. Then the last line sets it to red.

textContent
===========

The `textContent` is a readable and writable property that lets us set the textual content of an element and all its descendants. For example, given an empty `p` element:

```
<p></p>
```

We can set its text content to ‘foo’, by writing the following:

```
const p = document.querySelector('p')  
p.textContent = 'foo';
```

The DOM Node object methods are very useful for getting the parent, child and sibling elements. Most of the properties are read-only since they’re set somewhere else. For the properties that get all kinds of Node objects, we have to be careful not the wrong type of Node. This means that we can’t assume all Nodes are HTML elements.