Using querySelectorAll to retrieve direct children

Question

I am able to do this    lt div id  myDiv  gt      lt div class  foo  gt  lt  div gt   lt  div gt    myDiv   getElementById  myDiv    myDiv querySelectorAll   myDiv  gt   foo      That is  I can successfully retrieve all the direct children of the myDiv element that have class  foo   The problem is  it bothers me that I must include the  myDiv in the selector  because I am running the query on the myDiv element  so it is obviously redundant    I ought to be able to leave the  myDiv off  but then the selector is not legal syntax since it starts with a  gt    Does anyone know how to write a selector which gets just the direct children of the element that the selector is running on

User · Answer

I created a function to handle this situation, thought I would share it.

getDirectDecendent(elem, selector, all){
    const tempID = randomString(10) //use your randomString function here.
    elem.dataset.tempid = tempID;

    let returnObj;
    if(all)
        returnObj = elem.parentElement.querySelectorAll(`[data-tempid="${tempID}"] > ${selector}`);
    else
        returnObj = elem.parentElement.querySelector(`[data-tempid="${tempID}"] > ${selector}`);

    elem.dataset.tempid = '';
    return returnObj;
}

In essence what you are doing is generating a random-string (randomString function here is an imported npm module, but you can make your own.) then using that random string to guarantee that you get the element you are expecting in the selector. Then you are free to use the > after that.

The reason I am not using the id attribute is that the id attribute may already be used and I don't want to override that.

User · Answer

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  gt   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  gt      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

User · Answer

Here s a flexible method  written in vanilla JS  that allows you to run a CSS selector query over only the direct children of an element   var count   0  function queryChildren element  selector      var id   element id        guid   element id   id     query children     count          attr         guid      gt           selector   attr    selector       replace            attr   g      var result   element parentNode querySelectorAll selector     if   id  element removeAttribute  id      return result

User · Answer

Well we can easily get all the direct children of an element using childNodes and we can select ancestors with a specific class with querySelectorAll  so it s not hard to imagine we could create a new function that gets both and compares the two   HTMLElement prototype queryDirectChildren   function selector     var direct      slice call this directNodes            Cast to Array   var queried      slice call this querySelectorAll selector             Cast to Array   var both            I choose to loop through the direct children because it is guaranteed to be smaller   for var i 0  i lt direct length  i         if queried indexOf direct i           both push direct i                return both      Note  This will return an Array of Nodes  not a NodeList   Usage   document getElementById  myDiv   queryDirectChildren   foo

User · Answer

The following solution is different to the ones proposed so far  and works for me   The rationale is that you select all matching children first  and then filter out the ones which are not direct children  A child is a direct child if it does not have a matching parent with the same selector   function queryDirectChildren parent  selector        const nodes   parent querySelectorAll selector       const filteredNodes      slice call nodes  filter n   gt           n parentNode closest selector      parent closest selector             return filteredNodes      HTH

User · Answer

I am just doing this without even trying it  Would this work   myDiv   getElementById  myDiv    myDiv querySelectorAll this id      gt   foo      Give it a try  maybe it works maybe not  Apolovies  but I am not on a computer now to try it  responding from my iPhone

User · Answer

Does anyone know how to write a selector which gets just the direct children of the element that the selector is running on    The correct way to write a selector that is  rooted  to the current element is to use  scope   var myDiv   getElementById  myDiv    var fooEls   myDiv querySelectorAll   scope  gt   foo      However  browser support is limited and you ll need a shim if you want to use it  I built scopedQuerySelectorShim for this purpose

User · Answer

if you know for sure the element is unique  such as your case with the ID    myDiv parentElement querySelectorAll   myDiv  gt   foo      For a more  global  solution   use a matchesSelector shim   function getDirectChildren elm  sel       var ret       i   0  l   elm childNodes length      for  var i  i  lt  l    i           if  elm childNodes i  matchesSelector sel                ret push elm childNodes i                        return ret      where elm is your parent element  and sel is your selector  Could totally be used as a prototype as well

User · Answer

I d have gone with  var myFoo   document querySelectorAll   myDiv  gt   foo    var myDiv   myFoo parentNode

User · Answer

You could extend Element to include a method getDirectDesc   like this   x000D   x000D  Element prototype getDirectDesc   function         const descendants   Array from this querySelectorAll            const directDescendants   descendants filter ele   gt  ele parentElement     this      return directDescendants    const parent   document querySelector   parent   const directDescendants   parent getDirectDesc     document querySelector  h1   innerHTML    Found   directDescendants length  direct descendants  x000D   lt ol class  parent  gt       lt li class  b  gt child 01 lt  li gt       lt li class  b  gt child 02 lt  li gt       lt li class  b  gt child 03  lt ol gt               lt li class  c  gt Not directDescendants 01 lt  li gt               lt li class  c  gt Not directDescendants 02 lt  li gt           lt  ol gt       lt  li gt       lt li class  b  gt child 04 lt  li gt       lt li class  b  gt child 05 lt  li gt       lt  ol gt       lt h1 gt  lt  h1 gt  x000D   x000D   x000D

User · Answer

I Use This  You can avoid typing  quot myDiv quot  twice AND using the arrow  There are of course always more possibilities  A modern browser is probably required    lt  -- Sample Code -- gt    lt div id  quot myDiv quot  gt       lt div class  quot foo quot  gt foo 1 lt  div gt       lt div class  quot foo quot  gt foo 2          lt div class  quot bar quot  gt bar lt  div gt       lt  div gt       lt div class  quot foo quot  gt foo 3 lt  div gt   lt  div gt       Return HTMLCollection  Matches 3 Elements   var allMyChildren   document querySelector  quot  myDiv quot   children       Return NodeList  Matches 7 Nodes   var allMyChildren   document querySelector  quot  myDiv quot   childNodes       Match All Children With Class Of Foo  Matches 3 Elements   var myFooChildren   document querySelector  quot  myDiv quot   querySelectorAll  quot  foo quot         Match Second Child With Class Of Foo  Matches 1 Element   var mySecondChild   document querySelector  quot  myDiv quot   querySelectorAll  quot  foo quot   1        Match All Children With Class Of Bar  Matches 1 Element   var myBarChild   document querySelector  quot  myDiv quot   querySelector  quot  bar quot         Match All Elements In  quot myDiv quot   Matches 4 Elements   var myDescendants   document querySelector  quot  myDiv quot   querySelectorAll  quot   quot

User · Answer

I would like to add that you can extend the compatibility of  scope by just assigning a temporary attribute to the current node   let node          let result   node setAttribute  foo        result   window document querySelectorAll   foo   gt   bar       And  of course  you can also use other combinators  result   window document querySelectorAll   foo     bar    result   window document querySelectorAll   foo     bar    node removeAttribute  foo

[javascript] Using querySelectorAll to retrieve direct children

Examples related to javascript

Examples related to dom

Examples related to css-selectors