learn2kode.in

Menu

JavaScript Tutorial

Menu

JavaScript Selecting Elements

Selecting elements is one of the most important skills in JavaScript DOM manipulation. Before you can change text, styles, or add events, you must first select the HTML element you want to work with.
JavaScript provides several methods to select elements from the DOM. In this lesson, we will focus on the most commonly used and beginner-friendly methods.

Why Do We Select Elements?

Selecting elements allows JavaScript to:
  • Read or change text content
  • Update styles dynamically
  • Add click, hover, or input events
  • Build interactive user interfaces
Without selecting elements, JavaScript cannot interact with HTML.
getElementById()
The getElementById() method selects an element using its id attribute.
Syntax
Copy Text 
document.getElementById("elementId");
Example HTML
Copy Text 
<h1 id="title">Welcome to Learn2Kode</h1>
JavaScript Example
Copy Text 
const heading = document.getElementById("title");
console.log(heading.textContent);
Key Points
  • Selects only one element
  • IDs must be unique
  • Very fast and widely used
querySelector()
The querySelector() method selects the first matching element using CSS selectors.
Syntax
Copy Text 
document.querySelector("selector");
Example HTML
Copy Text 
<p class="intro">JavaScript is powerful</p>
JavaScript Example
Copy Text 
<p class="intro">JavaScript is powerful</p>
Supported Selectors
  • #id
  • .class
  • tag
  • attribute
Example:
Copy Text 
document.querySelector("#title");
document.querySelector(".box");
document.querySelector("p");
getElementById() vs querySelector()
Copy Text 
// Access an element by its ID
const heading = document.getElementById("main-heading");
console.log(heading.textContent);
When to Use Which?
Use getElementById() when:
  • You are selecting a single element by ID
  • You want better performance
Use querySelector() when:
  • You need flexibility with classes or tags
  • You prefer CSS-style selectors
Common Beginner Mistakes
Forgetting # for IDs in querySelector
Copy Text 
document.querySelector("title"); // Wrong
document.querySelector("#title"); // Correct
Using getElementById() with class names
Copy Text 
document.getElementById("box"); // Works only if box is an ID

The DOM is the backbone of interactive web pages. Understanding it is essential for any JavaScript developer, whether you are working with vanilla JS or modern frameworks.

Best Practice
For modern JavaScript:
  • Use getElementById() for simple and fast access
  • Use querySelector() for complex selections
Both methods are essential and widely used in real projects.
Best Practice

What’s Next?

  • Change HTML content
  • Modify styles
  • Add event listeners
Selecting Elements
Changing Styles