23. Manipulación de elementos DOM y HTML con Javascript

El modelo de objetos de documento (DOM) es una interfaz de programación que permite conectar scripts al contenido de una página web. Representa la estructura de una página web y se puede manipular con JavaScript para cambiar el contenido y el diseño de la página. Este capítulo de nuestro libro electrónico cubrirá la manipulación de los elementos DOM y HTML con JavaScript.

Para empezar, el DOM es una representación de árbol de la página web. Cada elemento, atributo y texto de la página está representado por un objeto en el DOM. Estos objetos están organizados en una estructura de árbol, con el objeto 'documento' en la parte superior. Este objeto representa la página web en su conjunto y es el punto de partida para acceder a cualquier parte de la página.

Los objetos en el DOM tienen propiedades y métodos que puedes usar para manipularlos. Por ejemplo, el objeto 'documento' tiene un método 'getElementById' que puedes usar para obtener un elemento de página por su ID. Una vez que tenga una referencia a un elemento, puede usar sus propiedades y métodos para cambiar su contenido, estilo y más.

Por ejemplo, supongamos que tenemos un elemento de párrafo en nuestra página con el ID 'myPara'. Podemos obtener una referencia a este elemento y cambiar su contenido de la siguiente manera:

var para = document.getElementById('myPara');
para.textContent = '¡Nuevo contenido!';

Aquí usamos el método 'getElementById' para obtener una referencia al elemento de párrafo y luego usamos la propiedad 'textContent' para cambiar el contenido del párrafo. Tenga en cuenta que el contenido de la página se actualiza inmediatamente para reflejar el cambio.

Además de cambiar el contenido de un elemento, puedes cambiar su estilo. Cada elemento tiene una propiedad de 'estilo' que puede usar para cambiar el estilo CSS del elemento. Por ejemplo, puedes cambiar el color del texto de nuestro párrafo de la siguiente manera:

para.style.color = 'rojo';

Aquí usamos la propiedad 'estilo' para acceder al estilo del elemento y luego usamos la propiedad 'color' para cambiar el color del texto. Nuevamente, la página se actualiza inmediatamente para reflejar el cambio.

También puedes usar JavaScript para agregar y eliminar elementos de la página. Cada elemento tiene métodos 'appendChild' y 'removeChild' que puede utilizar para agregar o eliminar elementos. Por ejemplo, puede agregar un nuevo elemento de párrafo a la página de la siguiente manera:

var newPara = document.createElement('p');
newPara.textContent = '¡Un nuevo párrafo!';
document.body.appendChild(nuevoPara);

Aquí usamos el método 'createElement' para crear un nuevo elemento de párrafo y luego usamos el método 'appendChild' para agregar el nuevo párrafo al cuerpo de la página. Nuevamente, la página se actualiza inmediatamente para reflejar el cambio.

En resumen, el DOM es una poderosa interfaz de programación que le permite manipular el contenido y el diseño de una página web con JavaScript. Al aprender a utilizar el DOM, darás un gran paso para convertirte en un desarrollador front-end eficaz.

En el próximo capítulo, exploraremos el DOM más profundamente y aprenderemos cómo usar eventos para hacer que nuestras páginas web sean más interactivas. ¡Estén atentos!

Siguiente página del libro electrónico gratuito:

74Eventos y oyentes en Javascript

3 minutos