Al desarrollar sitios web modernos, las funciones de JavaScript para trabajar con DOM son muy utilizadas. Los scripts le permiten mostrar y ocultar los elementos a partir de los cuales se construyen las páginas, configurar las propiedades de estos elementos. Los objetos DOM con los que interactúan los programas tienen propiedades y métodos. Prácticamente todos los programadores web conocen algunos de ellos, según el autor del material, cuya traducción publicamos hoy. Pero algunos de los que quiere hablar aquí son mucho menos famosos.
HTML y DOM
Primero, hablemos sobre la diferencia entre HTML y DOM. Por ejemplo, un elemento
<table< normal es obviamente un código HTML. Este elemento se puede usar en archivos html; tiene un conjunto de atributos que determina la apariencia y el comportamiento de la tabla creada con su ayuda. Estrictamente hablando, la etiqueta
<table> sí misma no tiene nada que ver con JavaScript. El DOM (Modelo de objetos de documento) proporciona la relación entre los elementos HTML presentes en el documento y el código JavaScript. El DOM permite interactuar con elementos HTML del código JavaScript como si fueran objetos.
Todos los elementos HTML tienen sus propias "interfaces DOM" que definen propiedades (generalmente están asociadas con atributos de elementos HTML) y métodos. Por ejemplo, el elemento
<table> tiene una interfaz llamada
HTMLTableElement .
Puede obtener un enlace a un elemento, por ejemplo, utilizando la siguiente construcción:
const searchBox = document.getElementById('search-box');
Después de recibir el enlace al elemento, el programador tiene acceso a las propiedades y métodos que tienen dichos elementos. Por ejemplo, puede trabajar con la propiedad de
value de un determinado campo de texto, dado que el enlace se almacena en la variable
searchBox utilizando una estructura del formulario
searchBox.value . Puede colocar el cursor en este campo de texto llamando a su método
searchBox.focus() .
Quizás aquí es donde podemos completar nuestro "curso corto sobre el DOM" e ir, de hecho, a las propiedades y métodos poco conocidos de las interfaces DOM de los elementos HTML.
Si desea leer y experimentar de inmediato, abra las herramientas de desarrollo del navegador. En particular, para obtener un enlace a un determinado elemento de la página, puede seleccionarlo en el árbol de elementos y luego usar la construcción
$0 en la
consola . Para ver un elemento como un objeto, escriba
dir($0) en la consola. Y, por cierto, si te encuentras con algo nuevo para ti, intenta explorarlo usando la consola.
No. 1: métodos de tabla
El modesto elemento
<table> (que aún ocupa el primer lugar entre las tecnologías utilizadas en el desarrollo de diseños de páginas web) tiene una buena cantidad de métodos muy buenos que simplifican enormemente el proceso de construcción de tablas.
Estas son algunas de ellas.
const tableEl = document.querySelector('table'); const headerRow = tableEl.createTHead().insertRow(); headerRow.insertCell().textContent = 'Make'; headerRow.insertCell().textContent = 'Model'; headerRow.insertCell().textContent = 'Color'; const newRow = tableEl.insertRow(); newRow.insertCell().textContent = 'Yes'; newRow.insertCell().textContent = 'No'; newRow.insertCell().textContent = 'Thank you';
Como puede ver, aquí no usamos comandos como
document.createElement() . Y el método
.insertRow() , si lo llama directamente sobre la tabla, incluso proporcionará la adición de
<tbody> . ¿No es maravilloso?
# 2: método scrollIntoView ()
Probablemente sepa que si el enlace tiene una construcción como
#something , ¿luego de cargar la página, el navegador se desplazará automáticamente al elemento con la
ID correspondiente? El método es conveniente, pero si el elemento que nos interesa se representa después de cargar la página, no funcionará. A continuación, le mostramos cómo recrear este patrón de comportamiento:
document.querySelector(document.location.hash).scrollIntoView();
No. 3: propiedad oculta
Aquí consideramos una propiedad, sin embargo, lo más probable es que, al acceder a esta propiedad, se llame a un determinado setter, que es un método En cualquier caso, recuerde, ¿alguna vez ha utilizado el diseño que se muestra a continuación para ocultar un elemento?
myElement.style.display = 'none'
Si lo usa, ya no debería hacerlo. Para ocultar un elemento, simplemente escriba
true en su propiedad
hidden :
myElement.hidden = true
# 4: método toggle ()
De hecho, este no es un método de algún elemento. Este es un método de propiedad de elemento. En particular, este método le permite agregar clases a un elemento y eliminarlo utilizando la siguiente construcción:
myElement.classList.toggle('some-class')
Por cierto, si alguna vez ha agregado clases usando la construcción
if , tenga en cuenta que ya no tiene que hacer esto, y olvídese de esta construcción. El mismo mecanismo se implementa utilizando el segundo parámetro del método
toggle() . Si esta es una expresión que se evalúa como
true , entonces la clase pasada a
toggle() se agregará al elemento.
el.classList.toggle('some-orange-class', theme === 'orange');
Probablemente, aquí puede tener dudas sobre la idoneidad de este diseño. Después de todo, el nombre del método, "alternar", que, dado que la esencia de la acción realizada por él está oculto en él, puede traducirse como "interruptor", no contiene ninguna mención de que "cambio" implica el cumplimiento de una determinada condición. Sin embargo, el diseño descrito anteriormente existe de esta forma, aunque los desarrolladores de Internet Explorer probablemente también lo consideren extraño. En su implementación de
toggle() no se proporciona
toggle() segundo parámetro. Por lo tanto, aunque se dijo anteriormente que aquellos que saben sobre
toggle() pueden olvidarse de la construcción
if , olvídalo, sin embargo, no lo hacen.
# 5: método querySelector ()
Definitivamente ya sabe acerca de la existencia de este método, pero existe la sospecha de que exactamente el 17% de ustedes no sabe que se puede usar en la aplicación a cualquier elemento.
Por ejemplo, la construcción
myElement.querySelector('.my-class') selecciona solo aquellos elementos que tienen la clase
my-class y al mismo tiempo son descendientes del elemento
myElement .
# 6: método más cercano ()
Todos los elementos que admiten la búsqueda de elementos primarios tienen este método. Esto es algo como el reverso de
querySelector() . Usando este método, por ejemplo, puede obtener el título de la sección actual:
myElement.closest('article').querySelector('h1');
Aquí, durante la búsqueda, primero
<article> detecta el primer elemento padre
<article> , y luego el primer elemento
<h1> ingresa.
# 7: método getBoundingClientRect ()
El método
getBoundingClientRect() devuelve un objeto pequeño bien decorado que contiene información sobre el tamaño del elemento para el que se llamó a este método.
{ x: 604.875, y: 1312, width: 701.625, height: 31, top: 1312, right: 1306.5, bottom: 1343, left: 604.875 }
Sin embargo, utilizando este método, se debe tener cuidado, en particular, prestando atención a dos puntos:
- Al llamar a este método, se redibuja la página. Dependiendo del dispositivo en el que se ve la página y de la complejidad de la página, esta operación puede llevar varios milisegundos. Considere esto si tiene la intención de llamar a este método en ciertos fragmentos de código repetidos, por ejemplo, al realizar animaciones.
- No todos los navegadores admiten este método.
# 8: método coincide ()
Supongamos que necesitamos verificar si cierto elemento tiene cierta clase.
Aquí se explica cómo resolver este problema, aparentemente de la manera más difícil:
if (myElement.className.indexOf('some-class') > -1) {
Aquí hay otra opción, es mejor, pero también lejos de ser ideal:
if (myElement.className.includes('some-class')) {
Y aquí está la mejor manera de resolver este problema:
if (myElement.matches('.some-class')) {
# 9: método insertAdarestElement ()
Este método es similar a
appendChild() , pero le da un poco más de poder sobre dónde se agregará exactamente el elemento secundario.
Entonces, el
parentEl.insertAdjacentElement('beforeend', newEl) es similar al comando
parentEl.appendChild(newEl) , pero usando el método
insertAdjacentElement() , puede pasarle los
beforebegin ,
afterbegin y
afterend , indicando el lugar donde necesita añadir elemento
No. 10: contiene () método
¿Alguna vez has querido saber si un elemento está dentro de otro? Lo necesito todo el tiempo Por ejemplo, si durante el procesamiento de un evento de clic del mouse necesita saber si ocurrió dentro de la ventana modal o fuera de ella (lo que significa que puede cerrarse), puede usar la siguiente construcción:
const handleClick = e => { if (!modalEl.contains(e.target)) modalEl.hidden = true; };
Aquí
modalEl es un enlace a una ventana modal, y
e.target es cualquier elemento en el que se hace clic. Curiosamente, cuando uso esta técnica, nunca puedo escribir todo bien la primera vez, incluso cuando recuerdo que estoy constantemente equivocado y trato de corregir posibles errores por adelantado.
# 11: método getAttribute ()
Quizás este método pueda llamarse el más inútil, sin embargo, hay una situación en la que definitivamente puede ser útil.
¿Recuerdas que dijimos anteriormente que las propiedades de los objetos DOM generalmente están asociadas con atributos de elementos HTML?
Uno de los casos en que este no es el caso está representado por el atributo
href , por ejemplo, como aquí:
<a href="/animals/cat">Cat</a> .
La construcción
el.href no regresará, como es de esperar,
/animals/cat . Esto se debe a que el elemento
<a> implementa la interfaz
HTMLHyperlinkElementUtils , que tiene muchas propiedades auxiliares, como el
protocol y el
hash que lo ayudan a descubrir los detalles de los enlaces.
Una de estas propiedades auxiliares es la propiedad
href , que proporciona una URL completa que incluye todo lo que la URL relativa no tiene en el atributo.
Como resultado, para obtener exactamente lo que está escrito en el atributo
href , debe usar la
el.getAttribute('href') .
No. 12: tres métodos del elemento <dialog>
El elemento relativamente nuevo
<dialog> tiene dos métodos útiles, pero bastante comunes, y un método que se puede llamar simplemente maravilloso. Entonces, los métodos
show() y
close() hacen exactamente lo que puede esperar de ellos, mostrando y ocultando la ventana. Los llamamos útiles, pero ordinarios. Pero el método
showModal() mostrará el elemento
<dialog> encima de todo lo demás, mostrándolo en el centro de la ventana. De hecho, se espera exactamente tal comportamiento de las ventanas modales. Cuando trabaje con dichos elementos, no necesita pensar en la propiedad del
z-index , agregar manualmente un fondo borroso o escuchar el evento de presionar la tecla
Escape para cerrar la ventana correspondiente. El navegador sabe cómo deberían funcionar las ventanas modales y se asegurará de que todo funcione como debería.
# 13: método forEach ()
A veces, cuando obtiene un enlace a una lista de elementos, puede
forEach() sobre estos elementos utilizando el método
forEach() . Los bucles
for() son ayer. Supongamos que necesitamos enumerar todos los elementos
<a> de la página en el registro. Si hacemos esto como se muestra a continuación, encontraremos un mensaje de error:
document.getElementsByTagName('a').forEach(el => { console.log(el.href); });
Para resolver este problema, puede usar la siguiente construcción:
document.querySelectorAll('a').forEach(el => { console.log(el.href); });
El punto aquí es que métodos como
getElementsByTagName() devuelven un objeto de tipo
HTMLCollection , y
querySelectorAll objeto
querySelectorAll . Es la interfaz del objeto
NodeList nos da acceso al método
forEach() (y también a los métodos de
keys() ,
values() y
entries() ).
De hecho, sería mucho mejor si dichos métodos simplemente devolvieran matrices normales y no nos ofrecieran algo que tenga algún tipo de método aparentemente útil que no se parezca a las matrices. Sin embargo, no se moleste por esto, ya que las personas inteligentes de ECMA nos dieron un gran método:
Array.from() , que nos permite convertir todo lo que parece una matriz en una matriz.
Como resultado, puede escribir lo siguiente:
Array.from(document.getElementsByTagName('a')).forEach(el => { console.log(el.href); });
Y aquí hay una cosita bonita. Al transformar en una matriz lo que solía ser así, tenemos la oportunidad de utilizar muchos métodos de matriz, como
map() ,
filter() y
reduce() . Aquí, por ejemplo, cómo formar una matriz de enlaces externos en la página:
Array.from(document.querySelectorAll('a')) .map(el => el.origin) .filter(origin => origin !== document.origin) .filter(Boolean);
Por cierto, me gusta mucho la
.filter(Boolean) porque cuando la encuentro en algún momento del código que escribí hace mucho tiempo, apenas puedo entender de inmediato su significado.
No. 14: trabajar con formularios
Es muy probable que sepa que el elemento
<form> tiene un método
submit() . Sin embargo, es menos probable que sepa que los formularios tienen un método
reset() y que tienen un método
reportValidity() , que es aplicable cuando se utiliza la validación para completar los elementos del formulario.
Al trabajar con formularios, además, puede usar su propiedad de
elements , que, a través de un punto, le permite acceder a elementos de formulario utilizando sus atributos de
name . Por ejemplo, la construcción
myFormEl.elements.email devolverá el elemento
<input name="email" /> que pertenece al formulario ("pertenecer" no significa necesariamente "ser un descendiente").
Cabe señalar aquí que la propiedad de
elements sí misma no devuelve una lista de elementos ordinarios. Devuelve una lista de controles (y esta lista, por supuesto, no es una matriz).
Aquí hay un ejemplo. Si hay tres botones de radio en el formulario y todos tienen el mismo nombre (
animal ), la construcción
formEl.elements.animal dará un enlace a un conjunto de botones de radio (1 control, 3 elementos HTML). Y si usa el
formEl.elements.animal.value diseño
formEl.elements.animal.value , le dará el valor del botón de radio seleccionado por el usuario.
Si lo piensas, entonces todo parece bastante extraño, así que tratemos con el ejemplo anterior:
formEl es un elemento.elements es un objeto HTMLFormControlsCollection que se parece a una matriz pero no lo es. Sus elementos no son necesariamente elementos HTML.animal es un conjunto de varios botones de radio, presentados como un conjunto debido al hecho de que todos tienen el mismo atributo de name (hay una interfaz RadioNodeList diseñada específicamente para trabajar con botones de radio).value usa para acceder al atributo value del botón de opción activo en la colección.
# 15: método select ()
Quizás al final del material sería mejor hablar sobre algún método absolutamente sorprendente, aunque quizás este método sea una revelación para alguien. Por lo tanto, el método
.select() permite seleccionar texto en los campos de entrada para los que se llama.
Resumen
En este artículo, hablamos sobre métodos y propiedades poco conocidos que se pueden usar para trabajar con el contenido de las páginas web. Esperamos que haya encontrado aquí algo nuevo para usted, y quizás no solo nuevo, sino también útil.
Estimados lectores! ¿Utiliza algún medio de interacción programática con los contenidos de páginas web que no son ampliamente conocidos?
