useDomQuerySelector (JavaScript)

Language JavaScript (and super languages)

Summary

Rule available since: v2.4.13
Diagnostic Category: lint/style/useDomQuerySelector
This rule isn’t recommended, so you need to enable it.
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
      "style": {
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/style/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.
  
  ℹ 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/style/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.
  
  ℹ 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/style/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.
  
  ℹ 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");

Options

`ignore`

Allow specific variables to use the older DOM query APIs. This is useful if your application has APIs that expose methods with the same names as DOM query APIs.

1
{
2
  "linter": {
3
    "rules": {
4
      "style": {
5
        "useDomQuerySelector": {
6
          "level": "on",
7
          "options": {
8
            "ignore": [
9
              "store",
10
              "customApi"
11
            ]
12
          }
13
        }
14
      }
15
    }
16
  }
17
}

Valid

These are ignored, so they are not flagged.

1
store.getElementById("COVER_IMAGE");
2
customApi.getElementsByClassName("item");

useDomQuerySelector (JavaScript)

Summary

How to configure

Description

Examples

Invalid

Valid

Options

ignore

Valid

Related links

`ignore`