Obteniendo Valores

Nota

Ya que tenemos los elementos seleccionados. El siguiente paso es la obtención de información de los elementos seleccionados.


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:
Atrás

4

Siguiente