Explain the difference between `document.querySelector()` and `document.getElementById()`

TL;DR

document.querySelector() and document.getElementById() are both methods used to select elements from the DOM, but they have key differences. document.querySelector() can select any element using a CSS selector and returns the first match, while document.getElementById() selects an element by its ID and returns the element with that specific ID.

// Using document.querySelector()
const element = document.querySelector('.my-class');

// Using document.getElementById()
const elementById = document.getElementById('my-id');

Difference between document.querySelector() and document.getElementById()

document.querySelector()

• Can select elements using any valid CSS selector, including class, ID, tag, attribute, and pseudo-classes
• Returns the first element that matches the specified selector
• More versatile but slightly slower due to the flexibility of CSS selectors

// Select the first element with the class 'my-class'
const element = document.querySelector('.my-class');

// Select the first <div> element
const divElement = document.querySelector('div');

// Select the first element with the attribute data-role='button'
const buttonElement = document.querySelector('[data-role="button"]');

document.getElementById()

• Selects an element by its ID attribute
• Returns the element with the specified ID
• Faster and more efficient for selecting elements by ID, but less versatile

// Select the element with the ID 'my-id'
const elementById = document.getElementById('my-id');

Key differences

• Selector type: document.querySelector() uses CSS selectors, while document.getElementById() uses only the ID attribute.
• Return value: document.querySelector() returns the first matching element, whereas document.getElementById() returns the element with the specified ID.
• Performance: document.getElementById() is generally faster because it directly accesses the element by ID, while document.querySelector() has to parse the CSS selector.

Further reading

• MDN Web Docs: document.querySelector()
• MDN Web Docs: document.getElementById()