← Back to rules

unicorn/prefer-query-selector Pedantic

🛠️ An auto-fix is available for this rule for some violations.

What it does

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

Why is this bad?

• Using .querySelector() and .querySelectorAll() is more flexible and allows for more specific selectors.
• 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

Examples of incorrect code for this rule:

document.getElementById("foo");
document.getElementsByClassName("foo bar");
document.getElementsByTagName("main");
document.getElementsByClassName(fn());
document.getElementsByName("foo");

Examples of correct code for this rule:

document.querySelector("#foo");
document.querySelector(".bar");
document.querySelector("main #foo .bar");
document.querySelectorAll(".foo.bar");
document.querySelectorAll("li a");
document.querySelector("li").querySelectorAll("a");

How to use

To enable this rule using the config file or in the CLI, you can use:

Config (.oxlintrc.json)

{
  "rules": {
    "unicorn/prefer-query-selector": "error"
  }
}

Config (oxlint.config.ts)

import { defineConfig } from "oxlint";

export default defineConfig({
  rules: {
    "unicorn/prefer-query-selector": "error",
  },
});

CLI

oxlint --deny unicorn/prefer-query-selector

Version

This rule was added in v0.0.15.

References

• Rule Source
• Upstream rule docs
• Open rule in Oxc Playground