Una de las operaciones que realizaremos con mayor frecuencia al trabajar con el DOM es modificar los elementos disponibles.
Las modificaciones pueden incluir:
- Cambiar el contenido de los elementos.
- Cambiar los atributos de los elementos.
Modificar el contenido de los elementos
| Comando | Descripción |
|---|---|
textContent | Cambia el texto visible de un elemento reemplazando todo el contenido textual. |
innerHTML | Modifica el contenido HTML dentro de un elemento, permitiendo agregar etiquetas HTML dinámicamente. |
textContent
El atributo textContent permite cambiar el texto visible de un elemento. Este método reemplaza todo el contenido de texto dentro del elemento seleccionado.
const elemento = document.getElementById('mi-elemento');
elemento.textContent = 'Nuevo contenido de texto';innerHTML
El atributo innerHTML permite modificar el contenido HTML dentro de un elemento. Esto incluye etiquetas HTML y texto. Es útil para agregar contenido dinámico, pero debes tener cuidado con la inyección de código para evitar vulnerabilidades de seguridad.
const elemento = document.getElementById('mi-elemento');
elemento.innerHTML = '<strong>Texto en negrita</strong>';Seguridad
Al utilizar innerHTML, ten cuidado con la inserción de datos dinámicos para evitar vulnerabilidades de seguridad, como ataques XSS (Cross-Site Scripting). Valida y escapa cualquier dato de entrada del usuario antes de incluirlo en el DOM.
Modificar atributos de los elementos
| Comando | Descripción |
|---|---|
setAttribute() | Cambia o establece un valor de atributo en un elemento HTML. |
getAttribute() | Obtiene el valor de un atributo de un elemento HTML. |
| Modificación directa | Cambia directamente propiedades como src, href, className en un elemento HTML mediante asignación. |
setAttribute()
El método setAttribute() permite cambiar el valor de un atributo de un elemento HTML. Puedes establecer cualquier atributo válido de un elemento.
const elemento = document.getElementById('mi-elemento');
elemento.setAttribute('data-info', 'valor');getAttribute()
El método getAttribute() se usa para obtener el valor de un atributo de un elemento. Esto puede ser útil para leer valores y realizar operaciones basadas en ellos.
const elemento = document.getElementById('mi-elemento');
const valor = elemento.getAttribute('data-info');
console.log(valor); // 'valor'Modificación directa
Algunos atributos también pueden ser modificados directamente como propiedades del objeto. Por ejemplo, src, href, y className.
const imagen = document.getElementById('mi-imagen');
imagen.src = 'nueva-foto.jpg';