Más información sobre las diferencias y conexiones entre querySelector y querySelectorAll.

querySelector:

Devuelve el primer nodo del elemento coincidente en el subdirectorio de nodos

. Si no existe tal nodo, el método debe

devolver NULL. (Devuelve el primero de un conjunto de selectores coincidentes en el subárbol de nodo del elemento especificado; si no hay coincidencia, devuelve nulo).

querySelectorAll:

Devuelve una NodeList, donde el orden de los documentos contiene todos los nodos de elementos coincidentes en el subárbol de nodos

.

Si no existe tal nodo, este método debe devolver una NodeList vacía. querySelectorAll( selectors);

Cuando BaseElement

es un documento, no hay problema con este método, y los métodos de implementación de diferentes navegadores son básicamente los mismos, cuando BaseElement lo es; Para un nodo dom ordinario (el

nodo dom que admite estos dos métodos), el método de implementación del navegador es un poco extraño. Por ejemplo:

Copia el código

El código es el siguiente:

Según W3C, este ejemplo debería devolver: elemento: null; elementList: []; porque baseElement

testElement no tiene ningún nodo secundario coincidente que coincida con el selector, pero el navegador parece ignorar baseElement y solo le importa; sobre el selector, lo que significa baseElement No hay nodos secundarios coincidentes.

testElement no tiene hijos coincidentes que coincidan con el selector, pero el navegador parece ignorar baseElement y solo se preocupa por el selector, lo que significa que baseElement no tiene hijos coincidentes.

testElement no tiene hijos coincidentes que coincidan con el selector; pero el navegador parece ignorar baseElement y solo se preocupa por el selector, lo que significa que baseElement no tiene hijos coincidentes.

Andrew

Dupont inventó un método para resolver temporalmente este problema especificando la identificación del elemento base delante del selector para limitar el rango de coincidencia. Este método se usa ampliamente en marcos populares; usado;

Implementación de Jquery:

Implementación de Jquery:

Copiar código

El código es el siguiente:

var oldContext = contexto,

old =

context.getAttribute( "id" ),
nid = old ||

if (

!relativeHierarchySelector || hasParent ) {

return makeArray(

context.querySelectorAll( "[ id ='" + nid + "'] " + consulta ), extra );

}

}

catch(pseudoError) {}
finalmente {

if ( !old )

{oldContext.removeAttribute( "id") ) }

}

}

No hablemos de las otras partes de este código por ahora, echemos un vistazo a cómo implementa este método; este código es un fragmento de JQuery 1.6; cuando baseElement no tiene una ID, establecerá una; id para ello

="__sizzle__" y luego agréguelo delante del selector para restricción de alcance context.querySelectorAll("id")("id")("id")("id") ("id")(querySelectorAll("[id='" +

nid + "'] " + query

; Finalmente, dado que el ID en sí no es lo que debe poseer baseElement , Por lo tanto, es necesario eliminarlo: oldContext.removeAttribute( "id" );