How to Select an Element by ID in JavaScript

Author:
In JavaScript, selecting an HTML element by its ID is a common task when working with the DOM (Document Object Model). Each element in an HTML document can be assigned a unique ID, and JavaScript provides an easy method to select an element by this ID. This post will cover how to select an element by ID and some common use cases.

Table of Contents

  1. Using document.getElementById()
  2. Working with the Selected Element
  3. Handling Non-Existent IDs
  4. Conclusion

1. Using document.getElementById()

The document.getElementById() method is the simplest and most efficient way to select an element by its ID. It returns the element that matches the given ID.

Example:

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Select Element by ID</title>
</head>
<body>
  <h1 id="heading">Hello, World!</h1>
  <p id="description">This is a paragraph.</p>
  <script src="script.js"></script>
</body>
</html>

JavaScript (script.js):

const heading = document.getElementById("heading");
console.log(heading);

Output:

<h1 id="heading">Hello, World!</h1>

Explanation:

document.getElementById("heading") selects the <h1> element with the ID "heading" and stores it in the heading variable. You can then interact with this element, for example, by modifying its content or styling.

2. Working with the Selected Element

Once you've selected an element by its ID, you can manipulate it. Here are a few common actions you can perform:

Changing the Text Content:

const heading = document.getElementById("heading");
heading.textContent = "Welcome to JavaScript!";

This changes the text inside the <h1> element to "Welcome to JavaScript!".

Modifying the Style:

const heading = document.getElementById("heading");
heading.style.color = "blue";
heading.style.fontSize = "36px";

This changes the text color to blue and increases the font size.

Adding or Removing a CSS Class:

const description = document.getElementById("description");
description.classList.add("highlighted");

This adds a CSS class "highlighted" to the <p> element with the ID "description".

3. Handling Non-Existent IDs

If the ID you are trying to select doesn’t exist in the HTML document, document.getElementById() will return null. You should always check whether the element exists before trying to manipulate it.

Example:

const nonExistentElement = document.getElementById("nonExistent");

if (nonExistentElement) {
  nonExistentElement.textContent = "This element exists!";
} else {
  console.log("Element not found!");
}

Output:

Element not found!

Explanation:

This example checks if the element with the ID "nonExistent" exists. If it doesn’t, it safely handles the case by logging a message to the console.

Conclusion

Selecting an element by its ID in JavaScript is straightforward using document.getElementById(). Once selected, you can easily manipulate the element’s content, style, and attributes. Always remember to check whether the element exists before performing any operations to avoid errors.

Key Points:

  • document.getElementById() is the most efficient way to select an element by its ID.
  • Once an element is selected, you can modify its content, style, and attributes.
  • Always check for null when selecting elements that might not exist in the DOM.

Related JavaScript Programs:

JavaScript: Add Two Numbers JavaScript: Subtract Two Numbers JavaScript: Multiply Two Numbers JavaScript: Divide Two Numbers JavaScript: Find the Remainder of Two Numbers JavaScript: Check if a Number is Even or Odd JavaScript: Find the Largest Among Three Numbers JavaScript: Find the Smallest Among Three Numbers JavaScript: Check if a Number is Prime JavaScript: Find the Factorial of a Number JavaScript: Print the Fibonacci Series JavaScript: Reverse a String JavaScript: Check if a String is a Palindrome JavaScript: Convert Celsius to Fahrenheit JavaScript: Convert Fahrenheit to Celsius JavaScript: Find the Area of a Circle JavaScript: Find the Perimeter of a Rectangle JavaScript: Sort an Array JavaScript: Find the Maximum and Minimum Element in an Array JavaScript: Find the Sum of Elements in an Array JavaScript: Merge Two Arrays JavaScript: Remove Duplicates from an Array JavaScript: Count the Occurrences of an Element in an Array JavaScript: Search for an Element in an Array JavaScript: Implement the Bubble Sort Algorithm JavaScript: Implement the Quick Sort Algorithm JavaScript: Implement the Insertion Sort Algorithm JavaScript: Check if a String Contains Another String JavaScript: Split a String into an Array of Words JavaScript: Join an Array of Words into a String JavaScript: Check if Two Strings are Anagrams JavaScript: Implement a Basic Calculator JavaScript: Get the Current Date and Time JavaScript: Implement a Countdown Timer JavaScript: Validate an Email Address JavaScript: Validate a Phone Number JavaScript: Swap Two Variables JavaScript: Count the Number of Words in a String JavaScript: Implement a Stack using Arrays / Objects JavaScript: Implement a Queue using Arrays / Objects JavaScript: Depth-First Search (DFS) on a Graph JavaScript: Breadth-First Search (BFS) on a Graph JavaScript: Implement a Binary Search Tree JavaScript: Detect a Cycle in a Linked List JavaScript: Implement the Tower of Hanoi Algorithm JavaScript: Search for an Element in a Binary Search Tree JavaScript: Implement a Priority Queue JavaScript: Implement an AVL Tree JavaScript: Implement a Circular Queue using Arrays JavaScript: Implement a Doubly Linked List JavaScript Function: Sum of Two Numbers JavaScript: Convert a String to Title Case JavaScript: Reverse a String without Built-in reverse() Function JavaScript: Reverse the Words in a Sentence without Built-in Function

Comments

Post a Comment

Leave Comment