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

admin管理员组

文章数量:1332389

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?

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?

• javascript
• dom
• css-selectors
• selectors-api

Share Improve this question Follow edited Mar 2, 2012 at 23:27 BoltClock 725k165165 gold badges1.4k1.4k silver badges1.4k1.4k bronze badges asked Apr 8, 2011 at 1:33 ideide 20.8k66 gold badges7171 silver badges112112 bronze badges 1

• The only solution I know of requires looking directly at a subset of the childNodes. However, you say "I actually have a selector that is much longer than p." Can you post a more realistic selector that better reflects your situation? – Chris Calo Commented Oct 23, 2011 at 23:53

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

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

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>

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

I remend 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);

本文标签：