Tutorials Tonight's Logo
Follow Us

JavaScript Get Element By Id


In this tutorial, You will learn how to get an element by the id of the element using JavaScript. You will walk through different methods and will look at various examples.

The most commonly used method to select an element within the document is selecting an element by its id value. Why? because it is very selective and can directly target the element within the webpage.

There are mainly 2 different ways to get an element by id:

  1. By using getElementById method
  2. By using the querySelector method


1. Using getElementById JavaScript

The getElementById method is used to get element by id. It returns an element object with the mentioned id.

Since id in a webpage is unique so it is a very useful method to target a specific element quickly.

An HTML element with the id attribute.

<div id="box">Element with id="box"</div>

To select this element by it's id use document.getElementById method.

Example

const element = document.getElementById("box");
element.style.background = "lightgreen";
console.log(element); // to see element in console

Output:

output 1

Note: The id of an element is case sensitive, which means 'box' is different from 'Box' or 'BOX'.

Another example of getElementById method

The example below contains 2 button which when clicked selects the element and apply some style.

Example

<p id="box">I am black.</p>
<button onclick="green()">Green</button>
<button onclick="pink()">Pink</button>

<script>
  const element = document.getElementById("box");
  function green() {
    let element = document.getElementById("box");
    element.style.background = "lightgreen";
    element.innerHTML = "I have lightgreen background";
  }
  function pink() {
    let element = document.getElementById("box");
    element.style.background = "lightpink";
    element.innerHTML = "I have lightpink background";
  }
</script>

2. Using querySelector JavaScript

The querySelector method is a method to select the element in JavaScript which use CSS selectors to get the element of the document.

It returns the first element within the document that matches the specified selector.

To get an element with a unique id pass the id name proceeding with a hash symbol (#) and it will return the element that has the specified id value. Example document.querySelector("#box")

Example

<p id="box">This is a paragraph.</p>
<button onclick="selectElement()">Select element with id</button>

<script>
  function selectElement() {
    let element = document.querySelector("#box");
    element.style.background = "lightgreen";
  }
</script>

Output:

output 2

# Example getElementById

The example below contains a paragraph with an id of "para" and a button which when clicked run a change named function. The function gets the element by id using the getElementById method and then add a class using javascript.

Example

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Example</title>
  <style>
    .beautify{
      background: lightcoral;
      padding: 10px;
      font-size: 20px;
      color: white;
    }
  </style>
</head>

<body>
  <p>The button below when clicked selects the element by getElementById method and add a class to it.</p>
  <p id="para">This is a paragraph.</p>
  <button onclick="change()">Select element and add class</button>

<script>
  function change() {
    let element = document.getElementById("para");
    element.classList.add("beautify");
  }
</script>
</body>

</html>

# Example querySelector

The example below contains a paragraph with an id of "para" and a button which when clicked run a change named function. The function gets the element by id using querySelector method, then add a class using javascript and change the content of the paragraph.

Example

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Example querySelector 1</title>
  <style>
    .beautify{
      background: lightgreen;
      padding: 10px 15px;
      font-size: 22px;
      color: white;
    }
  </style>
</head>

<body>
  <p>The button below when clicked selects the element by querySelector method, add class to it and change the content.</p>
  <p id="para">This is a paragraph.</p>
  <button onclick="change()">Select element</button>

<script>
  function change() {
    let element = document.querySelector("#para");
    element.classList.add("beautify");
    element.innerHTML = "Selected by querySelector and then class added."
  }
</script>
</body>

</html>

Conclusion

In this tutorial, you learned how to get an element by its id value in javascript by 2 different methods with their examples.

More Learning

Want to learn more about programming and web development? We have a few recommendations for you.

Follow Us

Copyright © Tutorials Tonight. All Rights Are Reserved.