Métodos para manipular el DOM (Document Object Model)

byMilton Rodriguez Lopez -marzo 13, 2025

0

En JavaScript, los métodos relacionados con HTML se utilizan principalmente para manipular elementos del DOM (Document Object Model). Estos métodos te permiten crear, modificar, eliminar o acceder a elementos de una página web.

Videotutorial:

JavaScript para Manipulación del DOM https://youtu.be/koiPxFFiqJ4

Los métodos más comunes son:

Seleccionar elementos del DOM:

document.getElementById("id"): Obtiene un elemento por su ID.
document.querySelector("selector"): Selecciona el primer elemento que coincide con el selector CSS.
document.querySelectorAll("selector"): Selecciona todos los elementos que coinciden con el selector CSS.

Modificar contenido y atributos:

element.textContent: Cambia o recupera el contenido de texto de un elemento.
element.innerHTML: Modifica o recupera el HTML interno de un elemento.
element.setAttribute("atributo", "valor"): Establece un atributo específico.
element.getAttribute("atributo"): Obtiene el valor de un atributo.

Crear y agregar elementos:

document.createElement("etiqueta"): Crea un nuevo elemento HTML.
parentElement.appendChild(nuevoElemento): Agrega un elemento hijo al final del elemento padre.
parentElement.insertBefore(nuevoElemento, referencia): Inserta un nuevo elemento antes de uno de referencia.

Eliminar elementos:

parentElement.removeChild(elemento): Elimina un hijo del elemento padre.
element.remove(): Elimina un elemento directamente (navegadores modernos).

Estilo y clases:

element.style.propiedad: Cambia estilos específicos en línea (por ejemplo, element.style.color = "red").
element.classList.add("clase"): Agrega una clase a un elemento.
element.classList.remove("clase"): Elimina una clase.
element.classList.toggle("clase"): Agrega o elimina una clase dependiendo de si ya está presente.

Eventos:

element.addEventListener("evento", función): Agrega un controlador de eventos, como un clic o un cambio.
element.onclick: Asigna una función que se ejecutará al hacer clic en un elemento.

JavaScript proporciona una amplia gama de métodos para manipular el DOM (Document Object Model). Los más utilizados y relevantes:

Selección de elementos

document.getElementById(id): Selecciona un elemento único basado en su id.
document.querySelector(selector): Selecciona el primer elemento que coincide con el selector CSS.
document.querySelectorAll(selector): Selecciona todos los elementos que coinciden con el selector CSS.
document.getElementsByTagName(name): Selecciona todos los elementos por su nombre de etiqueta.
document.getElementsByClassName(names): Selecciona todos los elementos por su clase.
document.forms: Devuelve una colección de todos los formularios del documento.
document.images: Devuelve una colección de todas las imágenes del documento.
document.links: Devuelve una colección de todos los enlaces del documento.

Ejemplos prácticos para que puedas ver cómo funcionan

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Manipulación DOM</title>
</head>
<body>
    <h1 id="main-title">Título Principal</h1>
    <p class="description">Este es el primer párrafo.</p>
    <p class="description">Este es el segundo párrafo.</p>
    <ul>
        <li>Elemento 1</li>
        <li>Elemento 2</li>
    </ul>
    <form id="myForm">
        <input type="text" name="username" placeholder="Nombre de usuario">
    </form>
    <img src="image1.jpg" alt="Imagen 1">
    <img src="image2.jpg" alt="Imagen 2">
    <a href="https://example.com">Enlace 1</a>
    <a href="https://example.com">Enlace 2</a>
    <div id="dynamic-content"></div>
    <script src="scripts.js"></script>
</body>
</html>

// Selección de elementos

// 1. Selección por ID
const mainTitle = document.getElementById('main-title');
console.log(mainTitle.textContent); // Título Principal

// 2. Selección por selector CSS (querySelector)
const firstParagraph = document.querySelector('.description');
console.log(firstParagraph.textContent); // Este es el primer párrafo.

// 3. Selección de todos los elementos que coinciden con un selector (querySelectorAll)
const allParagraphs = document.querySelectorAll('.description');
allParagraphs.forEach((paragraph, index) => {
    console.log(`Párrafo ${index + 1}: ${paragraph.textContent}`);
});

// 4. Selección por nombre de etiqueta (getElementsByTagName)
const listItems = document.getElementsByTagName('li');
console.log(listItems.length); // 2

// 5. Selección por nombre de clase (getElementsByClassName)
const descriptions = document.getElementsByClassName('description');
console.log(descriptions.length); // 2

