Método querySelector() del Documento del DOM HTML

Definición y uso

querySelector() Este método devuelve los elementos que coinciden con el selector CSSEl primeroelementos.

Para devolverTodoscoincidencias (no solo la primera coincidencia), utilice querySelectorAll().

Si el selector es inválido, querySelector() y querySelectorAll() también lanzará SYNTAX_ERR Excepción.

Ejemplo

Ejemplo 1

Obtenga el primer elemento <p>:

document.querySelector("p");

Pruebe usted mismo

Ejemplo 2

Obtenga el primer elemento con class="example":

document.querySelector(".example");

Pruebe usted mismo

Ejemplo 3

Obtenga el primer elemento <p> con class="example":

document.querySelector("p.example");

Pruebe usted mismo

Ejemplo 4

Cambie el texto del elemento con id="demo":

document.querySelector("#demo").innerHTML = "Hello World!";

Pruebe usted mismo

Ejemplo 5

Seleccione el primer elemento <p> que tenga como elemento padre un <div>:

document.querySelector("div > p");

Pruebe usted mismo

Ejemplo 6

Seleccione el primer elemento <a> que tenga la propiedad "target":

document.querySelector("a[target]");

Pruebe usted mismo

Ejemplo 7

Seleccione el primer <h3> o el primer <h4>:

<h3>Un elemento h3</h3>
<h4>Un elemento h4</h4>
document.querySelector("h3, h4").style.backgroundColor = "red";

Pruebe usted mismo

Ejemplo 8

Seleccione el primer <h3> o el primer <h4>:

<h4>Un elemento h4</h4>
<h3>Un elemento h3</h3>
document.querySelector("h3, h4").style.backgroundColor = "red";

Pruebe usted mismo

Sintaxis

document.querySelector(cssSelectors)

Parámetro

Parámetro Descripción
cssSelectors

Obligatorio. Un o varios selectores CSS.

Los selectores CSS seleccionan elementos HTML según el id, la clase, el tipo, las propiedades, los valores de las propiedades, etc.

Para obtener una lista completa, visite nuestra Manual de referencias de selectores CSS.

Para múltiples selectores, separe cada selector con una coma (consulte el ejemplo superior en la página).

Valor devuelto

Tipo Descripción
Objeto

NodeList que contiene el primer elemento que coincide con el selector CSS.

Si no se encuentran coincidencias, se devuelve null.

La diferencia entre HTMLCollection y NodeList

NodeList y HTMLcollection Muy similares.

Ambos son conjuntos de colecciones de nodos (elementos) extraídos del documento de manera similar a un array (lista). Los nodos se pueden acceder mediante su número de índice (subíndice). El índice comienza en 0.

Ambos tienen length Atributo, que devuelve la cantidad de elementos (conjunto) en la lista (conjunto).

La HTMLCollection esElemento de documentoconjunto.

La NodeList esNodo de documentoconjunto de (nodos de elementos, nodos de atributos y nodos de texto).

Los elementos de HTMLCollection se pueden acceder mediante su nombre, id o número de índice.

Los elementos de NodeList solo se pueden acceder a través de su número de índice.

La HTMLCollection siempre esEn tiempo realconjunto.

Por ejemplo: si se agrega un elemento <li> a la lista en el DOM, la lista en HTMLCollection también cambiará.

La NodeList generalmente esEstáticaconjunto.

Por ejemplo: si se agrega un elemento <li> a la lista en el DOM, la lista en NodeList no cambiará.

getElementsByClassName() y getElementsByTagName() Todos los métodos devuelven una HTMLCollection en tiempo real.

querySelectorAll() El método devuelve una NodeList estática.

childNodes La propiedad devuelve una NodeList en tiempo real.

Compatibilidad del navegador

document.querySelector() Es una característica de DOM Level 1 (1998).

Es compatible con todos los navegadores:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Soporte 9-11 Soporte Soporte Soporte Soporte

Páginas relacionadas

Tutoriales:

Selectores CSS

Manual de referencias de selectores CSS

Manual de referencias de NodeList del DOM HTML

Método QuerySelector:

Método querySelector():

Método querySelectorAll():

Método GetElement:

Método getElementById()

Método getElementsByTagName()

Método getElementsByClassName()