September 24, 2021

How to Select Element in Javascript

By Krishnaa JavaScript Questions 0 Comments

In this tutorial, you will learn how to select element in javascript. This is one of the most essential skills that every javascript developer should have. Without selecting an element, it is completely impossible to perform DOM manipulation or DOM traversing.

There are a bunch of helpful methods to select an element in javascript and that includes getElementById(), getElementsByClassName(), getElementsByName(), getElementsByTagName(), querySelector(), and querySelectorAll(). We are going to cover all of them in this tutorial.

In the following example, we have a bunch of button elements and upon click of a button, we execute one of the above-mentioned methods to select one or more elements and change their background color to green. Please have a look over the code example and the steps given below.

HTML & CSS

We have a bunch of elements in the HTML file (section, div, and button). The div element with a class of container is just a wrapper for the rest of the elements.

We have done some basic styling using CSS and added the link to our style.css stylesheet inside the head element.
We have also included our javascript file script.js with a script tag at the bottom.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">  
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  
  <section class="container" >
    <div id="byId"  class="byClass" name="username">
      <button id="btn-id">ID</button>
    </div>

    <div name="username">
      <button id="btn-name">Name</button>
    </div>

    <div class="byClass">
      <button id="btn-class">Class</button>
    </div>

    <div>
      <button id="btn-tagname">Tag name</button>
    </div>

    <div>
      <button id="btn-query">Query</button>
    </div>

    <div>
      <button id="btn-queryall">QueryAll</button>
    </div>
  </section>

  <script src="script.js"></script>
</body>
</html>

section {
    display: flex;
    justify-content: space-between;
}

.container div {
    height: 300px;
    width: 300px;
    text-align: center;
    padding: 5px;
    border: 1px solid black;
}

Javascript

We have selected all the button elements using the document.querySelector() method and stored them in btnId, btnClass, btnName, btnTagName, btnQuery, and btnQueryAll variables respectively.
We have attached the click event listener to all the button elements.

getElementById() Method

In the event handler function of btnId, we are using getElementById() method. This method takes an id of an element as a parameter. It will select the matching element with that specific id. We are storing the returned element in the element variable. We are changing the background color of the selected element to green using the backgroundColor property.

getElementsByClassName() Method

In the event handler function of btnClass, we are using getElementsByClassName() method. This method takes a class name as a parameter. It will select all elements that contain a specific class name. We are storing the returned elements in the elements variable. We are looping through all the selected elements using for loop and changing their background color to green using the backgroundColor property.

getElementsByName() Method

In the event handler function of btnName, we are using getElementsByName() method. This method takes a possible value of the name attribute as a parameter. It will select all elements that contain a specific name attribute. We are storing the returned value in the elements variable. We are looping through all the selected elements using for loop and changing their background color to green using the backgroundColor property.

getElementsByTagName() Method

In the event handler function of btnTagName, we are using getElementsByTagName() method. This method takes a tag name as a parameter. It will select all matching elements with that specific tag name. We are storing the returned value in the elements variable. We are looping through all the selected elements using for loop and changing their background color to green using the backgroundColor property.

querySelector() Method

In the event handler function of btnQuery, we are using the querySelector() method to select an element. This method takes a CSS selector as its parameter. We are storing the returned element in the element variable. We are changing the background color of the selected element to green using the backgroundColor property.

querySelectorAll() Method

In the event handler function of btnQueryAll, we are using the querySelectorAll() method. This method takes a CSS selector as its parameter. We are passing div as a selector to select all div elements. We are storing the returned elements in the elements variable. We are looping through all the selected elements using for loop and changing their background color to green using the backgroundColor property.

let btnId = document.querySelector('#btn-id');
let btnClass = document.querySelector('#btn-class');
let btnName = document.querySelector('#btn-name');
let btnTagName = document.querySelector('#btn-tagname');
let btnQuery = document.querySelector('#btn-query');
let btnQueryAll = document.querySelector('#btn-queryall');

btnId.addEventListener('click', () =>{
    let element = document.getElementById('byId');
    element.style.backgroundColor = 'green';
});

btnClass.addEventListener('click', () =>{
    let elements = document.getElementsByClassName('byClass');
    for(let element of elements){
        element.style.backgroundColor = 'green';
    }
});

btnName.addEventListener('click', () => {
    let elements = document.getElementsByName('username');
    for(let element of elements){
        element.style.backgroundColor = 'green';
    }
});


btnTagName.addEventListener('click', () => {
    let elements = document.getElementsByTagName('div');
    for(let element of elements){
        element.style.backgroundColor = 'green';
    }
});

btnQuery.addEventListener('click', () =>{
    let element = document.querySelector('div:nth-last-child(2)');
    element.style.backgroundColor = 'green';
});

btnQueryAll.addEventListener('click', () => {
    let elements = document.querySelectorAll('div');
    for(let element of elements){
        element.style.backgroundColor = 'green';
    }
});

You May Also Like: