useDomNodeTextContent (JavaScript)

Language JavaScript (and super languages)

Summary

Rule available since: v2.4.13
Diagnostic Category: lint/performance/useDomNodeTextContent
This rule is recommended, meaning it is enabled by default.
This rule has an unsafe fix.
The default severity of this rule is warning.
Sources:
- Same as unicorn/prefer-dom-node-text-content

How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "performance": {
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/performance/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.
  
  ℹ 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/performance/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.
  
  ℹ Unsafe fix: Use textContent instead.
  
    1 │ const·{textContent:·innerText}·=·node;
      │        +++++++++++++

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

code-block.js:1:6 lint/performance/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.
  
  ℹ 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;