Being able to select Elements and traverse through DOM is one of the most important skill that you can learn in JavaScript.

Let's Start

In the above embed you can see the HTML structure with one grandparent element, two parent elements and two child elements each in the parent to start with DOM traversing.

For selecting the grandparent element with or without id we will do :

querySelector which selects one single element with the id or if we pass a class name it will return the first element from the array of elements.

const grandparent = document.querySelector("#grandparent-id");


function changeColor(element) {
  element.style.backgroundColor = "#000"
}

//OR

//const grandparent = document.querySelector(".grandparent");

//const grandparent = document.getElementById("grandparent-id")

// function to change color of element to black
changeColor(grandparent);


// It will select the first element from the array of elements having parent class
//const parent = document.querySelector(".parent");

For selecting parents

We will use querySelectorAll. This will select all the elements containing the class name.

const parents = document.querySelectorAll(".parent");

//OR
//const parents = Array.from(document.getElementsByClassName("parent"));

parents.forEach(changeColor);

For selecting children of grandparent class

const grandparent = document.querySelector(".grandparent");

const parents = Array.from(grandparent.children)

parents.forEach(changeColor);

For selecting children of parent class

Now we can select children of the parent element so we can select children of parent class.

const grandparent = document.querySelector(".grandparent");

const parents = Array.from(grandparent.children)

const parentOne = parents[0]
const children = parentOne.children

//Changing Color of the first child

changeColor(children[0])

Also here we can directly fetch the children from the grandparent class

We can use querySelector and querySelectorAll not only on document by also on the elements to fetch children elements in that 😎

const grandparent = document.querySelector(".grandparent");

const childOne = grandparent.querySelector(".child")


//Changing Color of the first child

changeColor(childOne)

For Selecting All Child Class Elements

const grandparent = document.querySelector(".grandparent");

const children = grandparent.querySelectorAll(".child")


//Changing Color of child class

children.forEach(changeColor)

For Selecting All Parent Class Elements from Child Class

Let's provide an id to first child as child-one

const childOne = document.querySelector("#child-one");

const parent = childOne.parentElement


//Changing Color of childOne parent

changeColor(parent)

Now we can select grandparent also

const childOne = document.querySelector("#child-one");

const parent = childOne.parentElement

const grandparent = parent.parentElement


//Changing Color of grandparent element fetched by parent element
changeColor(grandparent)

Select grandparent Element directly from child element using closest method

closest is very similar to querySelector by moving upwards to fetch elements. It selects the closest parent element that has the selector which has been passed in the argument.

const childOne = document.querySelector("#child-one");

const grandparent = childOne.closest(".grandparent")


//Changing Color of grandparent element fetched by parent element
changeColor(grandparent)

Now we know how to move up the tree and down the tree. Let's how to move sideways.

Selecting Sibling of childOne using nextElementSibling

const childOne = document.querySelector("#child-one");

const childTwo = childOne.nextElementSibling

changeColor(childTwo)

Selecting Previous Sibling of childTwo using previousElementSibling

const childOne = document.querySelector("#child-one");

const childTwo = childOne.nextElementSibling

changeColor(childTwo.previousElementSibling)

That's It For Now. See You In Next One ✌️