El Document object model (DOM) de Javascript

3
(2)

Publicado

Aviso importante web en obras

Es posible que el contenido que estás visualizando tenga un formato un poco raro o que se haya perdido algún contenido. Esto se debe a que en 2023/09 decidí renovar la página y con más de 1000 escritos el trabajo de irlos revisando uno por uno es agotador. Poco a poco iré corrigiendo todos los contenidos. ¡Gracias por la comprensión!

ejemplo document object model javascript

El DOM es un tipo especial de objeto que esquematiza las relaciones y interacciones entre los nodos de un documento web y que es creado por el navegador cada vez que interpreta una página web.

Cada etiqueta de un documento web es un nodo del mismo y puede ser interpretada a su vez como un objeto con propiedades definidas por los atributos, eventos y contenido de cada etiqueta.

En el modelo de objetos de un documento todos los nodos están relacionados entre si mediante jerarquías.[blockquote text=»Nodo = elemento (etiqueta) + atributos + eventos + texto» show_quote_icon=»no» background_color=»#045e67″ text_color=»#ffffff» width=»50″]

Que nos permite hacer el DOM

Mediante el DOM podemos acceder, modificar, crear, añadir o eliminar cualquier objeto ya sea el propio documento, etiquetas, atributos, eventos o estilos de cualquier etiqueta html, el css o incluso el propio javascript.

Lo resumimos como una combinación de uno de cada una de las 3 columnas a continuación:Encontrar

Modificar

Añadir

Crear

Eliminar

ReaccionarDocumentos

Elementos

Estilos

Atributos

Eventoshtml

css

javascript

Dónde y como visualizar el DOM

Todos los navegadores incorporan un kit de herramientas para desarrolladores desde dónde inspeccionar el código y entre muchos otros usar visualizar el DOM.
El Document object model (DOM) de Javascript 1
En la imagen de pantalla podemos ver un pequeño ejercicio de clase visto desde las herramientas para desarrolladores de un navegador Chrome.

En la imagen aparece una línea señalada y en el extremo inferior el camino «html > head > title» hasta llegar al elemento title y su contenidoEn esta entrada hemos resumido el concepto del DOM.

En futuras publicaciones hablaremos sobre como acceder al DOM y como modificar, crear y eliminar nodos.

  1. Avatar de Elena
    Elena

    Excelentes explicaciones

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *