Scribd
Cargar
19 vistas6 páginas

Buscar - Getelement - , Queryselector

Cargado por

Emiliano Emi
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
19 vistas6 páginas

Buscar - Getelement - , Queryselector

Cargado por

Emiliano Emi
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 6

Buscar: getElement*, querySelector*

Las propiedades de navegación del DOM son ideales cuando los elementos están cerca unos de otros. Pero, ¿y si no lo están?
¿Cómo obtener un elemento arbitrario de la página?

Para estos casos existen métodos de búsqueda adicionales.

document.getElementById o sólo id
Si un elemento tiene el atributo id , podemos obtener el elemento usando el método document.getElementById(id) , sin
importar dónde se encuentre.

Por ejemplo:

►
1 <div id="elem">
2 <div id="elem-content">Elemento</div>
3 </div>
4
5 <script>
6 // obtener el elemento
7 let elem = document.getElementById('elem');
8
9 // hacer que su fondo sea rojo
10 elem.style.background = 'red';
11 </script>

Existe además una variable global nombrada por el id que hace referencia al elemento:

►
1 <div id="elem">
2 <div id="elem-content">Elemento</div>
3 </div>
4
5 <script>
6 // elem es una referencia al elemento del DOM con id="elem"
7 elem.style.background = 'red';
8
9 // id="elem-content" tiene un guión en su interior, por lo que no puede ser un nombre de
10 // ...pero podemos acceder a él usando corchetes: window['elem-content']
11 </script>

…Esto es a menos que declaremos una variable de JavaScript con el mismo nombre, entonces ésta tiene prioridad:

►
1 <div id="elem"></div>
2
3 <script>
4 let elem = 5; // ahora elem es 5, no una referencia a <div id="elem">
5
6 alert(elem); // 5
7 </script>

Por favor, no utilice variables globales nombradas por id para acceder a los elementos
Este comportamiento se encuentra descrito en la especificación, por lo que es una especie de estándar. Pero está soportado
principalmente para compatibilidad.

El navegador intenta ayudarnos mezclando espacios de nombres (namespaces) de JS y DOM. Esto está bien para los scripts
simples, incrustados en HTML, pero generalmente no es una buena práctica. Puede haber conflictos de nombres. Además,
cuando uno lee el código de JS y no tiene el HTML a la vista, no es obvio de dónde viene la variable.

Aquí en el tutorial usamos id para referirnos directamente a un elemento por brevedad, cuando es obvio de dónde viene
el elemento.

En la vida real document.getElementById es el método preferente.


El id debe ser único
El id debe ser único. Sólo puede haber en todo el documento un elemento con un id determinado.

Si hay múltiples 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 esos elementos al azar. Así que, por favor, sigan la
regla y mantengan el id único.

Sólo document.getElementById , no anyElem.getElementById


El método getElementById sólo puede ser llamado en el objeto document . Busca el id dado en todo el documento.

querySelectorAll
Sin duda el método más versátil, elem.querySelectorAll(css) devuelve todos los elementos dentro de elem que coinciden
con el selector CSS dado.

Aquí buscamos todos los elementos <li> que son los últimos hijos:

►
1 <ul>
2 <li>La</li>
3 <li>prueba</li>
4 </ul>
5 <ul>
6 <li>ha</li>
7 <li>pasado/li>
8 </ul>
9 <script>
10 let elements = document.querySelectorAll('ul > li:last-child');
11
12 for (let elem of elements) {
13 alert(elem.innerHTML); // "prueba", "pasado"14
}
15 </script>

Este método es muy poderoso, porque se puede utilizar cualquier selector de CSS.

También se pueden usar pseudoclases


Las pseudoclases como :hover (cuando el cursor sobrevuela el elemento) y :active (cuando hace clic con el botón
principal) también son soportadas. Por ejemplo, document.querySelectorAll(':hover') devolverá una colección de
elementos sobre los que el puntero hace hover en ese momento (en orden de anidación: desde el más exterior <html>
hasta el más anidado).

querySelector
La llamada a elem.querySelector(css) devuelve el primer elemento para el selector CSS dado.

En otras palabras, el resultado es el mismo que elem.querySelectorAll(css)[0] , pero este último busca todos los elementos
y elige uno, mientras que elem.querySelector sólo busca uno. Así que es más rápido y también más corto de escribir.

matches
Los métodos anteriores consistían en buscar en el DOM.

El elem.matches(css) no busca nada, sólo comprueba si el elem coincide con el selector CSS dado. Devuelve true o false .

Este método es útil cuando estamos iterando sobre elementos (como en un array) y tratando de filtrar los que nos interesan.

Por ejemplo:

►
1 <a href="http://example.com/file.zip">...</a>
2 <a href="http://ya.ru">...</a>
3
4 <script>
5 // puede ser cualquier colección en lugar de document.body.children
6 for (let elem of document.body.children) {
7 if (elem.matches('a[href$="zip"]')) {
8 alert("La referencia del archivo: " + elem.href );9
}
10 }
11 </script>
closest
Los ancestros de un elemento son: el padre, el padre del padre, su padre y así sucesivamente. Todos los ancestros juntos forman
la cadena de padres desde el elemento hasta la cima.

El método elem.closest(css) busca el ancestro más cercano que coincide con el selector CSS. El propio elem también se
incluye en la búsqueda.

En otras palabras, el método closest sube del elemento y comprueba cada uno de los padres. Si coincide con el selector,
entonces la búsqueda se detiene y devuelve dicho ancestro.

Por ejemplo:

