Clase 19 - DOM

introducción al DOM

modificacion del DOM

seleccionar elementos

Podemos usar querySelector("selector") o querySelectorAll("selector"), pasando como parámetro un string, con un selector (del mismo modo que los selectores CSS).

// seleccionar un elemento de tipo <p>
// nos va a devolver el primer elemento que encuentre
document.querySelector("p");

// podemos guardar el resultado en una variable
var primerParrafo = document.querySelector("p");

// seleccionar todos los elemento de tipo <p>
var listadoParrafos = document.querySelectorAll("p");

Acceder a los valores de elemento

// texto dentro de elemento
var textoDelParrafo = primerParrafo.innerText;

// acceder al value de un elemento de tipo input
var valueDelIput = document.querySelector("input").value;

modificar elementos

Podemos acceder a los valores y modificar valores de los atributos de elementos del DOM.

primerParrafo.innerText = "Nuevo contenido del parrafo";

classList

Un caso particular es el atributo ‘classlist’, que nos permite modificar las clases de un elemento.

// Agregar una clase
primerParrafo.classList.add("bold");

// Eliminar una clase
primerParrafo.classList.remove("bold");

// Si la clase existe en el elemento, la elimina
// si la clase no existe, la agrega
primerParrafo.classList.toggle("bold");

eliminar elementos

// eliminar elemento del DOM
primerParrafo.remove();

crear elementos

// crear un nuevo elemento de tipo button
var nuevoBoton = document.createElement("button");