useDomNodeTextContent

JavaScript (and super languages)

Summary

Diagnostic Category: lint/nursery/useDomNodeTextContent
This rule has an unsafe fix.
The default severity of this rule is information.
Sources:
- Same as unicorn/prefer-dom-node-text-content

How to configure

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

Description

Prefer .textContent over .innerText for DOM node text.

Because innerText depends on rendered layout and CSS, it should only be used when you specifically need that behavior. textContent is usually faster and more predictable than innerText.

Examples

Invalid

1
const text = node.innerText;

code-block.js:1:19 lint/nursery/useDomNodeTextContent  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ innerText is not recommended for reading DOM node text.
  
  > 1 │ const text = node.innerText;
      │                   ^^^^^^^^^
    2 │ 
  
  ℹ innerText depends on rendered layout and CSS, so it can be slower and produce different results from the DOM tree’s text content.
  
  ℹ Use textContent when you want the node’s text without rendered-text behavior.
  
  ℹ 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 textContent instead.
  
    1   │ - const·text·=·node.innerText;
      1 │ + const·text·=·node.textContent;
    2 2 │

1
const {innerText} = node;

code-block.js:1:8 lint/nursery/useDomNodeTextContent  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ innerText is not recommended for reading DOM node text.
  
  > 1 │ const {innerText} = node;
      │        ^^^^^^^^^
    2 │ 
  
  ℹ innerText depends on rendered layout and CSS, so it can be slower and produce different results from the DOM tree’s text content.
  
  ℹ Use textContent when you want the node’s text without rendered-text behavior.
  
  ℹ 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 textContent instead.
  
    1 │ const·{textContent:·innerText}·=·node;
      │        +++++++++++++

1
node["innerText"] = "Biome";

code-block.js:1:6 lint/nursery/useDomNodeTextContent  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ innerText is not recommended for reading DOM node text.
  
  > 1 │ node[“innerText”] = “Biome”;
      │      ^^^^^^^^^^^
    2 │ 
  
  ℹ innerText depends on rendered layout and CSS, so it can be slower and produce different results from the DOM tree’s text content.
  
  ℹ Use textContent when you want the node’s text without rendered-text behavior.
  
  ℹ 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 textContent instead.
  
    1   │ - node[“innerText”]·=·“Biome”;
      1 │ + node[“textContent”]·=·“Biome”;
    2 2 │

Valid

1
const text = node.textContent;

1
const {textContent} = node;