JavaScript变量是引用、值还是指针？querySelector赋值相关疑问

Great question—let’s unpack this clearly, since it’s a common point of confusion when working with the DOM.

Are the two code examples identical? #

Short answer: No, they’re not identical, and the difference matters for both performance and reliability.

What’s happening under the hood? #

When you run document.querySelector(".class"), the browser does the work of:

1. Traversing the entire DOM tree to find the first element matching the selector .class
2. Returning a reference to that DOM element object (not a copy of the element itself—DOM elements are JavaScript objects, which are always handled by reference in JS).

So in your first example:

// 假设仅有一个 ".class" 元素
var element = document.querySelector(".class");
element.classList.remove("effect1");
element.classList.add("effect2");

• You only run the DOM search once, store the reference to the element in the element variable, then perform both class operations directly on that reference.

In your second example:

document.querySelector(".class").classList.remove("effect1");
document.querySelector(".class").classList.add("effect2");

• You run the DOM search twice: once for the remove call, and another time for the add call. Each time, the browser has to re-scan the DOM to find the element.

Does storing the result in a variable save overhead? #

Absolutely! DOM traversal (like what querySelector does) is a relatively expensive operation—especially on large, complex pages. Repeating that traversal unnecessarily wastes browser resources, which can lead to slower page performance (even if the difference is small in simple cases).

By storing the element reference in a variable, you avoid that repeated DOM search. All subsequent operations use the existing reference, which is much faster.

Bonus: Reliability difference #

Even if you only have one .class element right now, there’s another benefit to using the variable approach: if the DOM changes between the two operations (for example, if the element is removed and re-added by some other code), the second querySelector might return a different element (or null), leading to unexpected behavior. The variable approach ensures you’re always working with the exact element you originally found.

To sum up: #

• querySelector returns a reference to the DOM element (not a value/copy).
• Storing this reference in a variable is better for performance (avoids repeated DOM searches) and reliability (ensures you target the same element every time).
• The two examples will produce the same result only if the DOM doesn’t change between the two querySelector calls, but the first approach is always preferable.

内容的提问来源于stack exchange，提问作者Bryan Joseph Myers