Manejo de elementos HTML con Javascript

Manipulación de elementos HTML con Javascript

Javascript es un lenguaje de programación ampliamente utilizado en el desarrollo de sitios web, y una de sus principales funciones es la manipulación de elementos HTML. Con esta herramienta, puede cambiar el contenido, el estilo y el comportamiento de los elementos de la página, haciendo que la experiencia del usuario sea más dinámica e interactiva.

Seleccionar elementos HTML

Antes de manipular un elemento HTML, es necesario seleccionarlo. Hay varias formas de hacerlo, pero las más comunes son:

• getElementById: selecciona un elemento por su ID;
• getElementsByClassName: selecciona uno o más elementos por su clase;
• getElementsByTagName: selecciona uno o más elementos por su nombre de etiqueta;
• querySelector: selecciona el primer elemento que coincide con un selector CSS;
• querySelectorAll: selecciona todos los elementos que coinciden con un selector CSS.

Por ejemplo, para seleccionar un elemento con el ID "título", podemos utilizar el siguiente código:

var título = documento.getElementById("título");

Entonces, la variable "título" almacenará una referencia al elemento HTML con el id "título".

Cambiar el contenido de los elementos HTML

Una de las formas más comunes de manipular elementos HTML es cambiar su contenido. Para ello, podemos utilizar la propiedad "innerHTML", que permite acceder y modificar el HTML interno del elemento.

Por ejemplo, para cambiar el texto de un elemento con el ID "mensaje", podemos usar el siguiente código:

var mensaje = documento.getElementById("mensaje"); message.innerHTML = "Nuevo mensaje de texto";

Entonces el texto dentro del elemento será reemplazado con el nuevo valor.

Estilismo de elementos HTML

Otra forma de manipular elementos HTML es cambiar su estilo. Para ello, podemos utilizar la propiedad "estilo", que permite acceder y modificar los estilos CSS del elemento.

Por ejemplo, para cambiar el color de fondo de un elemento con el ID "box", podemos usar el siguiente código:

var caja = documento.getElementById("caja"); caja.estilo.backgroundColor = "rojo";

Esto cambiará el color de fondo del cuadro a rojo.

Agregar y eliminar clases de elementos HTML

Una forma más avanzada de manipular elementos HTML es agregar y eliminar clases. Las clases se usan en CSS para aplicar estilos a uno o más elementos, y se pueden agregar o quitar dinámicamente con Javascript.

Para agregar una clase a un elemento con el "botón" de ID, podemos usar el siguiente código:

botón var = documento.getElementById("botón"); button.classList.add("activo");

Esto agregará la clase "activa" al elemento, lo que le permitirá diseñarlo con CSS.

Para eliminar una clase de un elemento con el "botón" de ID, podemos usar el siguiente código:

botón var = documento.getElementById("botón"); button.classList.remove("activo");

Entonces, la clase "activa" se eliminará del elemento.

Conclusión

La manipulación de elementos HTML con Javascript es una de las principales técnicas utilizadas en el desarrollo de sitios web. Con él, es posible crear páginas más dinámicas e interactivas, mejorando la experiencia del usuario. Las principales formas de manipulación son la selección de elementos, el cambio de contenido y estilo, y la adición y eliminación de clases. Con estas herramientas, puede crear sitios web más modernos y eficientes.

Ahora responde el ejercicio sobre el contenido:

_¿Cuál es la propiedad que se usa para cambiar el contenido interno de un elemento HTML?

1

HTML interno

2

estilo

3

Lista de clase

¡Tienes razón! Felicitaciones, ahora pasa a la página siguiente.

¡Tú error! Inténtalo de nuevo.

Siguiente página del libro electrónico gratuito:

13Interacción con APIs en Javascript

2 minutos

¡Obtén tu certificado para este curso gratis! descargando la aplicación Cursa y leyendo el libro electrónico allí. ¡Disponible en Google Play o App Store!