Queryselectorall With Descendant Not Selecting Correctly

I have the following DOM structure: I want to select the 3 a tags using vanilla javascript and starting from the li with the class test. I put this in a parent variable and then u

Solution 1:

This is because the first <a> tag you're trying to ignore still falls into the selector rule ul > li > a. So, even though you start the query with the <li class="test"> as the root (which does work by the way, I don't know why the other answers say that the document is still the root), the first child element it finds is the <a> tag and, indeed, it is the child of an <li> which is the child of a <ul>. The fact that this winds up going "above" your specified root is ignored.

Edit: If you want the selector rule to be scoped to the root as well, you can use this instead:

parent.querySelectorAll(":scopeul > li > a");

And to further clarify, browser CSS engines evaluate CSS rules right-to-left. In your mind, you want the browser to start at the root (the parent <li class="test">) and then find a <ul> tag and then find a <li> tag and then find an <a> tag.

However, the browser starts with the root, but then looks for all of the <a> tags below the root. Then it checks if the <a> tag is within an <li> and then if the <li> is within a <ul>. So the <li class="parent"> tag really is the root, but it does not follow the left-to-right hierarchy of your selector rule after that, it goes right-to-left.

Solution 2:

It's because your first <a> also matches ul > li > a, and since said a is still a descendant of the element qSA was called upon, it gets included in the NodeList.

https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelectorAll#Javascript

Element.querySelector and Element.querySelectorAll are somewhat quirky in that respect: although the only matching elements must be children of the Element you called it on, the selector string still starts at the document level - it doesn't verify the selector by isolating the element and its descendants first.

const child = document.querySelector('#child');
const span = child.querySelector('#parent span');
console.log(span.textContent);

<divid="parent"><divid="child"><span>text</span></div></div>

Solution 3:

Use this to define your var navChild = document.querySelectorAll("test > ul > li > a");. I had to use a running example to solve the issue. This will get the 3 vanilla <a> you want

The querySelectorAll() method returns all elements in the document that matches a specified CSS selector(s), as a static NodeList object.

I presume this is true even when you set a parent within the document.

var navChild = document.querySelectorAll(".test > ul > li > a");
for (i = 0; i < navChild.length; i++) {
        navChild[i].style.backgroundColor = "red";
}
//console.log(navChild.lenght);//console.log(navChild);

<ul><liclass="test"><a>qqqq</a><ul><li><a>aaa</a></li><li><a>bbb</a></li><li><a>ccc</a></li></ul></li></ul>