Manipular DOM en la consola

En este artículo vamos a explicar cómo podemos manipular el DOM de una web directamente en la consola del navegador. Este artículo forma parte de la serie la consola del navegador. Una serie de diez artículos donde se explican todas las funcionalidades de la consola del navegador y que facilitan el proceso de desarrollo, depuración y optimización de sitios y aplicaciones web.

La manipulación del DOM (Document Object Model) es una parte importante del desarrollo web moderno. En este artículo, explicaremos cómo seleccionar elementos HTML y realizar modificaciones en el DOM utilizando JavaScript directamente en la consola del navegador. Lo que nos permitirá crear interfaces de usuario dinámicas e interactivas.

Seleccionar elementos HTML

Para interactuar con elementos HTML en una página web, primero necesitamos seleccionarlos. JavaScript nos proporciona varios métodos para hacer esto:

document.getElementById(id): Selecciona un elemento por su ID único.
document.getElementsByClassName(className): Selecciona todos los elementos que tienen 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 un selector CSS.
document.querySelectorAll(selector): Selecciona todos los elementos que coinciden con un selector CSS.

Por ejemplo:

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

// Seleccionar todos los elementos con una clase específica
const elementos = document.getElementsByClassName('mi-clase');

// Seleccionar el primer párrafo en el documento
const parrafo = document.querySelector('p');

// Seleccionar todos los elementos de clase "boton"
const botones = document.querySelectorAll('.boton');

Con los elementos en nuestras variables, podemos utilizar la consola del navegador para manipular el DOM con JavaScript, tal y como explicamos en el artículo anterior.

Modificar contenido y atributos del DOM

Una vez que hemos seleccionado un elemento, podemos modificar su contenido y atributos utilizando propiedades y métodos específicos. Algunos ejemplos comunes incluyen:

elemento.textContent: Obtiene o establece el contenido de texto de un elemento.
elemento.innerHTML: Obtiene o establece el contenido HTML de un elemento.
elemento.setAttribute(name, value): Establece el valor de un atributo en un elemento.
elemento.style.property = value: Modifica las propiedades CSS de un elemento.

// Modificar el contenido de un elemento
elemento.textContent = 'Nuevo texto';

// Modificar el atributo "href" de un enlace
enlace.setAttribute('href', 'https://www.ejemplo.com');

// Modificar el estilo de un elemento
elemento.style.color = 'red';

Crear y eliminar elementos del DOM

También podemos crear y eliminar elementos dinámicamente utilizando métodos como document.createElement() y elemento.removeChild().

// Crear un nuevo elemento div
const nuevoDiv = document.createElement('div');

// Añadir una clase al nuevo elemento
nuevoDiv.classList.add('nueva-clase');

// Insertar el nuevo elemento en el DOM
document.body.appendChild(nuevoDiv);

// Eliminar un elemento existente
const elementoAEliminar = document.getElementById('elemento-a-eliminar');
elementoAEliminar.parentNode.removeChild(elementoAEliminar);