¿Que es DOM?

Una página HTML está formada por múltiples etiquetas HTML, anidadas una dentro de otra, formando un árbol de etiquetas relacionadas entre sí, a esto se le llama DOM. Cuando nos referimos al DOM en Javascript es esta estructura que podemos modificar de forma dinámica podemos añadir nuevas etiquetas, modificarlas, hacer busquedas o eliminarlas. DOM no es un lenguaje de programación pero sin él, el lenguaje JavaScript no tiene ningún modelo o noción de las páginas web. El DOM es una de las APIs (interfaz de programación de aplicaciones) más usadas en la Web, ya que permite ejecutar código en el navegador para acceder e interactuar con cualquier nodo del documento

Caracteristicas

Notacion

La W3C recomienda que los nombres de las propiedades, métodos y eventos de cada uno de los objetos se mantengan sea cual fuere el lenguaje

Importancia

DOM transforma todos los documentos HTML en conjuntos de elementos llamados nodos, que están interconectados y representan los contenidos de las páginas web y relaciones entre ellos.

document

La forma de acceder al DOM es a través de un objeto llamado document, que representa el DOM de la página o pestaña del navegador.

Librerias

Las librerias de terceros nos facilitan el trabajo permitiéndonos programar más rápidamente pero sacrifica el rendimiento. Algunas librerias que podemos usar son:

RE:DOM
Voyeur.js
HtmlJs
DOMtastic
UmbrellaJS

DOM Example

Esta representación es solo aproximada para conocer la estructura de una página web conforme al DOM para saber cómo podemos acceder a sus elementos y manipularlos usando JavaScript (u otro lenguaje).

Inspeccionar Elementos

Podemos hacer click derecho en la página web y en el menú elegir la opción “Inspeccionar Elemento”, esto nos mostrarara la estructura DOM, luego seleccionamos el boton "seleccionar un elemento en la pagina" y este nos permitira elegir un nodo desde la página web utilizando un mouse

Interaccion con la consola

Seleccionamos el primer elemto <li> en la pestaña elementos
Presionamos la tecla ESC esto abre la consola
Luego el elemento seleccionado es $0, entonces ejecutamos el comando $0.style.background = 'red' esto cambiara el fondo de a rojo

¿Qué es Document Object Model (DOM)?

Manipulación del DOM

DOM JavaScript

Curso Gratis de Manipulación del DOM

👉 ¡Ingresa aqui! 👈

Referencias

Manz. (n.d.). ¿Que es DOM? lenguajejs. Consulta Septiembre 13, 2021, Obtenido de: https://lenguajejs.com/javascript/dom/que-es/

brKantor, I. (2021, Septiembre 5). Árbol del Modelo de Objetos del Documento (DOM). JavaScript.INFO Recuperado Septiembre 13, 2021, Obtenido de https://es.javascript.info/dom-nodes

MDN contributors. (2021, Septiembre 11). ¿Qué es el DOM? MDN Web Docs. Recuperado Septiembre 13, 2021, Obtenido de: https://developer.mozilla.org/es/docs/Web/API/Document_Object_Model/Introduction

EcuRed. (2015, Junio 18). Uso del DOM. EcuRed. Recuperado Septiembre 13, 2021, Obtenido de: https://www.ecured.cu/Uso_del_DOM#Importancia_del_DOM

> >