// 6. Selección de formularios (document.forms)
const forms = document.forms;
console.log(forms[0].id); // myForm

// 7. Selección de imágenes (document.images)
const images = document.images;
console.log(images.length); // 2

// 8. Selección de enlaces (document.links)
const links = document.links;
console.log(links.length); // 2

Creación de elementos

document.createElement(tagName): Crea un nuevo elemento HTML.
document.createTextNode(text): Crea un nodo de texto.
document.createDocumentFragment(): Crea un fragmento de documento que puede ser manipulado antes de insertarse en el DOM.
document.importNode(node, deep): Importa un nodo existente en el documento. Si deep es true, copia todo el subárbol.

Ejemplos prácticos para que puedas ver cómo funcionan

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Manipulación DOM</title>
</head>
<body>
    <h1 id="main-title">Título Principal</h1>
    <p class="description">Este es el primer párrafo.</p>
    <p class="description">Este es el segundo párrafo.</p>
    <ul>
        <li>Elemento 1</li>
        <li>Elemento 2</li>
    </ul>
    <form id="myForm">
        <input type="text" name="username" placeholder="Nombre de usuario">
    </form>
    <img src="image1.jpg" alt="Imagen 1">
    <img src="image2.jpg" alt="Imagen 2">
    <a href="https://example.com">Enlace 1</a>
    <a href="https://example.com">Enlace 2</a>
    <div id="dynamic-content"></div>
    <script src="scripts.js"></script>
</body>
</html>

// Creación de elementos

// 1. Crear un nuevo elemento HTML
const newParagraph = document.createElement('p');
newParagraph.textContent = 'Este es un párrafo creado dinámicamente.';
document.getElementById('dynamic-content').appendChild(newParagraph);

// 2. Crear un nodo de texto
const textNode = document.createTextNode('Este texto fue creado dinámicamente.');
newParagraph.appendChild(textNode);

// 3. Crear un fragmento de documento
const fragment = document.createDocumentFragment();
for (let i = 0; i < 3; i++) {
    const listItem = document.createElement('li');
    listItem.textContent = `Elemento dinámico ${i + 1}`;
    fragment.appendChild(listItem);
}
document.querySelector('ul').appendChild(fragment);

// 4. Importar un nodo existente
const existingNode = document.querySelector('#main-title');
const importedNode = document.importNode(existingNode, true); // Copia completa
importedNode.textContent = 'Título Importado';
document.body.appendChild(importedNode);

Inserción y modificación de elementos

parentNode.appendChild(newChild)
parentNode.insertBefore(newChild, referenceChild)
parentNode.replaceChild(newChild, oldChild)
element.innerHTML
element.outerHTML
element.textContent
element.insertAdjacentHTML(position, text)
element.insertAdjacentElement(position, element)

element.insertAdjacentText(position, text)

Eliminación de elementos

parentNode.removeChild(child)
element.remove()
element.replaceWith(node or string)

Atributos

element.getAttribute(attributeName) Permite leer el valor de atributos como id, class, src, href, etc.
element.setAttribute(attributeName, value) Ayuda a actualizar o agregar atributos dinámicamente en un elemento.
element.hasAttribute(attributeName) Útil para comprobar la existencia de un atributo antes de manipularlo.
element.removeAttribute(attributeName) Permite quitar atributos innecesarios de un elemento.

Funciones para Atributos:

// Obtener el valor de un atributo
function getAttributeValue(element, attributeName) {
    return element.getAttribute(attributeName);
}

// Establecer un atributo con un valor
function setAttributeValue(element, attributeName, value) {
    element.setAttribute(attributeName, value);
}

// Verificar si un atributo existe
function hasAttribute(element, attributeName) {
    return element.hasAttribute(attributeName);
}

// Eliminar un atributo de un elemento
function removeAttribute(element, attributeName) {
    element.removeAttribute(attributeName);
}

Clases

element.classList.add(className) Este método agrega una nueva clase al elemento si aún no existe.
element.classList.remove(className) Este método elimina una clase específica de un elemento.
element.classList.toggle(className) Este método alterna una clase en un elemento: la agrega si no existe, o la elimina si ya está presente. Es ideal para interruptores (on/off) o activar/desactivar estados dinámicamente.
element.classList.contains(className) Este método verifica si el elemento tiene una clase específica. Permite comprobar la existencia de una clase antes de aplicar acciones.
element.className (menos recomendable que classList) Es una propiedad que permite acceder o establecer todas las clases de un elemento como un único string. ¿Por qué es menos recomendable? Puede sobrescribir accidentalmente todas las clases existentes al modificar una, lo que no ocurre con classList.

