JavaScript nos permite modificar valores usando métodos. Interactuando con el DOM, podemos manipular los elementos.
Modificando Valores
Modificando elementos
Modificar el texto del elemento
Podemos modificar el texto del elemento seleccionado. Usando el método
.textContent = "Nuevo Mundo"
e igualándolo
al valor nuevo.
<!--HTML-->
<h1 id='hello'>Hola Mundo</h1>
const helloText = document.getElementById('hello')
// Modificado el texto del elemento
helloText.textContent = "Nuevo mundo";
Modificando estilos
Podemos modificar el estilo de elemento seleccionado (no es
recomendado). Usando el método .style
+ .background = "#ff3";
la propiedad css
e igualándolo al valor nuevo.
<!--HTML-->
<h1 id='hello'>Hola Mundo</h1>
const helloText = document.getElementById('hello')
// Modificado el color de texto del elemento
helloText.style.color = "#ff3";
Modificar el valor del elemento
Podemos modificar el valor del elemento seleccionado. Usando el método
.value = "Modificado desde JS"
e igualándolo
al valor nuevo.
<!--HTML-->
<input type="text" id="input" placeholder="Escribe el Nombre">
const input = document.getElementById('input')
// Modificamos el valor del elemento
input.value = "Modificado desde JS";
Modificar el placeHolder del elemento
Podemos modificar el placeHolder del elemento seleccionado. Usando el
método
.placeholder = "Escribe tu Nombre.."
e igualándolo al valor nuevo.
<!--HTML-->
<input type="text" id="input" placeholder="Escribe el Nombre">
// Modificamos el placeholder del elemento
input.placeholder = "Escribe tu Nombre..";
Nota2
Al final podemos modificar multiples cosas de los elementos en si. Las que vimos son algunas de las más usadas pero si quieres aprender más checa la web de MDN
Prueba tu conocimiento
¿Cuál de las siguientes expresiones modifica el texto del elemento con el ID `miid`?
✨ Correcto: ❌ Incorrecto:¿Cuál de las siguientes expresiones cambia el color de fondo del elemento con el ID `miid` a rojo?
✨ Correcto: ❌ Incorrecto:¿Cuál de las siguientes expresiones modifica el valor del elemento input con el ID `miid`?
✨ Correcto: ❌ Incorrecto: