Guía Completa sobre el Objeto Document en JavaScript
El objeto document en JavaScript es una parte fundamental del modelo de objetos del documento (DOM, por sus siglas en inglés). El DOM es una representación en memoria de un documento HTML, que permite a los lenguajes de programación como JavaScript acceder y manipular el contenido, la estructura y el estilo de los documentos web.
¿Qué es el Objeto document?
El objeto document representa el documento HTML cargado en el navegador. Es la raíz del DOM y proporciona métodos y propiedades para interactuar con el contenido de la página web.
Funcionalidad del Objeto document
El objeto document sirve para:
- Acceder a Elementos HTML: Permite seleccionar elementos específicos del documento para su manipulación.
- Modificar Contenido y Atributos: Permite cambiar el texto, los atributos y el HTML interno de los elementos.
- Manipular la Estructura del Documento: Permite agregar, eliminar y clonar elementos.
- Manejar Eventos: Permite agregar y gestionar controladores de eventos para la interacción del usuario.
Métodos Comunes del Objeto document
A continuación, se describen algunos de los métodos más comunes del objeto document, junto con ejemplos de su uso:
getElementById
Selecciona un elemento por su atributo id.
let elemento = document.getElementById('miElemento');
elemento.textContent = "Nuevo contenido";
getElementsByClassName
Selecciona todos los elementos que tienen una clase específica.
let elementos = document.getElementsByClassName('miClase');
for (let i = 0; i < elementos.length; i++) {
elementos[i].style.color = "red";
}
getElementsByTagName
Selecciona todos los elementos con un nombre de etiqueta específico.
let parrafos = document.getElementsByTagName('p');
for (let i = 0; i < parrafos.length; i++) {
parrafos[i].style.fontSize = "18px";
}
querySelector
Selecciona el primer elemento que coincide con un selector CSS.
let elemento = document.querySelector('.miClase');
elemento.style.backgroundColor = "yellow";
querySelectorAll
Selecciona todos los elementos que coinciden con un selector CSS.
let elementos = document.querySelectorAll('.miClase');
elementos.forEach(elemento => {
elemento.style.border = "1px solid black";
});
createElement
Crea un nuevo elemento HTML.
let nuevoDiv = document.createElement('div');
nuevoDiv.textContent = "Este es un nuevo div";
document.body.appendChild(nuevoDiv);
createTextNode
Crea un nuevo nodo de texto.
let texto = document.createTextNode("Este es un texto");
let parrafo = document.createElement('p');
parrafo.appendChild(texto);
document.body.appendChild(parrafo);
appendChild
Agrega un nodo como el último hijo de un nodo padre.
let lista = document.getElementById('miLista');
let nuevoElemento = document.createElement('li');
nuevoElemento.textContent = "Nuevo ítem";
lista.appendChild(nuevoElemento);
removeChild
Elimina un nodo hijo de un nodo padre.
let lista = document.getElementById('miLista');
let item = lista.getElementsByTagName('li')[0];
lista.removeChild(item);
replaceChild
Reemplaza un nodo hijo existente con un nuevo nodo.
let lista = document.getElementById('miLista');
let nuevoElemento = document.createElement('li');
nuevoElemento.textContent = "Reemplazo";
let item = lista.getElementsByTagName('li')[0];
lista.replaceChild(nuevoElemento, item);
cloneNode
Clona un nodo, opcionalmente con todos sus nodos descendientes.
let original = document.getElementById('miElemento');
let copia = original.cloneNode(true);
document.body.appendChild(copia);
getElementById
Selecciona un elemento por su id.
let elemento = document.getElementById('miElemento');
elemento.textContent = "Nuevo contenido";
addEventListener
Agrega un controlador de eventos a un elemento.
let boton = document.getElementById('miBoton');
boton.addEventListener('click', function() {
alert("Botón clickeado");
});
Ejemplo Práctico
Aquí tienes un ejemplo que combina varios métodos del objeto document:
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de document</title>
</head>
<body>
<h1 id="titulo">Título original</h1>
<button id="boton">Cambiar título</button>
<ul id="miLista">
<li>Ítem 1</li>
<li>Ítem 2</li>
</ul>
<script>
// Selecciona elementos
let titulo = document.getElementById('titulo');
let boton = document.getElementById('boton');
let lista = document.getElementById('miLista');
// Cambia el contenido del título al hacer clic en el botón
boton.addEventListener('click', function() {
titulo.textContent = "Título cambiado";
// Agrega un nuevo ítem a la lista
let nuevoElemento = document.createElement('li');
nuevoElemento.textContent = "Nuevo ítem";
lista.appendChild(nuevoElemento);
});
</script>
</body>
</html>
Conclusión
El objeto document es esencial para la manipulación del DOM en JavaScript. Con los métodos proporcionados por document, puedes acceder y modificar elementos HTML, crear nuevos elementos, manejar eventos y mucho más. Estos métodos te permiten crear aplicaciones web interactivas y dinámicas, mejorando la experiencia del usuario.