►
1 <h1>Contenido</h1>
2
3 <div class="contents">
4 <ul class="book">
5 <li class="chapter">Capítulo 1</li>
6 <li class="chapter">Capítulo 2</li>7
</ul>
8 </div>
9
10 <script>
11 let chapter = document.querySelector('.chapter'); // LI
12
13 alert(chapter.closest('.book')); // UL
14 alert(chapter.closest('.contents')); // DIV
15
16 alert(chapter.closest('h1')); // null (porque h1 no es un ancestro)
17 </script>

getElementsBy*
También hay otros métodos que permiten buscar nodos por una etiqueta, una clase, etc.

Hoy en día, son en su mayoría historia, ya que querySelector es más poderoso y corto de escribir.

Aquí los cubrimos principalmente por completar el temario, aunque todavía se pueden encontrar en scripts antiguos.

● elem.getElementsByTagName(tag) busca elementos con la etiqueta dada y devuelve una colección con ellos. El parámetro
tag también puede ser un asterisco "*" para “cualquier etiqueta”.
● elem.getElementsByClassName(className) devuelve elementos con la clase dada.
● document.getElementsByName(name) devuelve elementos con el atributo name dado, en todo el documento. Muy
raramente usado.

Por ejemplo:

1 // obtener todos los divs del documento


2 let divs = document.getElementsByTagName('div');

Para encontrar todas las etiquetas input dentro de una tabla:

►
1 <table id="table">
2 <tr>
3 <td>Su edad:</td>
4
5 <td>
6 <label>
7 <input type="radio" name="age" value="young" checked> menos de 18
8 </label>
9 <label>
10 <input type="radio" name="age" value="mature"> de 18 a 50
11 </label>
12 <label>
13 <input type="radio" name="age" value="senior"> más de 60
14 </label>
15 </td>
16 </tr>
17 </table>
18
19 <script>
20 let inputs = table.getElementsByTagName('input');
21
22 for (let input of inputs) {
23 alert( input.value + ': ' + input.checked );
24 }
25 </script>

¡No olvides la letra "s" !


Los desarrolladores novatos a veces olvidan la letra "s" . Esto es, intentan llamar a getElementByTagName en vez de a
getElementsByTagName .

La letra "s" no se encuentra en getElementById porque devuelve sólo un elemento. But getElementsByTagName
devuelve una colección de elementos, de ahí que tenga la "s" .

¡Devuelve una colección, no un elemento!


Otro error muy extendido entre los desarrolladores novatos es escribir:

1 // no funciona
2 document.getElementsByTagName('input').value = 5;

Esto no funcionará, porque toma una colección de inputs y le asigna el valor a ella en lugar de a los elementos dentro de
ella.

En dicho caso, deberíamos iterar sobre la colección o conseguir un elemento por su índice y luego asignarlo así:

1 // debería funcionar (si hay un input)


2 document.getElementsByTagName('input')[0].value = 5;

Buscando elementos .article :

►
1 <form name="my-form">
2 <div class="article">Artículo</div>
3 <div class="long article">Artículo largo</div>
4 </form>
5
6 <script>
7 // encontrar por atributo de nombre
8 let form = document.getElementsByName('my-form')[0];
9
10 // encontrar por clase dentro del formulario
11 let articles = form.getElementsByClassName('article');
12 alert(articles.length); // 2, encontró dos elementos con la clase "article"
13 </script>

Colecciones vivas
Todos los métodos "getElementsBy*" devuelven una colección viva (live collection). Tales colecciones siempre reflejan el
estado actual del documento y se “auto-actualizan” cuando cambia.

En el siguiente ejemplo, hay dos scripts.

1. El primero crea una referencia a la colección de <div> . Por ahora, su longitud es 1 .


2. El segundo script se ejecuta después de que el navegador se encuentre con otro <div> , por lo que su longitud es de 2 .

►
1 <div>Primer div</div>
2
3 <script>
4 let divs = document.getElementsByTagName('div');
5 alert(divs.length); // 1
6 </script>
7
8 <div>Segundo div</div>
9
10 <script>
11 alert(divs.length); // 2
12 </script>

Por el contrario, querySelectorAll devuelve una colección estática. Es como un array de elementos fijos.

Si lo utilizamos en lugar de getElementsByTagName , entonces ambos scripts dan como resultado 1 :


1 <div>Primer div</div>
2
3 <script>
4 let divs = document.querySelectorAll('div');
5 alert(divs.length); // 1
6 </script>
7
8 <div>Segundo div</div>
9
10 <script>
11 alert(divs.length); // 1
12 </script>

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 el DOM:

Método Busca por... ¿Puede llamar a un elemento? ¿Vivo?


querySelector selector CSS ✔ -

querySelectorAll selector CSS ✔ -

getElementById id - -
getElementsByName name - ✔

getElementsByTagName etiqueta o '*' ✔ ✔

getElementsByClassName class ✔ ✔

Los más utilizados son querySelector y querySelectorAll , pero getElementBy* puede ser de ayuda esporádicamente o
encontrarse en scripts antiguos.

Aparte de eso:

● Existe elem.matches(css) para comprobar si elem coincide con el selector CSS dado.
● Existe elem.closest(css) para buscar el ancestro más cercano que coincida con el selector CSS dado. El propio elem
también se comprueba.

Y mencionemos un método más para comprobar la relación hijo-padre, ya que a veces es útil:

● elemA.contains(elemB) devuelve true si elemB está dentro de elemA (un descendiente de elemA ) o cuando
elemA==elemB .

También podría gustarte