Navegador

Tabla de Contenidos

Manipulación del DOM

El Modelo de Objetos del Documento (DOM) es una representación de un documento HTML que JavaScript puede manipular dinámicamente. Usando JavaScript, los desarrolladores pueden acceder, modificar y actualizar los elementos HTML y estilos en tiempo real.

Accediendo a Elementos del DOM

JavaScript proporciona varios métodos para seleccionar elementos del DOM.

Usando `getElementById` (Seleccionar por ID)

Devuelve un único elemento que coincide con el id especificado.

let heading = document.getElementById("main-title");
console.log(heading.textContent);

Usando `getElementsByClassName` (Seleccionar por Clase)

Devuelve una colección (HTMLCollection) de elementos que coinciden con el nombre de la clase.

let items = document.getElementsByClassName("list-item");
console.log(items[0].textContent);

Usando `getElementsByTagName` (Seleccionar por Etiqueta)

Devuelve una colección de elementos que coinciden con el nombre de la etiqueta.

let paragraphs = document.getElementsByTagName("p");
console.log(paragraphs.length);

Usando `querySelector` (Seleccionar Primera Coincidencia)

Devuelve el primer elemento coincidente basado en un selector CSS.

let firstItem = document.querySelector(".list-item");
console.log(firstItem.textContent);

Usando `querySelectorAll` (Seleccionar Todas las Coincidencias)

Devuelve una NodeList de elementos que coinciden con un selector CSS.

let allItems = document.querySelectorAll(".list-item");
allItems.forEach(item => console.log(item.textContent));

Modificando Elementos del DOM

Cambiando el Contenido de Texto

Las propiedades textContent e innerHTML permiten actualizar el contenido del elemento.

let title = document.getElementById("main-title");
title.textContent = "Updated Title";

innerHTML permite insertar HTML dentro de un elemento.

let container = document.getElementById("content");
container.innerHTML = "<p>New paragraph added!</p>";

Cambiando Atributos

Los métodos setAttribute y getAttribute modifican los atributos del elemento.

let link = document.querySelector("a");
link.setAttribute("href", "https://www.example.com");
console.log(link.getAttribute("href"));

Eliminando un atributo:

<script>link.removeAttribute("target");</script>

Modificando Estilos

La propiedad style permite modificar directamente las propiedades CSS.

let box = document.getElementById("box");
box.style.backgroundColor = "blue";
box.style.color = "white";
box.style.padding = "10px";

Agregando o eliminando una clase CSS:

box.classList.add("highlight");
box.classList.remove("highlight");

Creando y Eliminando Elementos

Creando Nuevos Elementos

Usa document.createElement() para generar nuevos elementos HTML dinámicamente.

let newParagraph = document.createElement("p");
newParagraph.textContent = "This is a new paragraph.";
document.body.appendChild(newParagraph);

Eliminando Elementos

Usa remove() para eliminar un elemento.

let unwantedElement = document.getElementById("old-item");
unwantedElement.remove();

Eliminando un elemento hijo:

let parent = document.getElementById("list");
let child = document.getElementById("list-item");
parent.removeChild(child);

Manejando Eventos en JavaScript

Agregando Escuchadores de Eventos

El método addEventListener() adjunta controladores de eventos a los elementos.

let button = document.getElementById("btn");
button.addEventListener("click", () => {
  alert("Button clicked!");
});

Tipos Comunes de Eventos

click – Cuando un elemento es clickeado.
mouseover – Cuando el mouse pasa sobre un elemento.
keydown – Cuando se presiona una tecla.
submit – Cuando se envía un formulario.

Ejemplo:

let inputField = document.getElementById("input-box");
inputField.addEventListener("keydown", event => {
  console.log("Key pressed:", event.key);
});

Eliminando Escuchadores de Eventos

Usa removeEventListener() para desvincular controladores de eventos.

function sayHello() {
  console.log("Hello!");
}
  
button.addEventListener("click", sayHello);
button.removeEventListener("click", sayHello);

Delegación de Eventos

En lugar de agregar un escuchador de eventos a múltiples elementos, utiliza la delegación de eventos en un elemento padre.

document.getElementById("list").addEventListener("click", event => {
  if (event.target.tagName === "LI") {
    console.log("Item clicked:", event.target.textContent);
  }
});

Conclusión

La manipulación del DOM es esencial para aplicaciones web dinámicas. Esta sección cubrió la selección, modificación e interacción con elementos. La próxima sección se centrará en el manejo de eventos en profundidad, abarcando técnicas avanzadas y mejores prácticas.

Módulos e Importaciones

Manejo de Eventos

Únete a nuestro Foro Comunitario

¿Alguna otra pregunta? Ponte en contacto