Selector de elementos secundarios usando `querySelectorAll` en una colección DOM

Question

Supongamos que tiene una lista con listas secundarias anidadas.

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

Y el uso de document.querySelectorAll() para hacer una selección:

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

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

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

Vamos a suponer ul se almacena en caché de alguna manera (lo contrario podría haber hecho ul > li directamente).

En jQuery esto funciona:

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

Pero no es así en querySelectorAll nativa. Alguna solución?

Answer 1

Como el ul devuelto es un NodeList, no itera implícitamente sobre sus contenidos como una colección jQuery. Necesitaría usar ul[0].querySelectorAll() o mejor aún seleccionar el ul con querySelector().

Además de eso, querySelectorAll() no tomará un > y trabajará desde su contexto actual. Sin embargo, se puede conseguir que funcione utilizando lazd's answer (cheque sin embargo la compatibilidad del navegador), o cualquiera de estas soluciones (que debería haber ningún problema de navegador) ...

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

jsFiddle.

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

Como alternativa, puede obtener toda childNodes y luego filtrarlos ...

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

jsFiddle.

Answer 2

Necesita repetir el NodeList devuelto por document.querySelectorAll() y luego llamar al element.querySelectorAll() para cada elemento de esa lista.

Answer 3

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

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

Véase mi respuesta aquí para una explicación y una solución robusta, entre navegadores: https://stackoverflow.com/a/21126966/1170723