调用document.getElementById等方法时底层发生了什么？是否涉及正则？

Great question! Let’s cut through the mystery—none of these methods use regular expressions; instead, they rely on optimized browser DOM engine logic built for speed and precision. Here’s a breakdown of what happens behind the scenes:

document.getElementById(): The Fastest Lookup #

Browsers maintain an internal hash table (think of it as a super-fast dictionary) where every element with an id attribute is stored. The id string acts as the key, and the corresponding DOM element is the value. When you call this method:

• The browser does an O(1) hash table lookup (near-instant) using your input string.
• Since HTML requires id values to be unique across the document, it returns the matching element immediately if found, or null if not.
• No DOM tree traversal needed here—it’s all direct indexed access.

getElementsByTagName(): Tree Traversal with Dynamic Collections #

This method returns a live HTMLCollection (meaning it updates automatically if the DOM changes). Here’s what goes on:

• The browser initiates a depth-first traversal of the entire DOM tree.
• For each element, it does an exact string comparison between the element’s tag name (e.g., div, p) and your input. No pattern matching—just straight equality checks.
• All matching elements are added to the collection. Since it’s live, any later changes to the DOM (like adding/removing elements with that tag) will update the collection automatically (this sometimes means a re-traversal when you access the collection’s properties).

getElementsByClassName(): Class Name Matching (No Regex!) #

Similar to tag name lookup, but with a small twist for class attributes (which can have multiple space-separated values):

• When you call this method, the browser traverses the DOM tree just like with tag names.
• For each element, it splits the class attribute value into individual class names (using spaces as separators).
• It then does an exact string match between your input class name and each of the element’s class names. Again, no regex—just checking if the exact string exists in the list.
• Like getElementsByTagName, it returns a live HTMLCollection that syncs with DOM changes.

Why No Regex? #

Regex is powerful for pattern matching, but these methods are designed for exact, straightforward lookups. Using regex would add unnecessary overhead and slow down performance—something browsers prioritize above all else. The DOM engine’s optimized traversal and indexed lookups are far more efficient for these use cases.

Modern browsers (like Chrome’s Blink or Firefox’s Gecko) also add extra optimizations, like caching frequent queries or maintaining internal indexes for common tag/class names, to make these methods even faster.

内容的提问来源于stack exchange，提问作者Slev7n