Manipulación del DOM en JavaScript: Referencia Rápida
El DOM (Document Object Model) proporciona una representación estructurada de un documento HTML que JavaScript puede manipular. A continuación, se presentan las principales funciones para acceder y modificar elementos del DOM sin utilizar frameworks externos:
Acceso a Elementos del DOM
- getElementById: Obtiene un elemento por su id.
document.getElementById('someid');
- getElementsByClassName: Obtiene una lista de elementos que tienen una clase específica.
document.getElementsByClassName('someclass');
- getElementsByTagName: Obtiene una colección de elementos por su nombre de etiqueta.
document.getElementsByTagName('LI');
- querySelector y querySelectorAll: Devuelven elementos que coinciden con un selector CSS específico.
document.querySelector('.someclass');
document.querySelectorAll('div.note, div.alert');
Acceder a Hijos/Padres de un Elemento
- childNodes: Obtiene una lista de los hijos de un elemento.
var elem = document.getElementById('someid');
var hijos = elem.childNodes;
parentNode: Obtiene el nodo padre de un elemento.
var padre = elem.parentNode;
Crear y Añadir Elementos al DOM
- createElement: Crea un nuevo elemento.
var nuevoH1 = document.createElement('h1');
var nuevoParrafo = document.createElement('p');
- createTextNode: Crea un nodo de texto para un elemento.
var textoH1 = document.createTextNode('Hola mundo!');
var textoParrafo = document.createTextNode('lorem ipsum...');
- appendChild e innerHTML: Añade nodos de texto a elementos o establece contenido HTML.
var cabecera = document.getElementById('cabecera');
cabecera.appendChild(nuevoH1);
cabecera.appendChild(nuevoParrafo);
var padre = cabecera.parentNode;
padre.insertBefore(nuevoH1, cabecera);
- insertAdjacentHTML: Inserta HTML adyacente antes o después de un elemento existente.
var box2 = document.getElementById('box2');
box2.insertAdjacentHTML('beforebegin', '<div><p>un parrafo nuevo.</p></div>');
Modificar Clases
- classList: Manipula las clases de un elemento.
var cabecera = document.getElementById('cabecera');
cabecera.classList.remove('foo');
cabecera.classList.add('otra');
cabecera.classList.toggle('visible');
cabecera.classList.contains('foo');
Esta referencia proporciona las herramientas esenciales para interactuar dinámicamente con el contenido HTML de una página web utilizando JavaScript puro. Para tutoriales más detallados y ejemplos, se recomienda consultar la documentación oficial de MDN.
