El héroe oculto de los sitios web: comprensión del DOM

"El DOM" es un término que se usa mucho en el diseño y desarrollo web front-end. Significa "Document Object Model" y es una parte fundamental de los sitios web.

Tan importante como es el DOM, muchas personas no lo entienden. De hecho, puede programar sitios web durante años sin tener que aprender mucho al respecto. Pero a medida que avanza la tecnología de front-end, la comprensión del DOM se vuelve más importante.

Comprensión del contrato DOM

En la programación orientada a objetos, existe una construcción llamada interfaz. Una interfaz no hace nada por sí sola. En cambio, crea un contrato. Dice que cualquier cosa puede interactuar con cualquier otra cosa, siempre que siga las reglas del contrato de interfaz.

Tener una interfaz permite que cualquier parte de un programa interactúe con cualquier otra parte del programa de una manera controlada y predecible. La interfaz también hace posible que una parte de un programa funcione con cualquier otra parte, incluso si no sabe nada sobre la parte del programa en el otro lado de la interfaz.

Una interfaz es como una toma de corriente en su pared. Su dispositivo no necesita saber de dónde viene la energía siempre que el voltaje sea correcto. El transformador de la esquina no necesita saber qué está alimentando. Solo necesita enviar electricidad al voltaje adecuado a su casa.

El DOM es una capa de interfaz entre la página web y el código que la crea y la cambia. Cuando visita un sitio web, está viendo cómo el navegador representa el DOM de ese sitio web. Cuando escribe HTML, en realidad está programando utilizando la API (interfaz de programación) del DOM.

El estándar DOM es mantenido por una organización llamada el Consorcio World Wide Webo W3C. Ellos han creado documentación muy detallada que define el DOM estándar.

En este punto, puede estar pensando que no están haciendo un buen trabajo. Después de todo, existen muchos problemas causados ​​por problemas de compatibilidad entre navegadores.

El problema no es el estándar. Es con los propios navegadores. Muchos navegadores han agregado funcionalidad a su implementación DOM que no cumple con los estándares W3C. A veces, esa funcionalidad se vuelve popular y se implementa en el estándar DOM, lo que obliga a otros navegadores a ponerse al día.

Otro problema es que algunas personas todavía usan versiones anteriores de navegadores que no tienen incorporado el último estándar DOM. Y, a veces, los navegadores no implementan el estándar correctamente.

Cómo está estructurado el DOM

Puedes pensar en el DOM como un árbol. los elemento es el tronco, y todos los elementos dentro de él son ramas. Cuando anida elementos HTML dentro de un elemento principal, en realidad está creando ramas fuera de esa rama. El término adecuado para cada rama es "nodo".

La estructura de árbol crea relaciones lógicas entre nodos, como un árbol genealógico. Cada nodo puede tener un padre y antepasados ​​de los que se ramifica. Pueden tener hermanos. Y los nodos pueden tener hijos y descendientes. Pensar en estos términos ayuda mucho cuando se usa JavaScript y CSS para interactuar con DOM.

Cómo interactúa HTML con DOM

El DOM se define creando un objeto de documento con la interfaz de documento. Su código HTML es la forma más directa de crear un documento. HTML le ofrece una forma sencilla de definir el documento sin necesidad de realizar programación tradicional.

Si recién está comenzando con HTML, aquí tiene cinco consejos para familiarizarse con él.

5 pasos para comprender el código HTML básico

HTML es la columna vertebral de todas las páginas web. Si es un principiante, permítanos guiarlo a través de los pasos básicos para comprender HTML.

HTML es más simple y más indulgente que los lenguajes de programación tradicionales. Facilita la interacción con DOM para los diseñadores web principiantes.

Cómo CSS interactúa con el DOM

Una vez que su HTML ha estructurado el documento DOM, CSS puede diseñar ese documento. Para hacer eso, necesita poder encontrar los elementos que desea diseñar. Lo hace de varias formas.

Puede acceder a los nodos de documentos haciendo referencia a los elementos por nombre, como y. CSS también puede acceder a los elementos directamente haciendo referencia clase y identificación nombres. El estilo de clase se aplica a varios elementos para que pueda diseñarlos a todos al mismo tiempo. Por el contrario, el estilo de identificación aplica cambios a un solo elemento.

También puede acceder a la estructura del árbol genealógico con CSS y ajustar el acceso para un mayor control. Los selectores de CSS te permiten elegir varios elementos y te ofrecen una serie de trucos para encontrarlos. Puede buscar niños por su ascendencia, combinaciones de clases y mucho más.

Cómo interactúa JavaScript con el DOM

JavaScript tiene el mayor control sobre el documento porque JavaScript es un lenguaje de programación real con objetos, control de flujo, variables, etc. El DOM proporciona varias interfaces que permiten a JavaScript la capacidad de manipular el documento, los elementos y otros nodos.

Relacionado: ¿Qué es JavaScript?

JavaScript puede agregar y eliminar nodos, así como cambiar su estilo. Y JavaScript puede buscar eventos en el documento, como pasar el mouse sobre un elemento, hacer clic y presionar teclas.

JavaScript puede buscar y navegar por el árbol del documento de una manera muy similar a CSS. Es capaz de encontrar elementos por id y clase. Y puede recuperar listas de elementos secundarios como matrices.

El futuro del desarrollo web y el DOM

Internet ha cambiado mucho desde los primeros días. En los primeros días, JavaScript se usaba principalmente para efectos especiales y pantallas de datos simples. La mayoría de los sitios web no eran mucho más que folletos digitales. Sin embargo, AJAX cambió todo eso.

AJAX permite que los sitios web actualicen los datos que se muestran desde un servidor sobre la marcha sin tener que volver a cargar la página. Antes de AJAX, cada cambio en los datos solo se podía ver cuando la página se recargaba o el usuario navegaba a otra página.

Después de AJAX, las aplicaciones web se hicieron cada vez más populares. Internet ya no es una colección de sitios web estáticos simples y algunas aplicaciones de alta funcionalidad, como eBay. Ahora Internet es casi un segundo sistema operativo, lleno de aplicaciones altamente funcionales.

A medida que crecen las expectativas de los usuarios, la tecnología debe mantenerse al día. JavaScript no es el lenguaje más potente ni el más rápido. También sufre de algunos problemas, como errores de números de punto flotante, que lo hacen menos deseable para los desarrolladores. Aquí es donde entra en juego WebAssembly.

WebAssembly aporta muchos de los beneficios del código nativo al navegador, incluida una velocidad mejorada y un mejor acceso al hardware. Permitirá a los programadores utilizar otros lenguajes para crear sitios web como C ++ y Rust.

Pero incluso con las grandes mejoras que traerá WebAssembly, el DOM seguirá ahí, proporcionando una interfaz coherente entre el código y lo que se muestra en el navegador.

Cómo usar Outlook en modo oscuro

Reduzca la fatiga visual y aumente la duración de la batería cambiando Microsoft Outlook al modo oscuro.

Sobre el Autor