Funciones para Clases

// Agregar una clase a un elemento
function addClass(element, className) {
    element.classList.add(className);
}

// Eliminar una clase de un elemento
function removeClass(element, className) {
    element.classList.remove(className);
}

// Alternar (agregar o eliminar) una clase
function toggleClass(element, className) {
    element.classList.toggle(className);
}

// Verificar si un elemento tiene una clase
function hasClass(element, className) {
    return element.classList.contains(className);
}

// Establecer o leer las clases de un elemento (menos recomendable que classList)
function setOrGetClassName(element, newClassName = null) {
    if (newClassName !== null) {
        element.className = newClassName; // Establecer todas las clases como una sola cadena
    } else {
        return element.className; // Devolver las clases como cadena
    }
}

Estilos

element.style.property (por ejemplo, element.style.color) Es una forma de acceder o establecer estilos en línea (inline) directamente en un elemento HTML utilizando JavaScript. Se utiliza para aplicar o modificar estilos específicos.
getComputedStyle(element) Este método devuelve todos los estilos calculados para un elemento, independientemente de si provienen de una hoja de estilos externa, interna o en línea. Te permite acceder a los valores finales de los estilos que el navegador ha aplicado a un elemento.

Funciones para Estilos

// Establecer un estilo en línea a un elemento
function setStyle(element, property, value) {
    element.style[property] = value;
}

// Obtener un estilo calculado de un elemento
function getComputedStyleValue(element, property) {
    const styles = getComputedStyle(element);
    return styles.getPropertyValue(property);
}

// Establecer varios estilos en línea de una vez
function setMultipleStyles(element, styles) {
    for (const [property, value] of Object.entries(styles)) {
        element.style[property] = value;
    }
}

Ejemplo práctico de uso:

 // Supongamos que queremos manipular un elemento con id "miElemento"
const miElemento = document.getElementById("miElemento");

// Atributos
setAttributeValue(miElemento, "data-role", "admin");
console.log(getAttributeValue(miElemento, "data-role")); // "admin"
console.log(hasAttribute(miElemento, "data-role")); // true
removeAttribute(miElemento, "data-role");

// Clases
addClass(miElemento, "activo");
removeClass(miElemento, "activo");
toggleClass(miElemento, "activo"); // Agrega o elimina la clase
console.log(hasClass(miElemento, "activo")); // true o false

// Estilos
setStyle(miElemento, "color", "red");
console.log(getComputedStyleValue(miElemento, "color")); // "red" (o el valor calculado)
setMultipleStyles(miElemento, { backgroundColor: "blue", fontSize: "18px" });

Navegación del DOM

element.parentNode
element.childNodes
element.firstChild
element.lastChild
element.nextSibling
element.previousSibling
element.children
element.firstElementChild
element.lastElementChild
element.nextElementSibling
element.previousElementSibling

Eventos

element.addEventListener(event, listener)
element.removeEventListener(event, listener)
element.onclick
element.onmouseover
element.onkeydown (entre otros eventos relacionados con el teclado, ratón y más)

Propiedades generales útiles

document.documentElement (raíz del documento, <html>)
document.body
element.tagName
element.id
element.className
element.dataset (acceso a atributos de datos personalizados)

Ya hemos mencionado la gran mayoría de los métodos relevantes para manipular el DOM, pero hay algunos más avanzados o menos conocidos que podrían ser útiles dependiendo del caso.

Métodos relacionados con nodos

node.cloneNode(deep): Crea una copia de un nodo. Si deep es true, copia todo el subárbol (incluyendo los hijos).
node.normalize(): Combina nodos de texto adyacentes en un solo nodo.
node.contains(otherNode): Devuelve true si el nodo contiene al otro nodo.
node.isEqualNode(otherNode): Comprueba si dos nodos son iguales.
node.isSameNode(otherNode): Comprueba si dos nodos son el mismo (referencia al mismo objeto).

Manipulación del contenido de formularios

formElement.submit(): Envía un formulario programáticamente.
formElement.reset(): Restaura un formulario a sus valores iniciales.

Propiedades para árboles de nodos

element.ownerDocument: Devuelve el documento raíz al que pertenece un elemento.
element.nodeType: Devuelve el tipo de nodo (por ejemplo, 1 para elementos, 3 para nodos de texto).
element.nodeName: Devuelve el nombre del nodo.

