why js dom api 'querySelector' select itself

Question

I'm confused why $1 is firstBB, The querySelector('.aa .bb') call should execute under #root element.

const $1 = document.querySelector('#root').querySelector('.aa .bb');
const $2 = document.querySelector('#root').querySelector('.aa').querySelector('.bb');

document.querySelector('#result').innerHTML = `$1 is ${$1.id}; $2 is ${$2.id}`

<div class="aa" id="root">
  <div class="bb" id="firstBB">xxx</div>
  <div class="aa">
    <div class="bb" id="secondBB">xxx</div>
  </div>
</div>
<div>Result: <span id="result"></span></div>

Chrome version: 116.0.5845.188

Is this the correct behavior of querySelector?

Maricela

Probably due to CSS specificity. Since #root has a class called aa, I assume selection begins relative to itself. – Conduce

developer.mozilla.org/en-US/docs/Web/API/Element/… – Dorie

selectors is first applied to the whole document, not the baseElement, to generate an initial list of potential elements. The resulting elements are then examined to see if they are descendants of baseElement – Addiction

Great question! – Pioneer

Answer 1

This is no bug. It is the specified behaviour.

Element: querySelector() method

Return value

The first descendant element of baseElement which matches the specified group of selectors. The entire hierarchy of elements is considered when matching, including those outside the set of elements including baseElement and its descendants; in other words, selectors is first applied to the whole document, not the baseElement, to generate an initial list of potential elements. The resulting elements are then examined to see if they are descendants of baseElement. The first match of those remaining elements is returned by the querySelector() method.

(tbh, i also was under the impression that it would select the second, before reading the documentation right now)

Neff

Why does it work in such an unintuitive, inefficient manner? – Addiction

@Addiction I don't remember enough jQuery to be sure, but shot in the dark: because that's how jQuery did it? – Jenkins

Ask the people who wrote the specifications.... – Dorie

@JaredSmith that is not how jquery did it, and that would also not be a good reason for this. – Neff

A request from implementers that was honored? For integration with/due to existing performance optimizations? – Tetrachloride

@GabrielePetrioli I never said it was a good reason lol. Thank you for the correction – Jenkins

@JaredSmith :D yeah, i just meant that i do not think that this would be a part of their reasoning. – Neff

Still confused, what is "descendants"? Why baseElement is the descendant of itself – Maricela

@WhiteWang the way querySelector works is it will first find all .aa .bb elements in the document, so both #firstBB and #secondBB will be found, and then it will filter those elements for these that are descendants of #root. Again both elements are descendants of root. And since querySelector returns only one element, it will return the first of those, so the #firstBB – Neff