Manipulación DOM con Javascript

La manipulación del DOM (Document Object Model) es una de las principales características de Javascript en el desarrollo de sitios web. El DOM es una representación en memoria del documento HTML, que permite que JavaScript acceda y modifique dinámicamente los elementos de la página.

Para manipular el DOM con Javascript, primero debe seleccionar el elemento HTML deseado. Esto se puede hacer de varias maneras, como a través del ID del elemento, la clase CSS o el tipo de etiqueta. Una vez seleccionado el elemento, es posible acceder a sus propiedades y métodos para realizar la manipulación deseada.

Por ejemplo, para cambiar el contenido de un elemento HTML, puede usar la propiedad innerHTML. Vea el ejemplo a continuación:

// Seleccionar elemento con ID "título" var título = documento.getElementById("título"); // Cambiar el contenido del elemento titulo.innerHTML = "Nuevo Título";

Además de cambiar el contenido de los elementos, también puede modificar sus propiedades, como el estilo CSS. Para ello, puede utilizar la propiedad de estilo, que le permite acceder y modificar las propiedades de estilo del elemento. Vea el ejemplo a continuación:

// Seleccionar elemento con ID "párrafo" var párrafo = document.getElementById("párrafo"); // Cambia el color del texto del párrafo a rojo párrafo.estilo.color = "rojo";

Otra forma de manipular el DOM con Javascript es a través de la creación y eliminación de elementos HTML. Para eso, puedes usar los métodos createElement y removeChild, respectivamente. Vea el ejemplo a continuación:

// Crea un nuevo elemento "div" var newDiv = document.createElement("div"); // Agrega el nuevo elemento al final del cuerpo documento.cuerpo.appendChild(nuevaDiv); // Eliminar elemento con ID "párrafo" var párrafo = document.getElementById("párrafo"); document.body.removeChild(párrafo);

Finalmente, es importante recordar que manipular el DOM con Javascript puede ser una tarea compleja y requiere un buen conocimiento de la estructura HTML y cómo funciona Javascript. Se recomienda utilizar bibliotecas como jQuery, que facilitan la manipulación del DOM y ofrecen una sintaxis más sencilla e intuitiva.

Ahora responde el ejercicio sobre el contenido:

_¿Cuál es la propiedad que permite acceder y modificar las propiedades de estilo del elemento HTML en Javascript?

1

HTML interno

2

estilo

3

crearElemento

¡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:

9Eventos 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!