How to create a function `generateSelector` to generate CSS selector path of a DOM element ?

In this article, we will learn about CSS selectors, and we will also implement a `generateSelector()` function that returns a string value to provide a valid selector to a target DOM element.

What is a CSS Selector?

A CSS selector is used to select a group of elements (or nodes in the DOM tree) that follow a certain pattern. 

Example: Here is an example of CSS selectors.

Output:

Code output

Understanding the outline concept behind generateSelector() Function: Now, let’s talk about how to create a `generateSelector()` function which returns a valid selector string to a target DOM element that presents inside a DOM tree. For a better understanding, let’s take a look at some of the examples of the function and its expected response. 

Example: Here is the implementation of the above-explained method.

The above code is just a pseudo code that does not have the implementation of the generateSelector function. It is only there to help you understand what the function is for. We are going to implement this function down below in the next section – 

Expected Output:

HTML > BODY:nth-child(2) > DIV:nth-child(3) > H3
HTML > BODY:nth-child(2) > H2:nth-child(2)
HTML > BODY:nth-child(2) > DIV:nth-child(3) > DIV:nth-child(2) > P

Example: Implementing `generateSelector()` function: Now, we have a good grasp on what the `generateSelector` function is, let’s try to implement it –

Let’s break the above code step by step – 

• We create a selectorPath array to store selector elements in reverse order (as we bubble up the DOM tree from the target element)
• We run a loop to travel up the DOM tree until we reach a NULL, i.e. until the root of the DOM tree is traversed.
• We run through the children of the target’s parentNode until we reach the target itself. This is done so as to determine the index of the target among its parent’s children so that we can add it to the selector.
• We update the selectorPath array with the current selector path value and also update the target to its parentNode.
• We continue doing the same until the whole DOM tree is traversed.
• After the loop is over, we join the selectorPath array elements together with ‘ > ‘ as a concatenate symbol, which signifies a child of a parent is a CSS selector. 
• The resultant string is the final CSS selector string that we were looking for.

Output:

Code output

Example 2: In this example, we are implemented in the same way as Example 1, but it has different child elements in the body tag, so the different outputs get logged to the console.

 Output: