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

Question

Je suis en mesure de le faire :

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

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

C'est-à-dire que je peux récupérer avec succès tous les enfants directs de l'élément myDiv qui ont la classe .foo .

Le problème, c'est que cela m'ennuie de devoir inclure l'élément #myDiv dans le sélecteur, car j'exécute la requête sur le fichier myDiv (il est donc manifestement redondant).

Je devrais pouvoir quitter le #myDiv mais le sélecteur n'est alors pas une syntaxe légale puisqu'il commence par un > .

Quelqu'un sait-il comment écrire un sélecteur qui ne récupère que les enfants directs de l'élément sur lequel le sélecteur est exécuté ?

Answer 1

J'aimerais ajouter qu'il est possible d'é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");

Answer 2

Version à ligne unique

var direct_children=Array.from(parent_el.querySelectorAll('span')).filter(function(a){return a.parentNode===parent_el;});

J'ai trouvé cela très pratique dans le cas où l'élément parent est donné. Je l'ai testé et il a fonctionné à 100%.

Answer 3

J'aurais choisi

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

Answer 4

Je fais cela sans même essayer. Est-ce que cela fonctionnerait ?

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

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