DOM Manipulation & Selectors

In this blog, I'll be covering the basics of DOM Manipulation and Selectors.

DOM Manipulation

Before actually learning about DOM manipulation, let us try to understand what is DOM. Document Object Model(DOM) is nothing but a structured representation of HTML elements. You can think of DOM as a tree-like structure of nodes/elements that is created by the browser. Each node has its own properties. As soon as the HTML document is loaded, the browser creates this tree-like structure called DOM, through which, accessing HTML elements becomes really handy for programming languages like Javascript. Therefore JS can be used to read, write, update or manipulate the DOM.

While designing any web application in today's world, it is almost impossible that someone would not require to manipulate the DOM elements. As the old saying goes, HTML provides the structure, CSS styles the page, and Javascript is used to make the application interactive. Therefore, for any sort of interaction of the user with the application, whether it be clicking a button, hovering the cursor, or scrolling the page, it is Javascript in the background that is accessing and manipulating the DOM elements. Now how exactly does Javascript access the DOM elements? Well, It takes the help of a method called querySelector().

querySelector()

Although there are other methods like getElementById() and getElementsByClassName(), but querySelector() and querySelectorAll() works effeciently in selecting the DOM elements.

Let us understand the working of querySelector() by looking at an example:-

<!-- HTML code -->
<html>
     <head>
          <title>querySelector Demo</title>
     </head>
     <body>
          <button>Click Me!</button>
          <script>
               //JS code
               const clickButton = document.querySelector("button");    // <button>Click Me!</button>
               clickButton.addEventListener("click",() => {console.log("Clicked")});  
             // Output: Clicked
          </script>
     </body>
</html>

In the above code, we have designed a button that says Click Me!. Now we want that "Clicked" should be displayed in the console when the user clicks the button. For that, first, we need to select the button. To simplify the above code, we can say that we are asking the browser to give us the first reference of the element which has the tag-name = "button" and saving that reference into a variable clickButton. Next, we are just using an event listener which will listen to the click event and log "Clicked" in the console.

Selectors

Syntax

document.querySelector(Selector)

Sometimes we need to specifically select an element, and this is where the Selectors come into play. For example, there are three input elements all having unique ids and we want to select the third element then we can specifically select the third element using its Id. Therefore id is the selector which querySelector() will take as an argument and will search the element in the entire HTML file. If no element is found that matches the given selector, it returns null.

Following are some ways to select an element using basic selectors:-

document.querySelector("tagName");
document.querySelector("[attributeName]");
document.querySelector(".className");
document.querySelector("#idName");

querySelector() selects only the first element even if there are multiple matches with the given selector. Therefore to select all the elements that match a given selector, the querySelectorAll() method is used. For instance, if we want to select all elements with the same className, then the following syntax should be used:-

document.querySelectorAll(".className");

This statement returns a NodeList of all elements matching the given className.

Let us understand about selectors with an example:-

<!-- HTML code -->
<html>
     <head>
          <title>Selectors Demo</title>
     </head>
     <body>
          <textarea rows="4" cols="50"></textarea>
          <input type="number">
          <input class="input-txt">
          <button id="click-btn">Click Me!</button>

          <script>
               //JS code

               const textArea = document.querySelector("textArea");
               // returns <textarea rows="4" cols="50"></textarea>
               const inputNumber = document.querySelector("[type='number']");
               // returns <input type="number">
               const inputText = document.querySelector(".input-txt");
               // returns <input class="input-txt">
               const clickButton = document.querySelector("#click-btn");
               // returns <button id="click-btn">Click Me!</button>
               const inputElements = document.querySelectorAll("input");
               // returns ['<input type="number">', '<input class="input-txt">']
          </script>
     </body>
</html>

These were just the simple ways to select elements using basic selectors. We can also combine two selectors to make a combination of selectors. For example div, p or ul > li , etc.