Multiple descendant selectors, bug or misunderstanding?

Question

Shouldn't the following two approaches to selecting a node produce the same result?

let tmp = fruits.querySelector("ul:first-of-type li:first-of-type");
tmp = tmp.querySelector("span")

vs.

let tmp = fruits.querySelector("ul:first-of-type li:first-of-type span");

(See it in action here)

I've tested this in both firefox and chrome. Different results in both cases. Can anybody please explain why?

Example in stack snippet:

let fruits = document.querySelector("[data-segment='fruits']");
console.log(fruits);
let tmp = fruits.querySelector("ul:first-of-type li:first-of-type")
tmp = tmp.querySelector("span")
console.log("Works:")
console.log(tmp)
console.log("Does not work:")
console.log(fruits.querySelector("ul:first-of-type li:first-of-type span"))

<main id="app" data-v-app="">
  <section>
    <h2>Tree</h2>
    <ul role="tree">
      <li role="treeitem" data-segment="fruits" aria-level="1" aria-setsize="3" aria-posinset="1" aria-expanded="true"><span tabindex="0">Fruits</span>
        <ul role="group">
          <li role="none" data-segment="oranges" aria-level="2" aria-setsize="5" aria-posinset="1"><span tabindex="-1">Oranges</span>
            <!--v-if-->
          </li>
          <li role="none" data-segment="pineapple" aria-level="2" aria-setsize="5" aria-posinset="2"><span tabindex="-1">Pineapple</span>
            <!--v-if-->
          </li>
          <li role="treeitem" data-segment="apples" aria-level="2" aria-setsize="5" aria-posinset="3" aria-expanded="false"><span tabindex="-1">Apples</span>
            <ul role="group">
              <li role="none" data-segment="macintosh" aria-level="3" aria-setsize="3" aria-posinset="1"><span tabindex="-1">Macintosh</span>
                <!--v-if-->
              </li>
              <li role="none" data-segment="granny_smith" aria-level="3" aria-setsize="3" aria-posinset="2"><span tabindex="-1">Granny Smith</span>
                <!--v-if-->
              </li>
              <li role="none" data-segment="fuji" aria-level="3" aria-setsize="3" aria-posinset="3"><span tabindex="-1">Fuji</span>
                <!--v-if-->
              </li>
            </ul>
          </li>
          <li role="none" data-segment="bananas" aria-level="2" aria-setsize="5" aria-posinset="4"><span tabindex="-1">Bananas</span>
            <!--v-if-->
          </li>
          <li role="none" data-segment="pears" aria-level="2" aria-setsize="5" aria-posinset="5"><span tabindex="-1">Pears</span>
            <!--v-if-->
          </li>
        </ul>
      </li>
      <li role="none" data-segment="vegetables" aria-level="1" aria-setsize="3" aria-posinset="2"><span tabindex="-1">Vegetables</span>
        <!--v-if-->
      </li>
      <li role="none" data-segment="grains" aria-level="1" aria-setsize="3" aria-posinset="3"><span tabindex="-1">Grains</span>
        <!--v-if-->
      </li>
    </ul>
  </section>
</main>

[The last example pretty much explains why it works that way](https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelector) — Jay Nyxed, Apr 11 '21 at 10:55
the most upsetting thing for me is that `fruits.querySelector("ul:first-of-type li:first-of-type")` selects the *Oranges* `
[Duplicate](https://google.com/search?q=site%3Astackoverflow.com+js+queryselector+matches+element+outside+of+parent) of [Why does querySelector('div span') match even though querySelector('div') does not?](https://stackoverflow.com/q/64522987/4642212) and [queryselectorAll with descendant not selecting correctly](https://stackoverflow.com/q/49545252/4642212). — Sebastian Simon, Apr 11 '21 at 13:20

score 2 · Answer 1 · answered Apr 11 '21 at 11:03

2

The documentation explains it:

element = baseElement.querySelector(selectors);
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.

(Emphasis mine.)

Let’s consider a simplified example:

console.log(document.getElementById("a").querySelector("ul li span"));

<ul>
  <li id="a"><span>A</span>
    <ul>
      <li><span>B</span></li>
    </ul>
  </li>
</ul>

Here, baseElement is document.getElementById("a"); selectors is "ul li span".

document.querySelector("ul li span") indeed includes both <span>s, and both of them are inside baseElement. <span>A</span> happens to be the first one that is in this set.

There’s a rather new pseudo-class called :scope that may help here:

console.log(document.getElementById("a").querySelector(":scope ul li span"));

<ul>
  <li id="a"><span>A</span>
    <ul>
      <li><span>B</span></li>
    </ul>
  </li>
</ul>

answered Apr 11 '21 at 11:03

Sebastian Simon

18,263
7
55
75

It just occurred to me that you can't have a relative selector that starts with a descendant combinator - the only instance of the :scope pseudo being mandatory in a scoped selector. – BoltClock Apr 11 '21 at 12:30
Ah, @BoltClock, I remember when you'd have written a beautiful canonical answer to this question yourself. For what it's worth: I miss those days (and please do feel free to delete this horribly tangential comment once you've read it) – David Thomas Apr 11 '21 at 13:13
@David: I don't It must've been forever. You happen to have a link? (Unless it's [this one](https://stackoverflow.com/questions/28708741/how-do-i-select-an-element-based-on-the-state-of-another-element-in-the-page-wit/28793064#28793064).) – BoltClock Apr 11 '21 at 13:16
@BoltClock, it wasn't so much that I remembered a specific answer you wrote it's just that I recalled reading several of your answers in which you went to the spec and wrote something along the lines of an essay - in an engaging manner - to fully and exhaustively answer the question posed. – David Thomas Apr 11 '21 at 18:01
1

@David: Oh, right, "you'd have written", not "you'd written". Yeah, I would have, though it'd probably be roughly the same as what Sebastian's got here, with the exception that I'd quote the DOM spec and not MDN (but MDN is just fine here). – BoltClock Apr 12 '21 at 02:35

connexo · Answer 2 · 2021-04-11T11:30:46.603

el.querySelector(selector) can return surprising results if you're not aware of how it works in the background.

 el.querySelector(selector)

What really is going on is like this:

 (el, selector) => [...document.querySelectorAll(selector)].filter(node => el !== node && el.contains(node))[0]

See this example:

const el = document.getElementById('outer');
const selector = 'span > span';
console.log(el.querySelector(selector).id); // logs "inner", not "innermost"
// same as if you did
console.log([...document.querySelectorAll(selector)].filter(node => el !== node && el.contains(node))[0].id);

<span id="outermost">
  <span id="outer">
    <span id="inner">
      <span id="innermost"></span>
    </span>
  </span>
</span>

So el.querySelector(selector) returns the first match from if you did document.querySelectorAll(selector) that satisfies the condition that the node found must be a descendant of el.

Even more surprising, el.querySelector even finds a match if you pass a selector that you'd think has no matches because parts of the selector aren't even inside the el:

const el = document.getElementById('outer');
const selector = '#outermost > span > span';
console.log(el.querySelector(selector).id); // logs "inner"!
// same as if you did
console.log([...document.querySelectorAll(selector)].filter(node => el !== node && el.contains(node))[0].id);

<span id="outermost">
  <span id="outer">
    <span id="inner">
      <span id="innermost"></span>
    </span>
  </span>
</span>

Multiple descendant selectors, bug or misunderstanding?

2 Answers2

Return value