2012-07-11 11 views
5

Digamos que tiene una estructura HTML comoAl usar querySelectorAll, ¿hay alguna manera de hacer referencia a los secundarios inmediatos del nodo contextual, sin usar IDs?

<div id="a"> 
    <div id="b"> 
    <div id="c"></div> 
    </div> 
</div> 

Para hacer una consulta para los niños de "a" usando querySelectorAll puedo hacer algo como

//Get "b", but not "c" 
document.querySelectorAll('#a > div') 

Mi pregunta es: ¿es posible hacer esto sin la ID, haciendo referencia al nodo directamente? Intenté hacer

var a_div = document.getElementById('a') 
a_div.querySelectorAll('> div') //<-- error here 

pero me sale un error diciéndome que el selector que utilicé no es válido.


Y en caso de que alguien se lo pregunta, mi caso de uso real sería algo más complicado como '> .foo .bar .baz', así que preferiría evitar recorrido DOM manual. Actualmente estoy agregando una identificación temporal a la raíz div pero eso parece un hack feo ...

+1

Vea también: http://stackoverflow.com/questions/3680876/use-queryselectorall-to-retrieve-direct-children – natevw

Respuesta

4

No, no hay una forma (todavía) para hacer referencia a todos los elementos secundarios de algún elemento sin usar una referencia a ese elemento. Como > es un child combinator, que representa una relación entre un elemento primario y secundario, es necesario un simple selector (un elemento principal) (que falta en su ejemplo).

En un comentario, BoltClock said que el Selectors API Level 2 specification define un método findAllnombre puede cambio", que acepta como argumento lo que probablemente se conoce como un selector relativa (un selector que puede comenzar con un combinador en lugar de un selector compuesto) ".
Cuando esto se lleva a cabo, que puede ser utilizado de la siguiente manera:

a_div.findAll('> div'); 
+0

¿Cuál es la solución habitual para esto? ¿Agregar la identificación (temporal) al elemento raíz de la única manera? – hugomg

+0

@missingno Sí. El otro método es recorrer todos los '.childNodes' y probar si el niño es un div usando' childNodes [i] .nodeName.toUpperCase() == 'div''. –

+3

Más técnicamente, "Debido a que'> 'es un * combinador *", no puede hacer esto con 'querySelectorAll()'. En un futuro cercano, podrá hacer esto con 'findAll()', que acepta como argumento lo que probablemente se conocerá como un selector relativo (un selector que puede comenzar con un combinador en lugar de un selector compuesto). Consulte la especificación [Selectors API level 2] (http://www.w3.org/TR/selectors-api2). – BoltClock

-2

creo que debo estar mal entendido su pregunta, pero esta es la forma en que estoy interpretarlo ..

var a = document.getElementById('a') 
var results = a.querySelectorAll('div'); 

resultados sostendrán todos sus divs hijos ahora.

+3

'results' no solo guardará los divs secundarios, sino ** todos los divs descendientes **. –

+1

Quiero excluir el div "c" de los resultados sin embargo. El selector '#a> div' solo devuelve el div "b". – hugomg

8
document.querySelector('#a').querySelectorAll(':scope > div') 

No estoy seguro de la compatibilidad con el navegador, pero la utilizo en las aplicaciones empaquetadas para móviles chrome y chrome y funciona bien.

+4

[MDN en ': scope' en' querySelector'] (https://developer.mozilla.org/en-US/docs/Web/CSS/:scope#Browser_compatibility): Chrome, Firefox 32+, Safari 7, no Opera, no IE. –

Cuestiones relacionadas