El Document object model (DOM) de Javascript

ejemplo document object model javascript

El Document object model (DOM) de Javascript

Print Friendly, PDF & Email
El Document object model (DOM) de Javascript
Valora esta entrada
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.

Nodo = elemento (etiqueta) + atributos + eventos + texto

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

Reaccionar

Documentos

Elementos

Estilos

Atributos

Eventos

html

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.

herramientas desarrollador web
DOM en las herramientas para desarrollador web

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 contenido

En esta entrada hemos resumido el concepto del DOM.

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

Entradas relacionadas:

Control de acceso con cookies Javascript para web de mayores de edad
- 94
Ejercicio avanzado de javascript para controlar el acceso de usuarios a una página web mediante el uso de cookies. Incluye solución.
Ejercicio JS – Crear un cronómetro con javascript
- 330
Completo cronómetro JS dónde se usa setInterval, addEventListener, removeEventListener y se repasan conceptos de CSS. Incluye solución.
Carácteres escapados en Javascript
- 365
El término escapar un carácter en Javascript sin duda da un poquito de yuyu. En realidad una palabra poco atractiva para algo muy práctico. El concepto es muy similar al de escapar un carácter en HTML...
Como hacer una lista de la compra con Javascript
- 101
Ejercicio lista de la compra con Javascript. Incluye solución. Se practica la creación y eliminación de nodos, this, addEventListener, ...
Instrucciones básicas para familiarizarse con javascript
- 606
El javascript es un lenguaje que se olvida a una velocidad de vértigo si no se practica. Es importante tener unos buenos apuntes 😉 Hoy presento instrucciones básicas que sirven para empezar con scrip...
Ejercicio – Acoplamiento de javascript en un documento web
- 263
Ejercicio y solución de un problema introductorio al mundo del Javascript.
La apasionante historia del Javascript (resumida)
- 595
Javascript es un lenguaje de programación de lado cliente que ha cambiado Internet tal y como lo conocemos a día de hoy. Junto con el html y el css es uno de los 3 pilares del diseño web. Es un requer...
Ejercicio – corrección de errores en javascript. Variables y strings.
- 155
En este ejercicio practicamos la diferencia entre usar un string y una variable. También otras normas básicas de sintaxis de javascript.
Métodos imprescindibles para trabajar con fechas en Javascript
- 273
Compendio de métodos para trabajar con fechas en Javascript. Comparto mi chuleta de métodos para obtener y crear nuevas fechas.
Cuidado con los tutoriales pdf obsoletos sobre html, css y javascript
- 62
En internet se encuentra mucho material de gran calidad para aprender lenguajes como html, css, y javascript. ¿Pero todos los pdf sirven?
Francesc Ricart
hola@francescricart.com

Soy un ingeniero industrial a quién le apasiona aprender y enseñar. En el mundo del marketing online he encontrado una de mis pasiones. Ejerzo como docente ocupacional y privado para empresas. Y también hago consultoría web para PIMES, autónomos y otros emprendedores como yo. Ayudo a las empresas en cualquier temática relacionada con su presencia digital y herramientas web. Aunque mi especialidad es el posicionamiento en buscadores (SEO). A nivel de formación lo que más feliz me hace es que un alumno haga de mi pasión una forma de vida y le ayude a encontrar trabajo. A nivel de negocios ayudo a empresarios a desenvolverse con soltura en el mundo digital y les animo a hacer cada vez más cosas que nunca hubieran imaginado que ellos también podían hacer. En este camino les ayudo haciendo todo aquello dónde ellos no llegan y crecemos juntos. Encontraréis más acerca de mi en la página sobre mi

No hay comentarios

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.