Ya que tenemos los elementos seleccionados. El siguiente paso es la obtención de información de los elementos seleccionados.
Obteniendo Valores
Manejo de Atributos.
Obtener Valor
Podemos obtener el valor de un atributo del elemento seleccionado.
Usando el método .getAttribute('placeholder') y pasándole el nombre del atributo entre comillas.
<!--HTML-->
<input id='name' placeholder="HolaMundo">
const inputName = document.getElementById('name')
// Obtener el valor de un atributo
const placeHolder = inputName.getAttribute('placeholder');
console.log(placeHolder);Modificar Valor
Podemos modificar el valor de un atributo del elemento seleccionado.
Usando el método .setAttribute('placeholder','modificado') y pasándole como primer argumento el atributo al que deseamos modificar
y el segundo argumento el nuevo valor.
<!--HTML-->
<input id='name' placeholder="HolaMundo">// Modificar el valor de un atributo
inputName.setAttribute("placeholder", "Modificado");
console.log(inputName.getAttribute("placeholder"));Manejo de Clases.
Con los métodos anteriores también podemos obtener y modificar las clases que tenga un elemento, sin embargo, existe una mejor forma.
Obtener clases
Podemos obtener las clases del elemento seleccionado. Usando el método
.classList
<!--HTML-->
<h1 id="title" class="red">Titulo</h1>const titulo = document.getElementById('title')
// Obtener las clases de un elemento
console.log(titulo.classList);Agregar clases
Podemos agregar una clase al elemento seleccionado. Usando el método .classList.add("text") pasándole como argumento el nombre de la clase entre comillas.
<!--HTML-->
<h1 id="title" class="red">Titulo</h1>const titulo = document.getElementById('title')
// Obtener las clases de un elemento
console.log(titulo.classList);Eliminar clases
Podemos eliminar una clase al elemento seleccionado. Usando el método .classList.remove("text") pasándole como argumento el nombre de la clase entre comillas.
<!--HTML-->
<h1 id="title" class="red">Titulo</h1>// Eliminar una clase de un elemento
titulo.classList.remove("text");
console.log(titulo.classList);Verificar clases
Podemos verificar la existencia de una clase al elemento seleccionado.
Usando el método .classList.contains("text") pasándole como argumento el nombre de la clase entre comillas.
<!--HTML-->
<h1 id="title" class="red">Titulo</h1>// Verificar si un elemento tiene una clase
titulo.classList.contains("text");
console.log(titulo.classList.contains("text"));Toggle
Podemos agregar/eliminar una clase al elemento seleccionado. Usando el
método .classList.toggle("text")
pasándole como argumento el nombre de la clase entre comillas. Este método
funciona como un switch de luz; pone y quita la clase cuando se llama.
Generalmente se usa acompañado de un evento y va dentro de una función.
Asi que no te preocupes si no lo has entendido, en la lección de eventos
lo veras en acción.
<!--HTML-->
<p id="parrafo">Este es un párrafo</p>const parrafo = document.getElementById('parrafo')
// Agregar o eliminar una clase de un elemento
parrafo.classList.toggle("red");
console.log(parrafo.classList);Prueba tu conocimiento
¿Cuál de las siguientes expresiones devuelve todas las clases del elemento con la etiqueta `<div>`?
✨ Correcto: ❌ Incorrecto:¿Cuál de las siguientes expresiones asigna el valor `mivalor` al atributo `class` del elemento con el ID `miid`?
✨ Correcto: ❌ Incorrecto:¿Cuál de las siguientes expresiones comprueba si el elemento con el ID `miid` tiene la clase `miclase`?
✨ Correcto: ❌ Incorrecto: