javascript - Cuál es la diferencia entre queryAll y querySelectorAll
queryselectorall addeventlistener (2)
Las definiciones del Estándar DOM parecen casi exactamente iguales, y no entiendo la diferencia.
¿Cuál es la diferencia entre queryAll y querySelectorAll ?
La lógica de evaluación del estándar DOM está debajo, pero no soy lo suficientemente inteligente como para entenderla.
query y query
Para hacer coincidir los selectores relativos de una cadena relativa con un conjunto, ejecute estos pasos:
Seamos el resultado de analizar un selector relativo de los selectores relativos contra el conjunto. [SELECTORES]
Si s es un error, ejecute un TypeError de JavaScript.
Devuelve el resultado de evaluar un selector utilizando: conjunto de elementos de alcance. [SELECTORES]
El método de consulta (relativeSelectors) debe devolver el primer resultado de la ejecución de una coincidencia de los selectores relativos string relativaSelector con un conjunto que consiste en un objeto de contexto y nulo si el resultado es una lista vacía.
El método queryAll (relativeSelectors) debe devolver una matriz de Elementos inicializada con el resultado de ejecutar coincidencias relativas de una cadena de selectores relativos contra un conjunto que consta de un objeto de contexto.
querySelector & querySelectorAll
Para alinear el alcance de los selectores de cadenas de selectores con un nodo, siga estos pasos:
Seamos el resultado de analizar los selectores de selector. [SELECTORES]
Si s es un error, ejecute un TypeError de JavaScript.
Devuelve el resultado de evaluar un selector s contra la raíz del nodo usando el nodo raíz del alcance y el método de alcance filtrado por alcance. [SELECTORES].
El método querySelector (selectores) debe devolver el primer resultado de ejecutar scope-match a selectors string selectors contra el objeto de contexto, y null si el resultado es una lista vacía en caso contrario.
El método querySelectorAll (selectores) debe devolver el resultado estático de ejecutar scope-match selectores de cadena de selectores contra el objeto de contexto.
query() y queryAll() aceptan una cadena de selector relativa, mientras que querySelector() y querySelectorAll() no lo hacen. Un selector relativo es básicamente un selector que puede ser parcial y comenzar con un combinador:
var parentNode = document.getElementById(''parentNode''); // document.querySelector(''#parentNode'');
// Find .childNode elements that are direct descendants (children) of parentNode
// This cannot be done with querySelectorAll() using the existing reference to parentNode
parentNode.queryAll(''> .childNode'');
// querySelectorAll does allow getting all descendants of parentNode though
parentNode.querySelectorAll(''.childNode'');
Pero lo más importante es que queryAll() devuelve una matriz Elements[] vivo mientras que la NodeList devuelta por querySelectorAll() es estática, lo que significa que los nodos en esa lista no se actualizan cuando se realizan cambios en sus respectivos elementos DOM.
En términos de su funcionalidad, query() y queryAll() pueden ser más análogos a find() y findAll() , definidos en el nivel 2 de la API Selectors , donde también encontrarás la definición de un selector relativo, como ambos grupos de métodos aceptar y trabajar con selectores relativos. Tenga en cuenta que findAll() también devuelve un NodeList estático, por lo que aún no son completamente idénticos.
Actualización 2016
queryAll fue eliminado de la especificación DOM
Actualmente, la diferencia más importante entre queryAll y querySelectorAll es que queryAll (así como la query ) se eliminó de la especificación DOM .
La versión actual de la especificación DOM está disponible en:
Nota: https://www.w3.org/TR/dom/ es un fork obsoleto del Estándar DOM (ver Seguimiento de Tenedores en WHATWG Wiki y el comentario de Domenic para más información).
Última mención
La última versión que incluía query y queryAll se publicó el 15 de marzo de 2016:
- http://web.archive.org/web/20160315085447/https://dom.spec.whatwg.org/
- Ver secciones 4.2.3. Interfaz ParentNode y 4.2.6. Colecciones: Elementos
Eliminación
La próxima versión no menciona query o query cualquier lugar:
- http://web.archive.org/web/20160329233515/https://dom.spec.whatwg.org/
- Ver la sección 4.2.6. Mixin ParentNode
Especificación actual
Todas las ocurrencias de query o query queryAll en el estándar DOM fueron comentadas por Anne van Kesteren el 29 de marzo de 2016.
La especificación actual de DOM (a partir de julio de 2016) no menciona query o query en absoluto:
querySelector y querySelectorAll están en la sección 4.2.6 Mixin ParentNode .
Parece que actualmente la única API confiable es querySelector y querySelectorAll (consulte esta respuesta para obtener más detalles) y de acuerdo con esta discusión en query y query queryAll no estará disponible hasta que se implemente la queryAll subclases de JavaScript en los navegadores e incluso entonces es poco probable que devuelva una matriz de Elementos vivos [] como se describe en la respuesta de BoltClock .
Soporte del navegador
A partir de junio de 2016, no hay mención de query y query queryAll en MDN:
Por otro lado, querySelector y querySelectorAll están bien documentados y son ampliamente compatibles:
- https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll
Compatibilidad con el navegador de querySelector / querySelectorAll según Puedo usar a partir de junio de 2016:
(Consulte: http://caniuse.com/queryselector para obtener información actualizada)
No hay información disponible sobre el soporte de query y queryAll .
Más información
Consulte también esta respuesta para obtener más información sobre el uso y el soporte del navegador de querySelector y querySelectorAll .