Modelo Dom

________________________________________________________________________________________________________________________________

¿Qué es el DOM?

DOM significa Document Object Model, en español sería Modelo de Objetos del Documento. Es una interfaz de programación que nos permite crear, cambiar, o remover elementos del documento. También podemos agregar eventos a esos elementos para hacer más dinámica nuestra página. El DOM visualiza el documento de HTML como un árbol de tres nodos. Un nodo representa un documento de HTML. Echemos un vistazo a este código de HTML para entender mejor la estructura de árbol del DOM.

foto

Nuestro documento se llama nodo raíz y contiene un nodo hijo el cual es el elemento html. El elemento html contiene dos hijos los cuales son los elementos y . Ambos elementos head y body tienen hijos propios. Aquí hay otra forma de visualizar este árbol de nodos.

foto

Podemos acceder a estos elementos en el documento y hacer cambios a ellos usando JavaScript. Veamos algunos ejemplos de como podemos trabajar con el DOM usando JavaScript.

Como seleccionar Elementos en el Documento

Hay diferentes métodos para seleccionar un elemento en el documento de HTML. En este artículo, nos enfocaremos en tres de esos métodos: getElementById() querySelector() querySelectorAll() getElementById() En HTML, los ids se utilizan como identificadores únicos para los elementos HTML. Esto significa que no podemos tener el mismo nombre de id para dos elementos diferentes.