¿Cómo modificar elementos?

Ahora que sabemos seleccionar elementos HTML mediante JavaScript, podemos acceder y cambiar algunos de sus valores para darle dinamismo a nuestra página.

<p>Mi texto</p>
<script>
  const elemento = document.querySelector("p");
</script>

Al tipo de dato que conseguimos al usar alguna de las funciones para seleccionar se le conoce como HTMLElement.

Tiene diferentes propiedades a las que podemos acceder con la notación punto, como por ejemplo:

• textContent
• style
• innerHTML
• classList

…entre otras.

textContent

Podemos acceder a textContent de cualquier elemento HTML para modificar su contenido de texto:

<p>Mi texto</p>
<script>
  const elemento = document.querySelector("p");
  elemento.textContent = "Nuevo texto";
</script>

style

Podemos acceder al estilo mediante style y cambiar alguna de sus propiedades, por ejemplo color y backgroundColor:

<p>Mi texto</p>
<script>
  const elemento = document.querySelector("p");
  elemento.style.color = "white";
  elemento.style.backgroundColor = "royalblue";
</script>

Las propiedades de estilo que son más de una palabra deben ir en camelCase¹ para acceder correctamente a ellas.

innerHTML

Podemos cambiar el contenido HTML mediante innerHTML para agregar etiquetas por medio de strings:

<p>Mi texto</p>
<script>
  const elemento = document.querySelector("p");
  elemento.innerHTML = "Mi <strong>texto</strong> modificado";
</script>

classList

Podemos utilizar classList para acceder a diferentes funciones que nos ayudan a agregar y eliminar clases dentro de nuestro elemento.

add

Nos ayuda a agregar clases a nuestro elemento:

<style>
  .estilizado {
    color: white;
    background-color: royalblue;
  }
</style>
<p>Mi texto</p>
<script>
  const elemento = document.querySelector("p");
  elemento.classList.add("estilizado");
</script>

remove

Nos ayuda a eliminar clases de nuestro elemento:

<style>
  .estilizado {
    color: white;
    background-color: royalblue;
  }
</style>
<p class="estilizado">Mi texto</p>
<script>
  const elemento = document.querySelector("p");
  elemento.classList.remove("estilizado");
</script>

toggle

Nos ayuda a alternar clases en nuestro elemento.

• Si está presente, la removerá
• Si no está presente, la agregará

Inicia con la clase y termina sin ella:

<style>
  .estilizado {
    color: white;
    background-color: royalblue;
  }
</style>
<p class="estilizado">Mi texto</p>
<script>
  const elemento = document.querySelector("p");
  elemento.classList.toggle("estilizado");
</script>

Inicia sin la clase y termina con ella:

<style>
  .estilizado {
    color: white;
    background-color: royalblue;
  }
</style>
<p>Mi texto</p>
<script>
  const elemento = document.querySelector("p");
  elemento.classList.toggle("estilizado");
</script>

Hay muchas otras propiedades de los HTMLElement a las que podemos acceder para modificar su comportamiento con programación. Estas sólo son las más sencillas hasta el momento.

En otros artículos veremos más de ellas para seguir agregando dinamismo a nuestras páginas.

Comentarios