Usando querySelectorAll para recuperar filhos diretos

Eu sou capaz de fazer isso:

<div id="myDiv">
   <div class="foo"></div>
</div>

myDiv = getElementById("myDiv");
myDiv.querySelectorAll("#myDiv > .foo");

Ou seja, posso recuperar com êxito todos os filhos diretos do myDivelemento que possuem classe .foo.

O problema é que me incomoda que eu deva incluir o #myDivno seletor, porque estou executando a consulta no myDivelemento (por isso é obviamente redundante).

Eu deveria ser capaz de deixar o #myDivdesligado, mas o seletor não é uma sintaxe válida, pois começa com a >.

Alguém sabe escrever um seletor que obtém apenas os filhos diretos do elemento em que o seletor está sendo executado?

Boa pergunta. Na época em que foi perguntado, não existia uma maneira universalmente implementada de fazer "consultas com raiz de combinador" (como John Resig as chamou ).

Agora a pseudoclasse: scope foi introduzida. Não é compatível com versões [pré-Chrominum] do Edge ou IE, mas já é compatível com o Safari há alguns anos. Usando isso, seu código pode se tornar:

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

Observe que, em alguns casos, você também pode ignorar .querySelectorAlle usar outros bons e antigos recursos da API DOM. Por exemplo, em vez de myDiv.querySelectorAll(":scope > *")você pode apenas escrever myDiv.children, por exemplo.

Caso contrário, se você ainda não pode confiar em :scope, não consigo pensar em outra maneira de lidar com sua situação sem adicionar mais lógica de filtro personalizado (por exemplo, encontrar de myDiv.getElementsByClassName("foo")quem .parentNode === myDiv), e obviamente não é ideal se você está tentando oferecer suporte a um caminho de código que realmente só quer pegar uma string de seletor arbitrário como entrada e uma lista de correspondências como saída! Mas se, como eu, você acabou fazendo essa pergunta simplesmente porque parou pensando "tudo o que você tinha era um martelo", não se esqueça de que há uma variedade de outras ferramentas que o DOM oferece também.

Alguém sabe escrever um seletor que obtém apenas os filhos diretos do elemento em que o seletor está sendo executado?

A maneira correta de escrever um seletor "enraizado" no elemento atual é usar :scope.

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

No entanto, o suporte do navegador é limitado e você precisará de um calço se quiser usá-lo. Eu construí scopedQuerySelectorShim para esta finalidade.

Este é um método flexível, escrito em vanilla JS, que permite executar uma consulta de seletor CSS apenas nos filhos diretos de um elemento:

var count = 0;
function queryChildren(element, selector) {
  var id = element.id,
      guid = element.id = id || 'query_children_' + count++,
      attr = '#' + guid + ' > ',
      selector = attr + (selector + '').replace(',', ',' + attr, 'g');
  var result = element.parentNode.querySelectorAll(selector);
  if (!id) element.removeAttribute('id');
  return result;
}

se você tiver certeza de que o elemento é único (como seu caso com o ID):

myDiv.parentElement.querySelectorAll("#myDiv > .foo");

Para uma solução mais "global": (use um shim MatchSelector )

function getDirectChildren(elm, sel){
    var ret = [], i = 0, l = elm.childNodes.length;
    for (var i; i < l; ++i){
        if (elm.childNodes[i].matchesSelector(sel)){
            ret.push(elm.childNodes[i]);
        }
    }
    return ret;
}

onde elmestá o seu elemento pai e selé o seu seletor. Pode ser totalmente usado como protótipo também.

A solução a seguir é diferente das propostas até agora e funciona para mim.

A lógica é que você selecione primeiro todos os filhos correspondentes e, em seguida, filtre aqueles que não são filhos diretos. Um filho é um filho direto se não tiver um pai correspondente com o mesmo seletor.

function queryDirectChildren(parent, selector) {
    const nodes = parent.querySelectorAll(selector);
    const filteredNodes = [].slice.call(nodes).filter(n => 
        n.parentNode.closest(selector) === parent.closest(selector)
    );
    return filteredNodes;
}

HTH!

Criei uma função para lidar com essa situação, pensei em compartilhá-la.

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;
}

Em essência, o que você está fazendo é gerar uma string aleatória (a função randomString aqui é um módulo npm importado, mas você pode fazer o seu próprio.) E usar essa string aleatória para garantir que você obtenha o elemento que está esperando no seletor. Então você está livre para usar o >depois disso.

O motivo pelo qual não estou usando o atributo id é que o atributo id já pode ser usado e não quero substituí-lo.

Bem, podemos facilmente obter todos os filhos diretos de um elemento usando childNodese podemos selecionar ancestrais com uma classe específica com querySelectorAll, portanto, não é difícil imaginar que poderíamos criar uma nova função que obtenha ambos e compare os dois.

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<direct.length; i++){
    if(queried.indexOf(direct[i])){
      both.push(direct[i]);
    }
  }
  return both;
}

Nota: Isso retornará um Array of Nodes, não um NodeList.

Uso

 document.getElementById("myDiv").queryDirectChildren(".foo");

Eu gostaria de acrescentar que você pode estender a compatibilidade de : scope apenas atribuindo um atributo temporário ao nó atual.

let node = [...];
let result;

node.setAttribute("foo", "");
result = window.document.querySelectorAll("[foo] > .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");

Eu teria ido com

var myFoo = document.querySelectorAll("#myDiv > .foo");
var myDiv = myFoo.parentNode;

Estou apenas fazendo isso, mesmo sem tentar. Isso funcionaria?

myDiv = getElementById("myDiv");
myDiv.querySelectorAll(this.id + " > .foo");

Experimente, talvez funcione, talvez não. Apolovies, mas não estou no computador agora para experimentar (respondendo do meu iPhone).