Guía Completa sobre el Objeto Document en JavaScript

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:

  1. Acceder a Elementos HTML: Permite seleccionar elementos específicos del documento para su manipulación.
  2. Modificar Contenido y Atributos: Permite cambiar el texto, los atributos y el HTML interno de los elementos.
  3. Manipular la Estructura del Documento: Permite agregar, eliminar y clonar elementos.
  4. 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.

Facebook
Twitter
LinkedIn

Post relacionados

Post recientes

Search