Utilisation de querySelectorAll pour récupérer les enfants directs

Je suis capable de faire ceci:

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

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

Autrement dit, je peux récupérer avec succès tous les enfants directs de l' myDivélément qui ont la classe .foo.

Le problème, c'est que cela me dérange de devoir inclure le #myDivdans le sélecteur, car j'exécute la requête sur l' myDivélément (donc c'est évidemment redondant).

Je devrais pouvoir laisser le #myDivdésactivé, mais le sélecteur n'est pas une syntaxe légale puisqu'il commence par un >.

Quelqu'un sait-il comment écrire un sélecteur qui n'obtient que les enfants directs de l'élément sur lequel le sélecteur s'exécute?

Bonne question. Au moment où cela a été demandé, il n'existait pas de moyen universellement implémenté de faire des «requêtes enracinées par combinateur» (comme les appelait John Resig ).

Maintenant, la pseudo-classe : scope a été introduite. Il n'est pas pris en charge sur les versions [pré-Chrominum] d'Edge ou d'IE, mais est déjà pris en charge par Safari depuis quelques années. En utilisant cela, votre code pourrait devenir:

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

Notez que dans certains cas, vous pouvez également ignorer .querySelectorAllet utiliser d'autres bonnes fonctionnalités de l'API DOM à l'ancienne. Par exemple, au lieu de myDiv.querySelectorAll(":scope > *")vous pourriez simplement écrire myDiv.children, par exemple.

Sinon, si vous ne pouvez pas encore vous fier :scope, je ne peux pas penser à une autre façon de gérer votre situation sans ajouter plus de logique de filtre personnalisé (par exemple, trouver à myDiv.getElementsByClassName("foo")qui .parentNode === myDiv), et évidemment pas idéal si vous essayez de prendre en charge un chemin de code qui vraiment veut juste prendre une chaîne de sélection arbitraire en entrée et une liste de correspondances en sortie! Mais si, comme moi, vous avez fini par poser cette question simplement parce que vous êtes resté coincé en pensant que "tout ce que vous aviez était un marteau", n'oubliez pas qu'il existe une variété d' autres outils que le DOM propose également.

Quelqu'un sait-il comment écrire un sélecteur qui n'obtient que les enfants directs de l'élément sur lequel le sélecteur s'exécute?

La manière correcte d'écrire un sélecteur qui est "enraciné" sur l'élément courant est d'utiliser :scope.

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

Cependant, la prise en charge du navigateur est limitée et vous aurez besoin d'un shim si vous souhaitez l'utiliser. J'ai construit scopedQuerySelectorShim à cet effet.

Voici une méthode flexible, écrite en vanilla JS, qui vous permet d'exécuter une requête de sélection CSS uniquement sur les enfants directs d'un élément:

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

si vous savez avec certitude que l'élément est unique (comme votre cas avec l'ID):

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

Pour une solution plus "globale": (utilisez un shim matchesSelector )

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

où elmest votre élément parent et selest votre sélecteur. Pourrait totalement également être utilisé comme prototype.

La solution suivante est différente de celles proposées jusqu'à présent et fonctionne pour moi.

La raison est que vous sélectionnez d'abord tous les enfants correspondants, puis que vous filtrez ceux qui ne sont pas des enfants directs. Un enfant est un enfant direct s'il n'a pas de parent correspondant avec le même sélecteur.

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!

J'ai créé une fonction pour gérer cette situation, j'ai pensé la partager.

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

En substance, ce que vous faites est de générer une chaîne aléatoire (la fonction randomString ici est un module npm importé, mais vous pouvez créer le vôtre.) Puis d'utiliser cette chaîne aléatoire pour garantir que vous obtenez l'élément que vous attendez dans le sélecteur. Ensuite, vous êtes libre d'utiliser >après cela.

La raison pour laquelle je n'utilise pas l'attribut id est que l'attribut id est peut-être déjà utilisé et je ne veux pas le remplacer.

Eh bien, nous pouvons facilement obtenir tous les enfants directs d'un élément en utilisant childNodeset nous pouvons sélectionner des ancêtres avec une classe spécifique avec querySelectorAll, il n'est donc pas difficile d'imaginer que nous pourrions créer une nouvelle fonction qui obtient les deux et compare les deux.

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

Remarque: Cela renverra un tableau de nœuds, pas une liste de nœuds.

Usage

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

Je voudrais ajouter que vous pouvez étendre la compatibilité de : scope en attribuant simplement un attribut temporaire au nœud actuel.

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");

Je serais allé avec

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

Je fais juste cela sans même essayer. Cela fonctionnerait-il?

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

Essayez-le, peut-être que cela fonctionne peut-être pas. Apolovies, mais je ne suis pas sur un ordinateur maintenant pour l'essayer (réponse depuis mon iPhone).