Javascript – Capítulo 04 – DOM

Introducción a JavaScript en el DOM

JavaScript es un lenguaje de programación ampliamente utilizado para agregar interactividad y dinamismo a las páginas web. Una de las principales tareas de JavaScript es interactuar con el Document Object Model (DOM), que es una representación en forma de árbol de la estructura de una página web. En este capítulo, aprenderemos cómo seleccionar elementos en el DOM y cómo manipular su contenido y atributos.

El Document Object Model (DOM)

El DOM es una representación jerárquica de una página web que permite a los programadores acceder y manipular elementos HTML, XML o XHTML en una página. Cada elemento en una página web se representa como un nodo en el árbol DOM. Para trabajar con elementos en el DOM, primero debemos seleccionarlos.

Selección de Elementos en el DOM

Para seleccionar elementos en el DOM, JavaScript proporciona una serie de métodos y propiedades que permiten buscar y acceder a los elementos deseados. Los métodos de selección de elementos más comunes son:

1. getElementById()

Este método selecciona un elemento por su identificador único (ID). El ID debe ser único en toda la página.

let elemento = document.getElementById('miId');

2. getElementsByClassName()

Este método selecciona elementos por su clase. Puede haber varios elementos con la misma clase en una página.

let elementos = document.getElementsByClassName('miClase');

3. getElementsByTagName()

Este método selecciona elementos por su etiqueta HTML.

let elementos = document.getElementsByTagName('p');

4. querySelector()

Este método selecciona el primer elemento que coincida con un selector CSS.

let elemento = document.querySelector('.miClase');

5. querySelectorAll()

Este método selecciona todos los elementos que coincidan con un selector CSS.

let elementos = document.querySelectorAll('p');

Ejercicio 1: Selección de Elementos

Selecciona un elemento con el ID «titulo» y almacénalo en una variable llamada «titulo». Luego, selecciona todos los elementos con la clase «parrafo» y almacénalos en una variable llamada «parrafos».

let titulo = document.getElementById('titulo');
let parrafos = document.getElementsByClassName('parrafo');

Manipulación de Contenido y Atributos

Una vez que hemos seleccionado elementos en el DOM, podemos manipular su contenido y atributos. Los métodos y propiedades más comunes para hacer esto son:

1. textContent

La propiedad textContent permite acceder y modificar el contenido de un elemento como texto sin formato.

elemento.textContent = 'Nuevo contenido';

2. innerHTML

La propiedad innerHTML permite acceder y modificar el contenido de un elemento como HTML.

elemento.innerHTML = '<strong>Nuevo contenido</strong>';

3. setAttribute()

El método setAttribute() se utiliza para establecer o modificar atributos en un elemento.

elemento.setAttribute('class', 'nuevaClase');

4. getAttribute()

El método getAttribute() se utiliza para obtener el valor de un atributo.

let clase = elemento.getAttribute('class');

5. classList

La propiedad classList proporciona métodos para agregar, eliminar y cambiar clases en un elemento.

elemento.classList.add('nuevaClase');
elemento.classList.remove('claseExistente');

Ejercicio 2: Manipulación de Contenido y Atributos

Modifica el contenido del elemento con el ID «titulo» para que diga «Mi Nuevo Título». Luego, agrega una nueva clase «resaltado» a todos los elementos con la clase «parrafo».

titulo.textContent = 'Mi Nuevo Título';

for (let i = 0; i < parrafos.length; i++) {
  parrafos[i].classList.add('resaltado');
}

Conclusión

En este capítulo, hemos aprendido cómo seleccionar elementos en el DOM y cómo manipular su contenido y atributos utilizando JavaScript.