prefer-query-selector.md

Prefer .querySelector() over .getElementById(), .querySelectorAll() over .getElementsByClassName() and .getElementsByTagName() and .getElementsByName()

💼🚫 This rule is enabled in the ✅ recommended config. This rule is disabled in the ☑️ unopinionated config.

🔧 This rule is automatically fixable by the --fix CLI option.

It's better to use the same method to query DOM elements. This helps keep consistency and it lends itself to future improvements (e.g. more specific selectors).

Examples

// ❌
document.getElementById('foo');

// ✅
document.querySelector('#foo');

// ❌
document.getElementsByClassName('foo');

// ✅
document.querySelectorAll('.foo');

// ❌
document.getElementsByClassName('foo bar');

// ✅
document.querySelectorAll('.foo.bar');

// ❌
document.getElementsByTagName('main');

// ✅
document.querySelectorAll('main');

// ❌
document.getElementsByClassName(fn());