Using querySelectorAll to retrieve direct children

by

Good question. At the time it was asked, a universally-implemented way to do “combinator rooted queries” (as John Resig called them) did not exist.

Now the :scope pseudo-class has been introduced. It is not supported on [pre-Chrominum] versions of Edge or IE, but has been supported by Safari for a few years already. Using that, your code could become:

let myDiv = getElementById("myDiv");
myDiv.querySelectorAll(":scope > .foo");

Note that in some cases you can also skip .querySelectorAll and use other good old-fashioned DOM API features. For example, instead of myDiv.querySelectorAll(":scope > *") you could just write myDiv.children, for example.

Otherwise if you can’t yet rely on :scope, I can’t think of another way to handle your situation without adding more custom filter logic (e.g. find myDiv.getElementsByClassName("foo") whose .parentNode === myDiv), and obviously not ideal if you’re trying to support one code path that really just wants to take an arbitrary selector string as input and a list of matches as output! But if like me you ended up asking this question simply because you got stuck thinking “all you had was a hammer” don’t forget there are a variety of other tools the DOM offers too.

More Related Contents:

  1. Get element’s CSS selector (when it doesn’t have an id)
  2. Get the DOM path of the clicked
  3. Why does document.querySelectorAll return a StaticNodeList rather than a real Array?
  4. How to generate unique css selector for DOM element?
  5. How to do a wildcard element name match with “querySelector()” or “querySelectorAll()” in JavaScript?
  6. How to find event listeners on a DOM node in JavaScript or in debugging?
  7. Is there a spec that the id of elements should be made global variable?
  8. Check if an element contains a class in JavaScript?
  9. Chrome extension – retrieving global variable from webpage
  10. How can I loop through ALL DOM elements on a page?
  11. How to convert a DOM node list to an array in Javascript?
  12. Unable to understand useCapture parameter in addEventListener
  13. “Access is denied” JavaScript error when trying to access the document object of a programmatically-created (IE-only)
  14. Get unique selector of element in Jquery
  15. Does javascript process using an elastic racetrack algorithm
  16. Is innerHTML asynchronous?
  17. Change ‘s option and trigger events with JavaScript
  18. How to unload a javascript from an html?
  19. Should I use document.createDocumentFragment or document.createElement
  20. How to get nodes lying inside a range with javascript?
  21. Why does JavaScript navigator.appName return Netscape for Safari, Firefox and Chrome?
  22. jQuery/Javascript – How to wait for manipulated DOM to update before proceeding with function
  23. Finding child element of parent with JavaScript
  24. Is it possible to get element’s numerical index in its parent node without looping?
  25. Is there any way of passing additional data via custom events?
  26. What damage is done by document.write()? [duplicate]
  27. How can I remove wrapper (parent element) without removing the child?
  28. Can I add arbitrary properties to DOM objects?
  29. Is there any way to find an element in a documentFragment?
  30. In JavaScript, how can I replace text in an HTML page without affecting the tags?

Leave a Comment