7

Say I have an HTML structure like

<div id="a">
  <div id="b">
    <div id="c"></div>
  </div>
</div>

To do a query for the children of "a" using querySelectorAll I can do something like

//Get "b", but not "c"
document.querySelectorAll('#a > div')

My question is: is it possible to do this without the ID, referencing the node directly? I tried doing

var a_div = document.getElementById('a')
a_div.querySelectorAll('> div') //<-- error here

but I get an error telling me that the selector I used is invalid.


And in case anyone is wondering, my real use case would be something more complicated like '> .foo .bar .baz' so I would prefer to avoid manual DOM traversal. Currently I am adding a temporary id to the root div but that seems like an ugly hack...

hugomg
  • 68,213
  • 24
  • 160
  • 246
  • 1
    See also: http://stackoverflow.com/questions/3680876/use-queryselectorall-to-retrieve-direct-children – natevw Nov 11 '14 at 19:23

3 Answers3

11
document.querySelector('#a').querySelectorAll(':scope > div')

I am not sure about browser support, but I use it on chrome and chrome mobile packaged apps and it works fine.

Peter StJ
  • 2,297
  • 3
  • 21
  • 29
  • 6
    [MDN on `:scope` in `querySelector`](https://developer.mozilla.org/en-US/docs/Web/CSS/:scope#Browser_compatibility): Chrome, Firefox 32+, Safari 7, not Opera, not IE. – Chris Morgan Jun 30 '15 at 01:02
5

No, there isn't a way (yet) to reference all childs of some element without using a reference to that element. Because > is a child combinator, which represents a relationship between a parent and child element, a simple selector (a parent) is necessary (which is missing in you example).

In a comment, BoltClock said that the Selectors API Level 2 specification defines a method findAllname may change "which accepts as an argument what will probably be known as a relative selector (a selector that can start with a combinator rather than a compound selector)".
When this is implemented, it can be used as follows:

a_div.findAll('> div');
Community
  • 1
  • 1
Rob W
  • 341,306
  • 83
  • 791
  • 678
  • What is the usual workaround for this though? Is adding a (temporary) id to the root element the only way? – hugomg Jul 11 '12 at 20:23
  • @missingno Yes. The other method is to loop through all `.childNodes`, and test whether the child is a div using `childNodes[i].nodeName.toUpperCase()=='div'`. – Rob W Jul 11 '12 at 20:28
  • 3
    More technically, "Because `>` is a *combinator*", you cannot do this with `querySelectorAll()`. In the near future, you'll be able to do this with `findAll()`, which accepts as an argument what will probably be known as a relative selector (a selector that can start with a combinator rather than a compound selector). See the [Selectors API level 2](http://www.w3.org/TR/selectors-api2) spec. – BoltClock Jul 12 '12 at 06:37
  • @BoltClock Thanks for the info, I've amended my answer. – Rob W Jul 12 '12 at 08:16
-1

I think I must be misunderstanding your question, but this is how I'm interpreting it..

var a = document.getElementById('a')
var results = a.querySelectorAll('div');

results will hold all your child divs now.

jeschafe
  • 2,683
  • 1
  • 14
  • 13
  • 5
    `results` will not only hold the child divs, but **all** descendant divs. – Rob W Jul 11 '12 at 20:20
  • 1
    I want to exclude the "c" div from the results though. The '#a > div' selector only returns the "b" div. – hugomg Jul 11 '12 at 20:21