javascript - ejemplos - Selector secundario usando `querySelectorAll` en una colección DOM

queryselector value

Question

Supongamos que tienes una lista con listas de niños anidadas.

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

Y use document.querySelectorAll() para hacer una selección:

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

¿Cómo puedo usar la colección ul para obtener los elementos secundarios directos?

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

Supongamos que ul está en caché de alguna manera (de lo contrario, podría haber hecho ul > li directamente).

En jQuery esto funciona:

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

Pero no lo hace en nativo querySelectorAll . ¿Alguna solución?

Answer 1

Debido a que la ul devuelta es una NodeList, no se repite implícitamente sobre su contenido como una colección jQuery. Necesitaría usar ul[0].querySelectorAll() o mejor aún, seleccione la ul con querySelector() .

Además de eso, querySelectorAll() no tomará un > y trabajará desde su contexto actual. Sin embargo, puede hacer que funcione con la respuesta de lazd (aunque verifique la compatibilidad del navegador), o cualquiera de estas soluciones (que no deberían tener problemas con el navegador) ...

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

jsFiddle .

Esto seleccionará todos los elementos li que son descendientes de su ul , y luego eliminará los que no son descendientes directos.

Alternativamente, puedes obtener todos los childNodes y luego filtrarlos ...

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

jsFiddle .

Answer 2

La forma correcta de escribir un selector que esté "arraigado" en el elemento actual es usar :scope .

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

Vea mi respuesta aquí para obtener una explicación y una solución robusta para todos los navegadores: https://.com/a/21126966/1170723

Answer 3

NodeList iterar sobre el NodeList devuelto por document.querySelectorAll() y luego llamar a element.querySelectorAll() para cada elemento en esa lista.