Las propiedades de navegación DOM son excelentes cuando los elementos están cerca unos de otros. ¿Y si no lo son? ¿Cómo obtener un elemento arbitrario de la página?
Hay métodos de búsqueda adicionales para eso.
document.getElementById o simplemente id
Si un elemento tiene la id atributo, podemos obtener el elemento usando el método document.getElementById(id), sin importar dónde se encuentre.
Por ejemplo :
Además, hay una variable global nombrada por id que hace referencia al elemento:
… Eso es a menos que declaremos una variable JavaScript con el mismo nombre, entonces tiene prioridad:
Este comportamiento se describe en la especificación, por lo que es una especie de estándar. Pero se admite principalmente por compatibilidad.
El navegador intenta ayudarnos mezclando espacios de nombres de JS y DOM. Eso está bien para scripts simples, insertados en HTML, pero generalmente no es algo bueno. Puede haber conflictos de nombres. Además, cuando uno lee código JS y no tiene HTML a la vista, no es obvio de dónde viene la variable.
Aquí en el tutorial usamos id para hacer referencia directamente a un elemento por brevedad, cuando es obvio de dónde proviene el elemento.
En la vida real, document.getElementById es el método preferido.
id debe ser único El id debe ser único. Solo puede haber un elemento en el documento con el id dado.
Si hay varios elementos con el mismo id, entonces el comportamiento de los métodos que lo usan es impredecible, por ejemplo document.getElementById puede devolver cualquiera de estos elementos al azar. Por lo tanto, respete la regla y mantenga id único.
document.getElementById, no anyElem.getElementById El método getElementById solo se puede llamar en document objeto. Busca el id dado en todo el documento.
querySelectorAll
De lejos, la mayoría método versátil, elem.querySelectorAll(css) devuelve todos los elementos dentro de elem que coinciden con el selector de CSS dado.
Aquí buscamos todos los <li> elementos que son los últimos hijos:
Este método es realmente poderoso, porque se puede usar cualquier selector de CSS.
Las pseudoclases en el selector CSS como :hover y :active también son soportado. Por ejemplo, document.querySelectorAll(":hover") devolverá la colección con los elementos sobre los que el puntero está ahora (en orden de anidamiento: desde el <html> más externo al más anidado).
querySelector
La llamada a elem.querySelector(css) devuelve el primer elemento para el CSS dado selector.
En otras palabras, el resultado es el mismo que elem.querySelectorAll(css), pero este último busca todos los elementos y selecciona uno, mientras que elem.querySelector solo busca uno. Así que es más rápido y más corto de escribir.
coincidencias
Los métodos anteriores buscaban en el DOM.
El elem.matches (css) no busca nada , simplemente comprueba si elem coincide con el selector de CSS dado. Devuelve true o false.
El método es útil cuando estamos iterando sobre elementos (como en un matriz o algo) y tratando de filtrar aquellos que nos interesan.
Por ejemplo:
más cercano
Los antepasados de un elemento son: padre, el padre de padre, su padre y así sucesivamente. Los antepasados juntos forman la cadena de padres desde el elemento hasta la parte superior.
El método elem.closest(css) busca el antepasado más cercano que coincida con el selector de CSS. El elem en sí mismo también se incluye en la búsqueda.
En otras palabras, el método closest sube desde el elemento y comprueba cada uno de los padres. Si coincide con el selector, la búsqueda se detiene y se devuelve el ancestro.
Por ejemplo:
getElementsBy *
También hay otros métodos para buscar para los nodos por una etiqueta, clase, etc.
Hoy en día, en su mayoría son historia, ya que querySelector es más poderoso y más corto de escribir.
Así que aquí los cubrimos principalmente para que estén completos, mientras que todavía puede encontrarlos en los scripts antiguos.
-
elem.getElementsByTagName(tag)busca elementos con el etiqueta y devuelve la colección de ellos. El parámetrotagtambién puede ser una estrella"*"para «cualquier etiqueta». -
elem.getElementsByClassName(className)devuelve elementos que tienen la clase CSS dada. -
document.getElementsByName(name)devuelve elementos con el atributonameproporcionado, en todo el documento. Muy raramente utilizado.
Por ejemplo:
Busquemos todas las etiquetas input dentro de la tabla:
"s" ¡letra! Los desarrolladores novatos a veces olvidan la letra "s". Es decir, intentan llamar a getElementByTagName en lugar de getElementsByTagName.
El "s" la letra está ausente en getElementById porque devuelve un solo elemento. Pero getElementsByTagName devuelve una colección de elementos, por lo que hay "s" dentro.
Otro error generalizado de los principiantes es escribir:
Eso no funcionará, porque toma una colección de entradas y le asigna el valor en lugar de a los elementos dentro de ella.
Deberíamos iterar sobre la colección u obtener un elemento por su índice, y luego asignarlo, así:
Buscando elementos .article:
Colecciones en vivo
Todos los métodos "getElementsBy*" devuelven una colección en vivo. Estas colecciones siempre reflejan el estado actual del documento y se «actualizan automáticamente» cuando cambia.
En el siguiente ejemplo, hay dos scripts.
- El primero crea una referencia a la colección de
<div>. A partir de ahora, su longitud es1. - Los segundos scripts se ejecuta después de que el navegador se encuentra con uno más
<div>, por lo que su longitud es2.
En contraste , querySelectorAll devuelve una colección estática. Es como una matriz fija de elementos.
Si lo usamos en su lugar, ambos scripts generan 1:
Ahora podemos ver fácilmente la diferencia. La colección estática no aumentó después de la aparición de un nuevo div en el documento.
Resumen
Hay 6 métodos principales para buscar nodos en DOM:
| Método | Búsquedas por … | Can cal l en un elemento? | Live? |
querySelector |
Selector de CSS | ✔ | – |
querySelectorAll |
Selector de CSS | ✔ | – |
getElementById |
id |
– | – |
getElementsByName |
name |
– | ✔ |
getElementsByTagName |
etiqueta o "*" |
✔ | ✔ |
getElementsByClassName |
clase | ✔ | ✔ |
De lejos, los más utilizados son querySelector y querySelectorAll, pero getElement(s)By* puede ser útil esporádicamente o encontrarse en los scripts antiguos.
Además de eso:
- Hay
elem.matches(css)para comprobar sielemcoincide con el selector de CSS dado. - Hay
elem.closest(css)para buscar el antepasado más cercano que coincida el selector de CSS dado. Elelemen sí también está verificado.
Y mencionemos un método más aquí para verificar la relación padre-hijo, ya que a veces es útil:
-
elemA.contains(elemB)devuelve verdadero sielemBestá dentro deelemA(descendiente deelemA) o cuandoelemA==elemB.