prefer-dom-node-text-content

📡 Live from GitHub — This documentation is fetched directly from prefer-dom-node-text-content.md and cached for 6 hours.

Keywords: textContent, innerText, DOM, performance, ESLint rule, auto-fix, LLM-optimized

Prefer textContent over innerText. This rule is part of eslint-plugin-conventions.

Prefer textContent over innerText. This rule is part of eslint-plugin-conventions.

Quick Summary

Aspect	Details
Severity	Warning (performance)
Auto-Fix	✅ Yes (converts property)
Category	Quality
ESLint MCP	✅ Optimized for ESLint MCP integration
Best For	DOM manipulation, performance-critical code

Rule Details

innerText triggers reflow and is slower. textContent is more performant and works in all contexts.

Why This Matters

Issue	Impact	Solution
⚡ Performance	innerText triggers reflow	textContent
🎨 Style awareness	innerText reads computed style	Avoid when not needed
🖥️ SSR support	innerText requires layout	textContent works always

Examples

❌ Incorrect

const text = element.innerText;  // Triggers reflow
element.innerText = 'Hello';  // Slower

✅ Correct

const text = element.textContent;  // No reflow
element.textContent = 'Hello';  // Faster

// Use innerText only when you need style-aware text
// (hidden elements, CSS text-transform, etc.)

Configuration Examples

Basic Usage

{
  rules: {
    'conventions/prefer-dom-node-text-content': 'warn'
  }
}

prefer-code-point - Unicode handling

Known False Negatives

The following patterns are not detected due to static analysis limitations:

Dynamic Variable References

Why: Static analysis cannot trace values stored in variables or passed through function parameters.

// ❌ NOT DETECTED - Value from variable
const value = externalSource();
processValue(value); // Variable origin not tracked

Mitigation: Implement runtime validation and review code manually. Consider using TypeScript branded types for validated inputs.

Imported Values

Why: When values come from imports, the rule cannot analyze their origin or construction.

// ❌ NOT DETECTED - Value from import
import { getValue } from './helpers';
processValue(getValue()); // Cross-file not tracked

Mitigation: Ensure imported values follow the same constraints. Use TypeScript for type safety.