DOM

Introducción al DOM

El Document Object Model (DOM) es un modelo abstracto que representa los documentos web (como HTML o XML) en forma de un árbol de nodos. Este modelo, definido por el W3C, nos permite acceder, modificar y actualizar dinámicamente el contenido, la estructura y el estilo de una página web mediante scripts (como JavaScript).

Algunas ventajas de utilizar el DOM son: - Navegar a través de los nodos que conforman la página. - Modificar elementos, atributos y contenido en tiempo real. - Integrar la manipulación con eventos, permitiendo una interacción dinámica con el usuario.

Tipos de DOM

El DOM consta de diferentes variantes adaptadas a distintos tipos de documentos: - DOM Core: Modelo general para cualquier documento estructurado. - XML DOM: Modelo específico para documentos XML. - HTML DOM: Modelo enfocado en documentos HTML.

Estructura del Árbol de Nodos

El documento se organiza como un árbol en el que: - Nodo raíz: Es el elemento superior (por ejemplo, <html> en documentos HTML). - Nodos hijos: Cada nodo, excepto la raíz, tiene un nodo padre y puede tener múltiples hijos. - Hojas: Son los nodos sin hijos. - Nodos hermanos: Son aquellos que comparten el mismo nodo padre.

Nodos Más Importantes en el Modelo

Algunos de los nodos clave son:

Document:
El nodo raíz del documento, de donde cuelgan todos los demás elementos.
DocumentType:
Representa el tipo de documento (DTD) y se especifica mediante el DOCTYPE en HTML.
Element:
Representa los elementos HTML, definidos por etiquetas de apertura y cierre (ej.: <p>...</p>), o elementos auto-cerrados (ej.: <br/>).
Attr:
Representa los atributos de un elemento.
Text:
Contiene el texto dentro de un elemento.
CDataSection:
Contiene secciones de texto sin analizar, definidas mediante <![CDATA[ ... ]]>.
Comment:
Representa comentarios en el documento.

La Interfaz Node

JavaScript utiliza el objeto Node para manipular los nodos del DOM. Este objeto define constantes, propiedades y métodos que facilitan la interacción con el documento.

Constantes para Tipos de Nodo

Node.ELEMENT_NODE = 1
Node.ATTRIBUTE_NODE = 2
Node.TEXT_NODE = 3
Node.CDATA_SECTION_NODE = 4
Node.ENTITY_REFERENCE_NODE = 5
Node.ENTITY_NODE = 6
Node.PROCESSING_INSTRUCTION_NODE = 7
Node.COMMENT_NODE = 8
Node.DOCUMENT_NODE = 9
Node.DOCUMENT_TYPE_NODE = 10
Node.DOCUMENT_FRAGMENT_NODE = 11
Node.NOTATION_NODE = 12

Propiedades y Métodos Principales

Propiedad/Método	Valor Devuelto	Descripción
`nodeName`	String	Nombre del nodo (según el tipo de nodo, puede no estar definido).
`nodeValue`	String	Valor del nodo (por ejemplo, el texto dentro de un nodo `Text`).
`nodeType`	Number	Tipo de nodo, basado en las constantes antes definidas.
`ownerDocument`	Document	Referencia al documento al que pertenece el nodo.
`firstChild`	Node	Primer nodo hijo.
`lastChild`	Node	Último nodo hijo.
`childNodes`	NodeList	Lista de todos los nodos hijos.
`previousSibling`	Node	Nodo hermano anterior, o `null` si es el primero.
`nextSibling`	Node	Nodo hermano siguiente, o `null` si es el último.
`hasChildNodes()`	Boolean	Devuelve `true` si el nodo tiene hijos.
`attributes`	NamedNodeMap	Para elementos, lista de objetos `Attr` que representan sus atributos.
`appendChild(nodo)`	Node	Añade un nodo al final de los hijos.
`removeChild(nodo)`	Node	Elimina un nodo hijo.
`replaceChild(nuevo, antiguo)`	Node	Reemplaza un nodo antiguo por un nuevo nodo.
`insertBefore(nuevo, existente)`	Node	Inserta un nuevo nodo antes de un nodo existente.

