Entendiendo el Modelo de Objeto de Documento (DOM) en Detalles

Todos hemos oído hablar de la DOM, o Modelo de objeto de documento, Eso se menciona de vez en cuando, relacionado con JavaScript. DOM es un concepto bastante importante en el desarrollo web. Sin ella, no podríamos modificar dinámicamente páginas HTML en el navegador.

Aprender y entender los resultados de DOM en mejores formas de Acceso, cambio y seguimiento. Diferentes elementos de una página HTML. El Modelo de Objeto de Documento también puede ayudarnos. reducir aumentos innecesarios en el tiempo de ejecución del script.

Árboles de estructura de datos

Antes de hablar sobre qué es el DOM, cómo surge, cómo existe y qué sucede dentro de él, quiero que sepas sobre los árboles. No del tipo conífero y de hoja caduca, sino de la árbol de estructura de datos.

Es mucho más fácil comprender el concepto de estructuras de datos si simplificamos su definición. Yo diría que se trata de una estructura de datos. arreglando tus datos. Sí, simplemente un arreglo antiguo, como organizaría los muebles en su casa o los libros en una estantería o todos los diferentes grupos de alimentos que tiene para una comida en su plato con el fin de haz que sea significativo para ti.

Por supuesto, eso no es todo lo que hay en una estructura de datos, pero es prácticamente donde comienza todo. Esta “arreglo” está en el corazón de todo. Es bastante importante en el DOM también. Pero no estamos hablando de DOM todavía, así que déjame guiarte hacia un estructura de datos con la que podría estar familiarizado: matrices.

Arreglos y árboles

Las matrices tienen índices y longitud, ellos pueden ser multidimensional, y tienen muchas mas caracteristicas. Por más importante que sea saber estas cosas acerca de los arreglos, no nos molestemos con eso ahora. Para nosotros, una matriz es bastante simple. Es cuando tu organizar diferentes cosas en una línea.

Del mismo modo, cuando se piensa en árboles, digamos, se trata de poner las cosas una debajo de la otra, comenzando con una sola cosa en la parte superior.

Ahora, puedes tomar los patos de una sola línea de antes., ponlo en posición vertical, y dime que “Ahora, cada pato está bajo otro pato.”. ¿Es entonces un árbol? Es.

Dependiendo de cuáles sean sus datos o de cómo los vaya a usar, los datos más altos de su árbol (llamados raíz) podría ser algo que es de gran importancia o algo que solo está ahí para adjuntar otros elementos debajo de ella.

De cualquier manera, el elemento superior en una estructura de datos de árbol hace algo muy importante. Proporciona un lugar para Empieza a buscar cualquier información que queramos extraer del árbol..

El significado de DOM

DOM significa Modelo de objeto de documento. El documento apunta a un documento HTML (XML) cual es representado como un objeto. (¡En JavaScript todo puede ser representado como un objeto!)

El modelo es creado por el navegador que toma un documento HTML y crea un objeto que lo representa. Podemos acceder a este objeto con JavaScript. Y ya que utilizamos este objeto para manipular el documento HTML y construir nuestras propias aplicaciones., DOM es básicamente un API.

El arbol de DOM

En el código JavaScript, el documento HTML es representado como un objeto. Todos los datos leídos de ese documento son también se guarda como objetos, anidados uno debajo del otro (porque como dije antes, en JavaScript todo puede ser representado solo como objetos).

Entonces, esta es básicamente la disposición física de los datos DOM en código: todo es dispuestos como objetos. Lógicamente, sin embargo, es un arbol.

El analizador de DOM

Cada software de navegador tiene un programa llamado DOM Parser que es responsable de análisis de un documento HTML en DOM.

Los navegadores leen una página HTML y convierten sus datos en objetos que conforman el DOM. La información presente en estos objetos DOM de JavaScript se organiza lógicamente como un árbol de estructura de datos conocido como el árbol DOM.

Análisis de datos desde HTML al árbol DOM

Toma un simple archivo HTML. Tiene la elemento raíz . Sus subelementos son y , Cada uno tiene muchos elementos hijos propios..

Tan esencialmente, el navegador lee los datos en el documento HTML, algo similar a esto:

Y, los organiza en un árbol DOM Me gusta esto:

La representación de cada elemento HTML (y su contenido perteneciente) en el árbol DOM se conoce como Nodo. los nodo raíz es el nodo de .

los Interfaz DOM en JavaScript se llama documento (ya que es la representación del documento HTML). Así, accedemos al árbol DOM de un documento HTML. a través de documento interfaz en JavaScript.

No solo podemos acceder, sino también manipular el documento HTML a través del DOM. Podemos agregar elementos a una página web, eliminarlos y actualizarlos. Cada vez que cambiamos o actualizamos cualquier nodo en el árbol DOM, reflexiona en la pagina web.

Cómo se diseñan los nodos

He mencionado antes que cada pieza de datos de un documento HTML es guardado como un objeto en JavaScript. Entonces, ¿cómo los datos guardados como un objeto se pueden organizar lógicamente como un árbol??

Los nodos de un árbol DOM tienen ciertas características o propiedades. Casi todos los nodos en un árbol tiene un nodo padre (el nodo justo encima de él), nodos hijos (los nodos debajo de ella) y hermanos (Otros nodos pertenecientes al mismo padre). Teniendo esto familia arriba, abajo y alrededor de un nodo es lo que lo califica como un parte de un arbol.

Esta información familiar de cada nodo es Guardado como propiedades en el objeto que representa ese nodo.. Por ejemplo, niños es una propiedad de un nodo que transporta una lista de los elementos secundarios de ese nodo, por lo que organiza lógicamente sus elementos secundarios debajo del nodo.

Evite exagerar la manipulación de DOM

Por mucho que nos resulte útil actualizar el DOM (para modificar una página web), existe una cosa tal como exagerando.

Digamos que quieres actualizar el color de un