HTML DOM Documento querySelector()
Ejemplos
Obtenga el primer elemento <p>:
document.querySelector("p");
Obtenga el primer elemento con class="example":
document.querySelector(".example");
Más ejemplos a continuación.
Definición y uso
El querySelector()método devuelve el primer elemento que coincide con un selector CSS.
Para devolver todas las coincidencias (no solo la primera), use en su querySelectorAll()lugar.
Ambos querySelector()y querySelectorAll()devuelven una NodeList .
Ambos querySelector()y querySelectorAll()lanzar una excepción SYNTAX_ERR si los selectores no son válidos.
Tutoriales:
La referencia de selectores de CSS
Tutorial de la lista de nodos de JavaScript
Métodos de QuerySelector:
El método Element querySelector()
El método Element querySelectorAll()
El método QuerySelector() del documento
El método QuerySelectorAll() del documento
Métodos GetElement:
El método getElementById() del documento
Lista de nodos HTML DOM/Colección HTML
Las diferencias entre una HTMLCollection y una NodeList
Una NodeList y una HTMLCollection son colecciones (listas) de nodos (elementos) en forma de matriz extraídas de un documento. Se puede acceder a los nodos por números de índice. El índice comienza en 0.
Ambos objetos tienen una propiedad de longitud que devuelve el número de elementos de la lista.
Una HTMLCollection es una colección en vivo : si agrega un elemento <li> a una lista en el DOM, la lista en la HTMLCollection también cambiará.
Una NodeList es una colección estática : si agrega un elemento <li> a una lista en el DOM, la lista en NodeList no cambiará.
Los métodos getElementsByClassName()y getElementsByTagName()
devuelven una HTMLCollection.
Los métodos querySelector()y querySelectorAll()
devuelven una lista de nodos.
Sintaxis
document.querySelector(CSS selectors)
Parámetros
| Parameter | Description |
| CSS selectors |
Required. One or more CSS selectors. CSS selectors select HTML elements based on id, classes, types, attributes, values of attributes etc. For a full list, go to our CSS Selectors Reference. For multiple selectors, separate each selector with a comma (See "More Examples"). |
Valor devuelto
| Escribe | Descripción |
| Objeto | Una lista de nodos con el primer elemento que coincida con los selectores de CSS. Si no se encuentran coincidencias, nullse devuelve. |
Más ejemplos
Obtenga el primer elemento <p> con class="example":
document.querySelector("p.example");
Cambia el texto del elemento con id="demo":
document.querySelector("#demo").innerHTML = "Hello World!";
Seleccione el primer elemento <p> cuyo padre es un elemento <div>.
document.querySelector("div > p");
Seleccione el primer elemento <a> que tiene un atributo "objetivo":
document.querySelector("a[target]");
Seleccione el primer <h3> o el primer <h4>:
<h3>A h3 element</h3>
<h4>A h4 element</h4>
document.querySelector("h3, h4").style.backgroundColor = "red";
Seleccione el primer <h3> o el primer <h4>:
<h4>A h4 element</h4>
<h3>A h3 element</h3>
document.querySelector("h3, h4").style.backgroundColor = "red";
Compatibilidad con navegador
document.querySelector()es una característica DOM Nivel 1 (1998).
Es totalmente compatible con todos los navegadores:
| Chrome | IE | Edge | Firefox | Safari | Opera |
| Yes | 9-11 | Yes | Yes | Yes | Yes |