Spread the love

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.