El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia

HOME

En esta sección, aprenderás cómo seleccionar y manipular elementos del DOM (Document Object Model) utilizando JavaScript. El DOM es una representación estructurada del documento HTML que permite a los lenguajes de programación acceder y modificar su contenido y estructura.

Selección de Elementos del DOM

Métodos de Selección

JavaScript proporciona varios métodos para seleccionar elementos del DOM. Aquí están los más comunes:

getElementById: Selecciona un elemento por su ID.
getElementsByClassName: Selecciona todos los elementos que tienen una clase específica.
getElementsByTagName: Selecciona todos los elementos con un nombre de etiqueta específico.
querySelector: Selecciona el primer elemento que coincide con un selector CSS.
querySelectorAll: Selecciona todos los elementos que coinciden con un selector CSS.

Ejemplos Prácticos

`getElementById`

// Selecciona el elemento con el ID 'miElemento'
let elemento = document.getElementById('miElemento');
console.log(elemento);

`getElementsByClassName`

// Selecciona todos los elementos con la clase 'miClase'
let elementos = document.getElementsByClassName('miClase');
console.log(elementos);

`getElementsByTagName`

// Selecciona todos los elementos <p>
let parrafos = document.getElementsByTagName('p');
console.log(parrafos);

`querySelector`

// Selecciona el primer elemento <div> con la clase 'miClase'
let primerDiv = document.querySelector('div.miClase');
console.log(primerDiv);

`querySelectorAll`

// Selecciona todos los elementos <div> con la clase 'miClase'
let todosLosDivs = document.querySelectorAll('div.miClase');
console.log(todosLosDivs);

Manipulación de Elementos del DOM

Modificación de Contenido

Puedes modificar el contenido de un elemento utilizando las propiedades innerHTML, innerText y textContent.

`innerHTML`

// Cambia el contenido HTML del elemento con el ID 'miElemento'
let elemento = document.getElementById('miElemento');
elemento.innerHTML = '<strong>Nuevo Contenido</strong>';

`innerText`

// Cambia el texto del elemento con el ID 'miElemento'
let elemento = document.getElementById('miElemento');
elemento.innerText = 'Nuevo Texto';

`textContent`

// Cambia el texto del elemento con el ID 'miElemento'
let elemento = document.getElementById('miElemento');
elemento.textContent = 'Nuevo Texto';

Modificación de Atributos

Puedes modificar los atributos de un elemento utilizando los métodos setAttribute, getAttribute y removeAttribute.

`setAttribute`

// Establece un nuevo atributo 'data-info' en el elemento con el ID 'miElemento'
let elemento = document.getElementById('miElemento');
elemento.setAttribute('data-info', 'valor');

`getAttribute`

// Obtiene el valor del atributo 'data-info' del elemento con el ID 'miElemento'
let elemento = document.getElementById('miElemento');
let valor = elemento.getAttribute('data-info');
console.log(valor);

`removeAttribute`

// Elimina el atributo 'data-info' del elemento con el ID 'miElemento'
let elemento = document.getElementById('miElemento');
elemento.removeAttribute('data-info');

Modificación de Estilos

Puedes modificar los estilos de un elemento utilizando la propiedad style.

// Cambia el color de fondo del elemento con el ID 'miElemento'
let elemento = document.getElementById('miElemento');
elemento.style.backgroundColor = 'blue';

Ejercicios Prácticos

Ejercicio 1: Selección de Elementos

Selecciona todos los elementos con la clase 'item' y cambia su color de texto a rojo.

let items = document.getElementsByClassName('item');
for (let i = 0; i < items.length; i++) {
    items[i].style.color = 'red';
}

Ejercicio 2: Modificación de Contenido

Selecciona el elemento con el ID 'titulo' y cambia su contenido a 'Nuevo Título'.

let titulo = document.getElementById('titulo');
titulo.innerText = 'Nuevo Título';

Ejercicio 3: Modificación de Atributos

Selecciona el primer elemento con la clase 'enlace' y establece su atributo 'href' a 'https://www.ejemplo.com'.

let enlace = document.querySelector('.enlace');
enlace.setAttribute('href', 'https://www.ejemplo.com');

Resumen

En esta sección, has aprendido cómo seleccionar y manipular elementos del DOM utilizando JavaScript. Ahora puedes:

Seleccionar elementos utilizando métodos como getElementById, getElementsByClassName, getElementsByTagName, querySelector y querySelectorAll.
Modificar el contenido de los elementos utilizando innerHTML, innerText y textContent.
Modificar los atributos de los elementos utilizando setAttribute, getAttribute y removeAttribute.
Cambiar los estilos de los elementos utilizando la propiedad style.

Con estos conocimientos, estás listo para avanzar a la siguiente sección, donde aprenderás sobre el manejo de eventos en el DOM.

Selección y Manipulación de Elementos del DOM

Selección de Elementos del DOM

Métodos de Selección

Ejemplos Prácticos

`getElementById`

`getElementsByClassName`

`getElementsByTagName`

`querySelector`

`querySelectorAll`

Manipulación de Elementos del DOM

Modificación de Contenido

`innerHTML`

`innerText`

`textContent`

Modificación de Atributos

`setAttribute`

`getAttribute`

`removeAttribute`

Modificación de Estilos

Ejercicios Prácticos

Ejercicio 1: Selección de Elementos

Ejercicio 2: Modificación de Contenido

Ejercicio 3: Modificación de Atributos

Resumen

JavaScript: De Principiante a Avanzado

Módulo 1: Introducción a JavaScript

Módulo 2: Estructuras de Control

Módulo 3: Funciones

Módulo 4: Objetos y Arrays

Módulo 5: Objetos y Funciones Avanzadas

Módulo 6: El Modelo de Objetos del Documento (DOM)

Módulo 7: APIs del Navegador y Temas Avanzados

Módulo 8: Pruebas y Depuración

Módulo 9: Rendimiento y Optimización

Módulo 10: Frameworks y Librerías de JavaScript

Módulo 11: Proyecto Final