no-multiple-access-dom-element.md

Disallow multiple access of same DOM element (@ecocode/no-multiple-access-dom-element)

⚠️ This rule warns in the ✅ recommended config.

Why is this an issue?

Accessing the Document Object Model (DOM) is a relatively expensive operation in terms of performance. Each time you access the DOM, the browser needs to traverse the document tree to find the requested element. By assigning the DOM object to a variable when accessed multiple times, you avoid redundant traversals, leading to improved performance.

Assigning the DOM object to a variable not only improves performance but also enhances code readability. It makes the code more concise and self-explanatory. Developers reading the code can understand that the variable holds a reference to a specific DOM element, and its subsequent use is likely for multiple operations.

Here's an example in JavaScript to illustrate this rule:

const width = document.getElementById('block').clientWidth;
const height = document.getElementById('block').clientHeight; // Non-compliant

const blockElement = document.getElementById('block'); // Compliant
const width = blockElement.clientWidth;
const height = blockElement.clientHeight;

In the first example, getElementById is called twice, potentially resulting in two separate traversals of the DOM tree. In the second example, the DOM element reference is cached in the blockElement variable, and subsequent property accesses use this cached reference.

Resources

Documentation

• CNUMR best practices - Reduce DOM access via JavaScript
• Mozilla Web Technology for Developers - Tips for writing more efficient code