DOM

El DOM (Document Object Model) es una interfaz de programación que puede acceder y modificar el contenido, estructura y estilo de los documentos HTML, describiendo el contenido del documento como un conjunto de objetos y así Javascript puede actuar sobre ellos.

El DOM permite un acceso a la estructura de una página HTML mediante el mapeo de los elementos de esta página en un árbol de nodos. Cada elemento se convierte en un nodo y cada porción de texto, en un nodo de texto.

Los principales tipos de nodos en el DOM son:

a) Document: el nodo document es el nodo raíz, a partir del cual derivan el resto de nodos.

b) Element: son los nodos definidos por etiquetas html. Por ejemplo una etiqueta div genera un nodo. Si dentro de ese div tenemos tres etiquetas p, dichas etiquetas definen nodos hijos de la etiqueta div.

c) Text: el texto dentro de un nodo element se considera un nuevo nodo hijo de tipo text (texto). Los navegadores también crean nodos tipo texto sin contenido para representar elementos como saltos de línea o espacios vacíos.

d) Attribute: los atributos de las etiquetas definen nodos, aunque trabajando con JavaScript no los veremos como nodos, sino que lo consideramos información asociada al nodo de tipo element.

Árbol de Nodos

Para modificar el contenido de los elementos de nuestro DOM podemos hacerlo de varias maneras, afortunadamente JavaScript permite acceder a cada uno de los elementos de una página utilizando tan sólo algunos métodos y propiedades.

• .innerHTML : nos permite acceder al código HTML comprendido entre las etiquetas de apertura y cierre que definen el nodo y modificarla si lo deseamos. Con esto se puede modificar completamente el HTML, no solo el texto.
• .value : establece o retorna el atributo value de un campo de texto, puede ser el valor por defecto o el texto que ingresa el usuario.
• .getElementsByTagName() : Es un método que obtiene todos los elementos de la página HTML cuya etiqueta sea igual al parámetro que se le pasa.

• .getElementsByClassName() : Es un método que devuelve todos los elementos de la página cuya clase sea igual al parámetro que se le pasa a la función. Puede ser más de una clase.

• .querySelector(): Esta método devuelve el primer elemento con el nombre del parámetro asignado. Puede ser class, id o tag name.

• .querySelectorAll(): Esta método toma todos los elementos con el selector asignado y devuelve un objeto de tipo NodeList con los elementos que coincidan.

Aprende más sobre DOM y la mejor forma de iniciarte en JavaScript visitando la página de MUKTEK