JavaScript: Selecting Elements By ID, Class, and Tags

In JavaScript, querySelector() and querySelectorAll() are powerful, convenient, and preferred methods for selecting elements in your webpage.

However, JavaScript also provides older, more traditional methods like:

1. getElementById()
2. getElementsByClassName()
3. getElementsByTagName()

In this article, you'll learn about these older selection methods in JavaScript with the help of examples.

---

Select Elements by ID

The getElementById() method selects an HTML element using its unique id. Its syntax is:

document.getElementById("id");

Example

Suppose you have an HTML element with the id title. Then, this is how you select it:

document.getElementById("title")

The equivalent code using querySelector() is:

document.querySelector("#title")

Advantages of getElementById()

• It has a very fast execution speed because browsers optimize id lookups.
• It is simple and works reliably.

Despite all these advantages, querySelector() is still the better option.

Why querySelector() is Better

• The querySelector() method is more flexible (can select by id, class, or tag) while still selecting a single element.

---

Select Elements by Class

The getElementsByClassName() method selects all elements with a given class and returns an HTMLCollection object (a live list of elements). Its syntax is:

document.getElementsByClassName("className")

Note: A live object is one that is automatically updated when the underlying document (webpage) is changed.

Example

Suppose you want to select elements with the class box. Then, you can select them with the following code:

document.getElementsByClassName("box")

The equivalent code using querySelectorAll() is:

document.querySelectorAll(".box")

Advantages of getElementByClassName()

• It runs faster than querySelectorAll() for large lists of elements.
• It updates automatically if elements with that class are added/removed.

Why querySelectorAll() is Better

• getElementsByClassName() returns a live collection, which behaves unpredictably. By contrast, querySelectorAll() returns...
• querySelectorAll() supports advanced CSS selectors (like .box > p).
• getElementsByClassName() requires for loops instead of the modern forEach() method.
• querySelectorAll() is more modern, flexible, and easier to use.

---

Select Elements by HTML Tag

The getElementsByTagName() method selects all elements of a given tag name (e.g., <p>, <div>, <button>). Its syntax is:

document.getElementsByTagName("tag")

Example

Suppose you want to select all paragraph elements (<p>). This is how you do it:

document.getElementsByTagName("p")

The equivalent code using querySelectorAll() is:

document.querySelectorAll("p")

Advantages of getElementsByTagName()

• It works faster than querySelectorAll() for large numbers of elements.
• It works well for form elements (<input>, <button>, etc.).

Why querySelectorAll() is Better

• querySelectorAll() is more precise, with full CSS selector support.
• getElementsByTagName() returns a live collection, which can cause issues.
• getElementsByTagName() has no filtering support. For example, the code document.getElementsByTagName("p.special") won't work.