Métodos avanzados de búsqueda

element.closest(selector): Encuentra el ancestro más cercano (incluido el propio elemento) que coincide con un selector.
element.matches(selector): Comprueba si el elemento coincide con un selector CSS.

Métodos relacionados con la edición de contenido

document.execCommand(command, showUI, value): Ejecuta comandos de edición en el contenido editable (obsoleto, no recomendado).
element.contentEditable: Propiedad que permite hacer un elemento editable ("true" o "false").

Métodos relacionados con el DOM Shadow

element.attachShadow({ mode }): Adjunta un árbol de sombra (Shadow DOM) a un elemento.
element.shadowRoot: Accede al árbol de sombra del elemento.

Métodos de eventos personalizados

document.createEvent(eventType): Crea un evento del tipo especificado (obsoleto, reemplazado por CustomEvent).
new CustomEvent(type, options): Crea un evento personalizado.
element.dispatchEvent(event): Dispara un evento personalizado en un elemento.

Métodos de fragmentos

document.createDocumentFragment(): Crea un fragmento del DOM, útil para manipular nodos sin renderizarlos hasta que se inserten en el DOM.

Manipulación de tablas

table.createCaption(): Crea un elemento <caption> para la tabla.
table.deleteCaption(): Elimina el elemento <caption> de la tabla.
table.insertRow(index): Inserta una fila en una tabla.
table.deleteRow(index): Elimina una fila de una tabla.
row.insertCell(index): Inserta una celda en una fila.
row.deleteCell(index): Elimina una celda de una fila.

Métodos de selección y rango

document.createRange(): Crea un objeto de rango (Range) para manipular secciones del DOM.
range.selectNode(node): Selecciona un nodo completo dentro del rango.
range.selectNodeContents(node): Selecciona los contenidos de un nodo.

Métodos especializados avanzados

Manipulación de nodos

Node.compareDocumentPosition(otherNode): Compara la posición de dos nodos en el documento y devuelve un valor indicando su relación.
Node.lookupPrefix(namespaceURI): Devuelve el prefijo asociado a un espacio de nombres.
Node.lookupNamespaceURI(prefix): Devuelve el espacio de nombres asociado a un prefijo.
Node.isDefaultNamespace(namespaceURI): Comprueba si un espacio de nombres es el predeterminado para el nodo.

Fragmentos y rangos

Range.cloneRange(): Crea una copia exacta del rango actual.
Range.collapsed: Propiedad booleana que indica si el rango está colapsado (es decir, si el inicio y el final son el mismo punto).
Range.deleteContents(): Elimina los contenidos dentro del rango.
Range.extractContents(): Extrae los contenidos del rango en un DocumentFragment.
Range.surroundContents(newNode): Envuelve los contenidos del rango con un nodo especificado.

Métodos avanzados de eventos

Event.composedPath(): Devuelve el recorrido completo del evento a través del árbol de nodos (útil para trabajar con Shadow DOM).
Event.stopImmediatePropagation(): Detiene la propagación del evento y evita que otros controladores del mismo evento se ejecuten.

Shadow DOM

ShadowRoot.mode: Propiedad que indica si el Shadow DOM es "open" o "closed".
ShadowRoot.getElementById(id): Busca elementos dentro del árbol de sombra.
HTMLElement.attachShadow({ mode: "open" | "closed" }): Crea un árbol de sombra en un elemento.

Temas de internacionalización

Element.dir: Propiedad que establece o devuelve la dirección del texto del elemento ("ltr", "rtl", "auto").
Element.lang: Propiedad que especifica el lenguaje del contenido del elemento.

Iteración y colecciones

NodeList.forEach(callback): Itera a través de una lista de nodos (como la obtenida con querySelectorAll).
HTMLCollection.item(index): Devuelve un elemento por su índice en una colección HTML.
HTMLCollection.namedItem(name): Devuelve un elemento por su nombre en una colección HTML.

Métodos obsoletos (no recomendados, pero aún disponibles en navegadores más antiguos)

document.all: Accede a todos los elementos del documento (no estándar, evita su uso).
document.layers: Método obsoleto usado en navegadores antiguos como Netscape.

Estos métodos son más avanzados o específicos y pueden no ser tan comúnmente utilizados como los otros que ya hemos cubierto, pero son igualmente poderosos para casos complejos.

Tags JavaScript

Breaking