Sélecteur d'enfant à l'aide de `querySelectorAll " sur un DOM collection

Nous allons supposer que vous avez une liste imbriquée avec enfant des listes.

<ul>
    <li></li>
    <li>
        <ul>
            <li></li>
            <li></li>
        </ul>
    </li>
    <li></li>
</ul>

Et l'utilisation document.querySelectorAll() pour effectuer une sélection:

var ul = document.querySelectorAll("ul");

Comment puis-je utiliser le ul de la collection pour obtenir directement les éléments enfants?

ul.querySelectorAll("> li"); 
//Gives 'Error: An invalid or illegal string was specified'

Nous allons présumer ul est mis en cache en quelque sorte (sinon j'aurais pu faire ul > li directement).

En jQuery cela fonctionne:

$("ul").find("> li");

Mais il n'est pas en natif querySelectorAll. Toutes les solutions?

  • Que le sélecteur n'a pas vraiment de sens. Avec jQuery que vous souhaitez utiliser .children("li") au lieu de .find("> li"). Je suis surpris que des œuvres à tous, en fait.
  • .find('> li ul span') est utile, mais pas tellement sur sa propre comme dans le cas des OP exemple.
  • l'exemple est un peu tiré par les cheveux, mais il a certainement une utilisation dans le monde réel de cas 🙂
InformationsquelleAutor Husky | 2012-04-17
  1. 40

    La façon correcte d'écrire un sélecteur qui est "ancrée" à l'élément courant est d'utiliser :champ d'application.

    ul.querySelectorAll(":scope > li");

    Voir ma réponse ici pour une explication et d'un solide, cross-browser solution: https://stackoverflow.com/a/21126966/1170723

    • Bon de voir que cela existe! 🙂
    • Gardez à l'esprit le compatibilité du navigateur: Chrome: oui, FF: 32, c'est à dire: non, opera: non, Safari: 7
    • en plus de ce que @Web_Designer dit, à ce jour, c'est toujours pas pris en charge dans Microsoft Bord. Essayez d'utiliser "champ d'application" dans querySelectorAll donne une erreur de syntaxe. Voilà pour le "vous n'avez pas besoin de jQuery" camp.
    InformationsquelleAutor lazd
  2. 13

    Parce que le ul retournée est une NodeList, il n'est pas implicitement en boucle sur son contenu comme un jQuery collection. Vous auriez besoin d'utiliser ul[0].querySelectorAll() ou, mieux encore, sélectionnez le ul avec querySelector().

    En outre, querySelectorAll() ne vais pas prendre un > et de travailler à partir de son contexte actuel. Cependant, vous pouvez l'obtenir pour fonctionner à l'aide de lazd réponse (bien vérifier la compatibilité du navigateur), ou de l'une de ces solutions de contournement (qui ne devraient pas avoir les problèmes de navigateur)...

    [].filter.call(ul.querySelectorAll("li"), function(element){
     return element.parentNode == ul;
});

    jsFiddle.

    Cela va sélectionner tous les li éléments qui sont des descendants de votre ul, puis supprimer ceux qui ne sont pas des descendants directs.

    Alternativement, vous pouvez obtenir tous childNodes et puis les filtrer...

    [].filter.call(ul.childNodes, function(node) {
    return node.nodeType == 1 && node.tagName.toLowerCase() == 'li';
});

    jsFiddle.

    • Yup, ça semble être une solution viable. Dommage qu'il prend trois lignes de code, ce qui pourrait être fait dans un seul et unique personnage 🙂 a Noter que filter() ne fonctionnera pas parce que ul est une NodeList, de sorte que vous besoin de faire Array.prototype.slice.call premier.
    • Il fonctionnera de la manière que je l'ai écrit, trop.
    • Vous pouvez toujours l'ajouter à Element.prototype en fonction 🙂
    InformationsquelleAutor alex
  3. 0

    Vous avez besoin pour effectuer une itération sur les NodeList retourné par document.querySelectorAll() et ensuite appeler element.querySelectorAll() pour chaque élément dans la liste.

    InformationsquelleAutor Alnitak