Acceso al Documento y a los Nodos desde JavaScript

Métodos de Acceso Directo

Por ID:

let elemento = document.getElementById("miID");

Por etiqueta:

let elementos = document.getElementsByTagName("p");

Por nombre:

let elementos = document.getElementsByName("nombreElemento");

Colección de formularios:

let formulario = document.forms["nombreFormulario"];

Acceso a Atributos

Con un elemento, puedes: - Obtener un atributo:
javascript let valor = elemento.getAttribute("class"); - Modificar un atributo:
javascript elemento.setAttribute("id", "nuevoID"); - Eliminar un atributo:
javascript elemento.removeAttribute("style");

También es posible interactuar directamente con la colección attributes del elemento.

Creación y Eliminación de Nodos

Para manipular el DOM dinámicamente, puedes crear, agregar y eliminar nodos:

Crear Nodos

Crear un elemento:

let nuevoElemento = document.createElement("div");

Crear un nodo de texto:

let textoNodo = document.createTextNode("Este es un mensaje.");

Crear un atributo:

let nuevoAtributo = document.createAttribute("class");
nuevoAtributo.value = "miClase";
nuevoElemento.setAttributeNode(nuevoAtributo);

Crear un comentario:

let comentario = document.createComment("Este es un comentario");

Crear un fragmento de documento:

let fragmento = document.createDocumentFragment();

Agregar y Eliminar Nodos

Ejemplo de creación y adición de un nuevo elemento al documento:

// 1. Crear un elemento <h1>
let h = document.createElement("h1");

// 2. Crear un nodo de texto
let t = document.createTextNode("¡Hola, mundo!");

// 3. Agregar el nodo de texto al elemento <h1>
h.appendChild(t);

// 4. Agregar un atributo (opcional)
h.setAttribute("class", "titulo");

// 5. Agregar el elemento al <body>
document.body.appendChild(h);

Para eliminar un nodo, usa el método removeChild en el nodo padre:

let elemento = document.getElementById("miDiv");
elemento.parentNode.removeChild(elemento);

Además, el contenido HTML interno de un elemento puede modificarse con la propiedad innerHTML:

elemento.innerHTML = "<p>Nuevo contenido</p>";

Programación de Eventos y el DOM

La manipulación del DOM se vuelve especialmente poderosa cuando se integra con eventos, que permiten actualizar dinámicamente la interfaz en respuesta a acciones del usuario.

Carga del Documento

Evento onload:
Permite ejecutar código una vez que la página ha cargado completamente. Por ejemplo:

<body onload="inicializar();">

O, en JavaScript:

window.onload = function() {
  // Código a ejecutar después de que el DOM esté completamente cargado
};

Actualizaciones en Respuesta a Eventos

Puedes modificar el contenido del DOM en respuesta a eventos como onclick, onmouseover, onmouseout, etc.

Ejemplo: Cambiar el contenido de un elemento al pasar el ratón:

<div id="miDiv">Pasa el ratón sobre mí</div>
<script>
  const miDiv = document.getElementById("miDiv");
  miDiv.addEventListener("mouseover", function() {
    this.textContent = "¡Ratón sobre el elemento!";
  });
  miDiv.addEventListener("mouseout", function() {
    this.textContent = "Pasa el ratón sobre mí";
  });
</script>

Modelos de Registro de Eventos

Existen tres principales modelos para registrar eventos:

a) En Línea

Asignar el manejador directamente en el HTML:

<a href="#" onclick="accion(); return false;">Haz clic aquí</a>

No recomendado debido a la mezcla de estructura y lógica.

b) Tradicional

Asignar el manejador como propiedad del elemento:

document.getElementById("btn").onclick = accion;

c) Avanzado (W3C)

Utilizar addEventListener(), que permite múltiples manejadores y un control avanzado sobre el flujo del evento (captura y burbujeo):

const btn = document.getElementById("btn");
btn.addEventListener("click", function() {
  alert("Botón pulsado");
});

Para eliminar un manejador, se usa removeEventListener() especificando la misma función de referencia.