useDomQuerySelector

JavaScript (and super languages)

Summary

Diagnostic Category: lint/nursery/useDomQuerySelector
This rule has an unsafe fix.
The default severity of this rule is information.
Sources:
- Inspired from unicorn/prefer-query-selector

How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "nursery": {
5
        "useDomQuerySelector": "error"
6
      }
7
    }
8
  }
9
}

Description

Prefer querySelector() and querySelectorAll() over older DOM query APIs.

This rule prefers querySelector() over getElementById(), and querySelectorAll() over getElementsByClassName(), getElementsByTagName(), and getElementsByName().

Using the more modern DOM query APIs can often make the intent of a DOM lookup clearer and more concise than the older APIs, especially for complex selectors or if filtering by multiple attributes. Additionally, these newer APIs are more flexible and can be easily refined later with more specific selectors without needing to change the method being called.

Examples

Invalid

1
document.getElementById("foo");

code-block.js:1:10 lint/nursery/useDomQuerySelector  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ This DOM query uses an older DOM query API.
  
  > 1 │ document.getElementById(“foo”);
      │          ^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Using the more modern DOM query APIs consistently makes DOM lookups easier to read and easier to refine with more specific selectors.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.
  
  ℹ Unsafe fix: Use .querySelector() instead.
  
    1   │ - document.getElementById(“foo”);
      1 │ + document.querySelector(“#foo”);
    2 2 │

1
document.getElementsByClassName("foo bar");

code-block.js:1:10 lint/nursery/useDomQuerySelector  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ This DOM query uses an older DOM query API.
  
  > 1 │ document.getElementsByClassName(“foo bar”);
      │          ^^^^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Using the more modern DOM query APIs consistently makes DOM lookups easier to read and easier to refine with more specific selectors.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.
  
  ℹ Unsafe fix: Use .querySelectorAll() instead.
  
    1   │ - document.getElementsByClassName(“foo·bar”);
      1 │ + document.querySelectorAll(“.foo.bar”);
    2 2 │

1
document.getElementsByTagName("main");

code-block.js:1:10 lint/nursery/useDomQuerySelector  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ This DOM query uses an older DOM query API.
  
  > 1 │ document.getElementsByTagName(“main”);
      │          ^^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Using the more modern DOM query APIs consistently makes DOM lookups easier to read and easier to refine with more specific selectors.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.
  
  ℹ Unsafe fix: Use .querySelectorAll() instead.
  
    1   │ - document.getElementsByTagName(“main”);
      1 │ + document.querySelectorAll(“main”);
    2 2 │

Valid

1
document.querySelector("#foo");

1
document.querySelectorAll(".foo.bar");