← Previous Next →

Selecting Elements

In JavaScript, selecting elements from the DOM (Document Object Model) is essential to interact with and manipulate HTML content dynamically.

💡 Core Concept

Use DOM selection methods to access HTML elements so you can modify content, styles, or attributes.

Common Methods for Selecting Elements

Selection Methods Overview

Method	Description
`getElementById(id)`	Selects a single element by its unique `id`.
`getElementsByClassName(className)`	Returns a live HTMLCollection of all elements with the given `class`.
`getElementsByTagName(tagName)`	Returns a live HTMLCollection of all elements with the specified tag name.
`querySelector(selector)`	Selects the first element that matches a CSS selector.
`querySelectorAll(selector)`	Returns a static NodeList of all elements matching a CSS selector.

getElementById is fastest but limited to one element.
getElementsByClassName and getElementsByTagName return live collections that update as the DOM changes.
querySelector and querySelectorAll accept any valid CSS selector, offering more flexibility.

⚠️ Important

Methods returning collections (getElementsByClassName, getElementsByTagName) return live lists; modifying the DOM may affect them dynamically.

JAVASCRIPT

const buttons = document.querySelectorAll('.btn.primary');
buttons.forEach(button => {
  console.log(button.textContent);
});

Output

Logs text of all elements with both "btn" and "primary" classes

Use getElementById when you know the element’s unique ID.
Use querySelector for quick single element selection with complex selectors.
Use querySelectorAll when selecting multiple elements with any CSS selector.
Use getElementsByClassName or getElementsByTagName for faster selection by class or tag but with less selector flexibility.

💡 Tip

querySelector and querySelectorAll support all CSS selectors, making them versatile for complex selections.

← Previous Next →