CODEWITHSUNDEEP
javascriptdomcss-selectorsselectors-api
ide
ide

Reputation: 20788

Is there a way to have querySelectorAll search only the children of an element, and not all descendants?

For example, if I have a snippet of a document:

<div> <!-- I have a reference to this: "outerDiv". -->
  <p> <!-- This is the <p> I want to select. -->
    <div>
      <p> <!-- I don't want to select this <p>. --> </p>
    </div>
  </p>
</div>

(This is a hypothetical document. HTML parsers would not actually construct a DOM that looks like this.)

and a reference to the outermost <div> element, I'd like to somehow use outerDiv.querySelectorAll('p') to select only the <p> elements that are direct children of the outer <div>.

I can't use outerDiv.childNodes and search for the <p> elements because I actually have a selector that is much longer than "p" (e.g., it might look like "p > a > b"). I also don't have control over the HTML and can't use jQuery or other JavaScript libraries.

It's also not sufficient to prepend "div > " to the selector and apply it from outerDiv.parentNode since the inner <p> also matches "div > p".

Is there a clean way to do this without having to parse the CSS selector myself, too much?

Upvotes: 4

Views: 5102

Answers (3)

th317erd
th317erd

Reputation: 305

I recommend you go with Nick Pantelidis's answer, but just for posterity, here is another possible solution.

This uses Element.matches to test if the selector matches each specific child element (remember, unlike childNodes, children only contains Node.ELEMENT_NODE nodes):

function querySelectChildren(element, selector) {
  return Array.prototype.find.call(element.children, (child) => child.matches(selector));
}

let p = querySelectChildren(divRef, 'p');
console.log(p);

Upvotes: 0

Thunderarea
Thunderarea

Reputation: 479

Supposing that you have a reference to the outer div you can use the below expression:

outerDiv.querySelectorAll(":scope > p");

This expression will select all p elements that are direct children of outerDiv element because as referred on developer.mozilla.org

When used from a DOM API such as querySelector(), querySelectorAll(), matches(), or Element.closest(), :scope matches the element you called the method on.

(in the following code snippet I dont use the example with paragraph because is wrong to put a div or p element inside a p element. Check these links about this: Stack Overflow & Mozilla Developer)

//reference to outer div
let outerDiv = document.getElementById("outerDiv");

let selected = outerDiv.querySelectorAll(":scope > div");

console.log(selected);//it returns only the direct child div
<div id="outerDiv"> <!-- I have a reference to this: "outerDiv". -->
  <div class="I want this"> <!-- This is the <div> I want to select. -->
     <div class="I dont want this"> <!-- I don't want to select this <div>. --></div>
  </div>
</div>

Upvotes: 5

Billy Moon
Billy Moon

Reputation: 58521

Can you use body > div > p or whatever lies outside of the outermost div?

Upvotes: 1

Related Questions