JavaScript: DOM

El Document Object Model (DOM) es una interfaz de programación para documentos HTML y XML. Proporciona una representación estructurada del documento y define métodos para acceder y manipular su estructura, estilo y contenido. En este módulo, exploraremos cómo interactuar con el DOM utilizando JavaScript.

Acceso al DOM

Para manipular el DOM, primero debemos acceder a sus nodos. JavaScript ofrece varios métodos para seleccionar elementos:

• document.getElementById(id): Selecciona un elemento por su ID.
• document.getElementsByClassName(className): Selecciona todos los elementos con una clase específica.
• document.getElementsByTagName(tagName): Selecciona todos los elementos con un nombre de etiqueta específico.
• document.querySelector(selector): Selecciona el primer elemento que coincide con el selector CSS especificado.
• document.querySelectorAll(selector): Selecciona todos los elementos que coinciden con el selector CSS especificado.

Ejemplo práctico

// Seleccionar un elemento por su ID
const header = document.getElementById('header');

// Seleccionar elementos por su clase
const items = document.getElementsByClassName('item');

// Seleccionar elementos por su etiqueta
const paragraphs = document.getElementsByTagName('p');

// Seleccionar el primer elemento que coincide con el selector CSS
const firstItem = document.querySelector('.item');

// Seleccionar todos los elementos que coinciden con el selector CSS
const allItems = document.querySelectorAll('.item');

Manipulación del DOM

Una vez que hemos seleccionado los elementos, podemos manipularlos. Algunas de las operaciones más comunes incluyen cambiar el contenido, los atributos y el estilo de los elementos.

Cambiar el contenido

Para cambiar el contenido de un elemento, podemos usar las propiedades innerText, innerHTML o textContent.

// Cambiar el texto de un elemento
header.innerText = 'Nuevo título';

// Cambiar el HTML interno de un elemento
header.innerHTML = '<h1>Nuevo título</h1>';

// Cambiar el contenido textual de un elemento
header.textContent = 'Nuevo título';

Cambiar atributos

Para modificar los atributos de un elemento, utilizamos los métodos setAttribute, getAttribute y removeAttribute.

// Cambiar un atributo
firstItem.setAttribute('data-id', '123');

// Obtener el valor de un atributo
const dataId = firstItem.getAttribute('data-id');

// Eliminar un atributo
firstItem.removeAttribute('data-id');

Cambiar estilos

Podemos cambiar los estilos de un elemento mediante la propiedad style.

// Cambiar el color de fondo de un elemento
header.style.backgroundColor = 'blue';

// Cambiar la fuente de un elemento
header.style.fontFamily = 'Arial, sans-serif';

Navegación del DOM

JavaScript permite navegar entre los nodos del DOM utilizando propiedades como parentNode, childNodes, firstChild, lastChild, nextSibling y previousSibling.

Ejemplo práctico

// Seleccionar el elemento padre
const parent = firstItem.parentNode;

// Seleccionar el primer hijo
const firstChild = parent.firstChild;

// Seleccionar el último hijo
const lastChild = parent.lastChild;

// Seleccionar el siguiente hermano
const nextSibling = firstItem.nextSibling;

// Seleccionar el hermano anterior
const previousSibling = firstItem.previousSibling;

Con estos conocimientos, puedes empezar a manipular y navegar el DOM de manera eficiente utilizando JavaScript.