Los métodos QuerySelector y QuerySelectorAll se definen en la especificación API de selectores W3C. Su función es localizar convenientemente elementos especificados en el documento de acuerdo con la especificación del selector CSS.
Actualmente, son apoyados por navegadores casi convencionales. Incluyendo IE8 (inclusive) y versiones anteriores, Firefox, Chrome, Safari, Opera.
QuerySelector y QuerySelectorAll Definen las siguientes interfaces en la especificación:
Módulo DOM {[Supplemental, nointerfaceObject] Interface Nodeselector {Element QuerySelector (en Selectores DOMString); Nodelist QuerySelectorAll (en Selectores Domstring); }; Documento implementa nodeselector; DocumentFragment implementa nodeselector; El elemento implementa nodeselector; };Desde la definición de la interfaz, puede ver ese documento, documento y elemento, todos implementan la interfaz NodesElector. Es decir, todos estos tres tipos de elementos tienen dos métodos. Los parámetros de QuerySelector y QuerySelectorall deben ser cadenas que se ajusten al selector CSS. La diferencia es que QuerySelector devuelve un objeto, y QuerySelectorAll devuelve una colección (Nodelist).
Obtenga el elemento cuyo atributo D es prueba:
1 document.getElementById ("test"); 2 document.Queryselector ("#prueba"); 3 document.QueryselectorAll ("#prueba") [0];Obtenga el elemento con el atributo de clase de página "rojo":
document.getElementsByClassName ('Red') document.querySelector ('. Red') document.QueryselectorAll ('. Red') document.QueryselectorAll ('. Red')PD:
Pero debe tenerse en cuenta que los elementos en la colección nodelista devuelta no son vivas. Si desea distinguir entre lo que es un resultado de retorno en tiempo real en tiempo real, consulte el siguiente ejemplo:
<div id = "contenedor"> <div> </div> <div> </div> </div>
// primero seleccione el elemento con el contenedor de ID en la página con contenedor = document.getElementById ('#contenedor'); console.log (contenedor.childnodes.length) // El resultado 2 // luego agrega un elemento infantil a él a través del código contenedor.appendChild (document.createElement ('')); // este elemento no solo se agrega a la página, sino que el código variable contiene el contenido variable aquí también. console.log (Container.childnodes.length) // El resultado es 3A través del ejemplo anterior, podemos entender qué elementos se actualizarán en tiempo real. document.getElementById Devuelve el resultado en tiempo real. Después de agregarle un elemento infantil, el número de todos los elementos infantiles se obtiene nuevamente, y el original 2 se ha actualizado a 3 (sin considerar que algunos navegadores como Chrome también analizarán el espacio en blanco en un nodo secundario).
La diferencia entre elemento.QuerySelector y element.QuerySelectorAll y jQuery (elemento) .find (selector) selectores:
<Span style = "font-size: 15px"> <divid = "test1"> <ahref = "// www.vevb.com/">wulin.com </a> </div> <pid =" bar "> 111 </p> <script> var d1 = document.getElementById ('test1'), obj1 = d1.Querisector d1.QueryselectorAll ('div a'); obj3 = $ (d1) .find ('div a'); console.log (obj1) // <a href = "// www.vevb.com/">wulin.com </a> console.log (obj2.length) // 1 console.log (obj3) // null </script> </span>QuerySelectorAll encuentra todos los nodos que cumplen con la descripción del selector en el documento, incluido el elemento en sí
jQuery (elemento) .find (selector) Encuentre todos los nodos que cumplan con la descripción de la selección en el documento y no incluyan el elemento en sí mismo
El análisis completo anterior del selector avanzado de JavaScript anterior y QuerySelectorall es todo el contenido que comparto con usted. Espero que pueda darle una referencia y espero que pueda apoyar más a Wulin.com.