In the browser DOM, what does Element.closest('.row') return, and how does it differ from Element.matches('.row')?

## Two questions, two methods Both methods are on `Element` and both are backed by the same selector engine, but they answer different questions. `element.matches(selectors)` asks: *does this element match?* It returns `true` or `false` and touches nothing else in the tree. `element.closest(selectors)` asks: *what is the nearest matching element at or above this one?* It returns an `Element` or `null`. ```js const btn = document.querySelector('#save'); btn.matches('button[type="submit"]'); // true / false btn.closest('form'); // the <form> element, or null ``` ## The exact algorithm of closest() `closest` walks the **inclusive ancestor** chain. The steps are: 1. Start at the element itself. 2. If the current element matches the selector, return it. 3. Move to the parent element and repeat. 4. If there is no parent element left, return `null`. Two details follow directly from that. **It includes the element itself.** `el.closest('.row')` on an element that already carries `.row` returns `el`. This is the single most common misreading — people expect "closest ancestor" and are surprised when the starting node comes back. When you specifically need a strict ancestor, start one level up: `el.parentElement?.closest('.row')`. **It stops at the root of the current tree.** The chain is made of *elements*, so it ends at `<html>` in a document — `document` is a `Document`, not an `Element`, so `closest` never returns it. In a detached subtree the walk simply ends at the topmost detached element, which is why `closest` still works on nodes that are not in the document. Inside a shadow tree the walk ends at the shadow root, so `closest` does not escape into the host's tree. ```js document.documentElement.closest('html'); // <html> document.documentElement.closest('body'); // null — never goes downwards ``` `closest` never searches downwards or sideways. If the thing you want is inside, that is `querySelector`; if it is a sibling, you need to go up and then query down. ## Selector lists and nearest-wins Both methods accept a selector *list*. For `closest`, proximity wins over list order: `el.closest('.row, .card')` returns whichever of the two is encountered first walking up, regardless of which one you wrote first. That makes it a clean way to ask "which of these containers am I in", but it also means you cannot infer *which* selector matched from the return value alone — test the returned element with `matches` if you need to branch: ```js const container = el.closest('.row, .card'); if (container?.matches('.card')) { /* card behaviour */ } ``` That pairing — `closest` to find, `matches` to classify — is the idiomatic combination. ## Errors and null handling A malformed selector throws `SyntaxError` from both methods; they do not return `null`/`false` for bad syntax. Anything interpolated from data must be escaped with `CSS.escape()`. Because `closest` returns `null` for "no such container", the return value is a natural guard: ```js const row = el.closest('[data-row-id]'); if (!row) return; // not inside a row at all const id = row.getAttribute('data-row-id'); ``` Compare this with the manual loop it replaces: ```js let node = el; while (node && !node.matches('[data-row-id]')) node = node.parentElement; ``` The hand-written version is what `closest` does, and writing it out is a fine way to prove you understand the method — but shipping it is unnecessary, since `closest` has been supported everywhere for years. ## Choosing between them Reach for `matches` when you already hold the element and only need a predicate — filtering an array of elements, asserting a precondition, branching on a class or attribute state. Reach for `closest` when you hold a deep node and need the meaningful container above it: the row, the card, the form, the dialog, the element carrying the id you need. Both keep your code declarative in terms of selectors rather than hard-coded parent hops such as `el.parentElement.parentElement`, which break the moment someone adds a wrapper.