Introducción al DOM

Cualquiera sea la acción que realicemos en una página web HTML, como cambiar un elemento, cambiar los atributos de un elemento o cambiar el estilo de un elemento usando un lenguaje de secuencias de comandos, se ejecuta con la ayuda del DOM. Esto se debe a que el lenguaje de secuencias de comandos no puede acceder al elemento HTML por sí solo, es por eso que requiere una interfaz media que vincule el lenguaje de secuencias de comandos con el elemento HTML.

DOM puede llamarse la estructura del documento donde el documento puede ser una página web HTML o una página XML. En esta publicación, vamos a saber qué es Dom, cómo trabajar con los espectadores de Live DOM y cómo acceder a elementos con un lenguaje de secuencias de comandos.

Que es Dom?

DOM significa modelo de objeto de documento y se considera un estándar para acceder, alterar y eliminar elementos del documento. Este estándar está establecido por el W3C (Consorcio World Wide Web) Y es por eso que DOM se conoce más comúnmente como el W3C DOM. El consorcio World Wide Web definió a DOM como una interfaz que ayuda a los idiomas a interactuar con un documento mientras mantiene el lenguaje neutral.

El Documento en DOM significa un documento que puede ser un documento HTML o un documento XML. El Objeto en DOM se usa para referirse a elementos o nodos del documento. Mientras que la Modelo en el DOM se refiere a la estructura (o árbol) del documento.

Además, el DOM actúa como una interfaz de aplicación (API) para que el lenguaje de secuencias de comandos cambie los elementos del documento HTML

La estructura del documento es algo así como un árbol. Contiene el nodo principal y los nodos infantiles.

Trabajando con espectadores de Live DOM

Algunos sitios web nos proporcionan generadores DOM en vivo, uno de esos espectadores de DOM en vivo se proporciona en CodePen.IO. Considere los siguientes elementos dentro de la página web HTML:

Google	Aturdir
John Doe, Ruski	California

Para generar la jerarquía DOM utilizando el código JavaScript en el bolígrafo de código, copie y pegue estos elementos HTML dentro del Visor DOM en CodePen.IO

Debajo de esta pestaña HTML en "CodePen", Podrás ver la jerarquía de DOM como:

Puede ver claramente los nodos principales, nodos infantiles y nodos de hermanos en función de su sangría en la estructura

Acceso a elementos HTML con JavaScript

JavaScript proporciona múltiples métodos para vincular los elementos en una página web HTML interactuando con el DOM. Estos métodos son a saber:

• getElementById ()
• getElementByClassName ()
• getElementByName ()
• getElementBytagName ()
• getElementBytagns ()

Para demostrar esto, cree una página HTML con las siguientes líneas:

Soy una etiqueta P en el DOM

Agregue el enlace al archivo de script usando la siguiente línea:

Dentro del archivo de script, agregue las siguientes líneas de código para cambiar el color de fondo de este etiqueta P:

var ptag = documento.getElementById ("demo");
ptag.estilo.backgroundColor = "Yellow";

Obtendrá el siguiente resultado en el navegador:

Ahí tienes que has cambiado el estilo de un elemento usando lenguaje de secuencias de comandos.

Conclusión

El DOM está establecido como un estándar por W3C (World Wide Web Consortium) como una interfaz para que el lenguaje de secuencias de comandos interactúe con los elementos del documento (HTML o XML). El lenguaje de secuencias de comandos (por ejemplo, JavaScript) no puede acceder directamente a los elementos de la página web. Por lo tanto, interactúa con el DOM y el DOM actúa como una API y realiza cambios en los elementos de la página web HTML. La estructura DOM es como un árbol, que tiene nodos parentales, nodos infantiles y nodos hermanos.