Objeto Document de JavaScript explicado: propiedades, métodos del DOM y ejemplos prácticos

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

1. Introducción

JavaScript es un lenguaje de programación esencial para el desarrollo web. Entre sus características principales, el objeto documento desempeña un papel central en el control y la manipulación de la estructura y el contenido de una página web. En este artículo aprenderás sobre el objeto documento de JavaScript de una manera que usuarios desde principiantes hasta intermedios puedan comprender.

¿Para qué se usa JavaScript?

JavaScript es un lenguaje de programación que se utiliza junto con HTML y CSS, principalmente para crear comportamientos dinámicos e interacciones de usuario en las páginas web. Ejemplos incluyen la validación de formularios, la visualización de menús emergentes y la incorporación de efectos de animación.

En particular, el objeto documento proporciona funcionalidades para acceder y editar elementos en una página web mediante JavaScript. Con este objeto puedes seleccionar elementos HTML, añadir nuevos elementos, establecer eventos y realizar muchas otras operaciones.

¿Por qué es necesario aprender el objeto documento?

El objeto documento funciona como parte del DOM (Modelo de Objetos del Documento). El DOM es un modelo que representa la estructura de un documento HTML o XML de forma que puede ser manipulada programáticamente, y constituye un conocimiento esencial para el desarrollo web.

Al comprender este modelo y aprender a usar el objeto documento de manera eficaz, podrás manejar situaciones como las siguientes:

• Actualizaciones dinámicas de la interfaz de usuario
• Validación de formularios en tiempo real
• Carga y renderizado de datos de forma asíncrona (AJAX o Fetch API)
• Implementación de ventanas modales y menús emergentes

Qué aprenderás en este artículo

Este artículo explica todo, desde los conceptos básicos hasta usos más avanzados del objeto documento, de forma organizada y con ejemplos de código prácticos que demuestran su funcionamiento. Después de leer, podrás entender lo siguiente:

• La estructura y funcionalidad básica del objeto documento
• Cómo seleccionar y manipular elementos HTML
• Cómo configurar escuchas de eventos y ejemplos de uso práctico
• Precauciones importantes y buenas prácticas

Los principiantes podrán asimilar firmemente los fundamentos, mientras que los usuarios intermedios obtendrán pistas para escribir código más eficiente.

2. ¿Qué es el objeto document de JavaScript?

En JavaScript, el objeto document es una de las interfaces más importantes para trabajar con páginas web. Proporcionado como parte del DOM (Modelo de Objetos del Documento), permite manipular y modificar fácilmente los elementos dentro de una página.

El rol del objeto document

El objeto document representa todo el documento HTML cargado por el navegador. Esto te permite controlar la estructura HTML, los estilos y el contenido de forma programática mediante JavaScript.

Por ejemplo, puedes hacer lo siguiente:

• Seleccionar y editar elementos HTML
• Crear y añadir nuevos elementos
• Cambiar el color de fondo de la página o el contenido de texto
• Detectar acciones del usuario configurando escuchas de eventos

Relación entre el DOM y el objeto document

El DOM (Modelo de Objetos del Documento) representa un documento HTML o XML como una estructura de árbol. En la parte superior de ese árbol se encuentra el objeto document.

El diagrama a continuación muestra una vista simple de la relación entre el DOM y el objeto document.

document
├── html
│   ├── head
│   │   └── title
│   └── body
│       ├── div
│       ├── p
│       └── button

De esta manera, el objeto document representa toda la página como un árbol y sirve como punto de partida para acceder a cada elemento.

Uso básico del objeto document

Veamos algunos ejemplos sencillos de uso del objeto document.

Ejemplo 1: Obtener el título de la página

console.log(document.title); // Get the page title

Ejemplo 2: Cambiar el color de fondo

document.body.style.backgroundColor = "lightblue";

Ejemplo 3: Seleccionar y editar un elemento

let heading = document.getElementById("main-title");
heading.textContent = "New Title";

Al combinar estas operaciones, puedes crear páginas web interactivas y dinámicas.

Características clave del objeto document

1. Actualizaciones en tiempo real – Los cambios en el documento se reflejan inmediatamente.
2. Acceso a una estructura jerárquica – Puedes seleccionar y modificar elementos de forma flexible al recorrer el árbol DOM.
3. Gestión de eventos – Puedes añadir escuchadores de eventos basados en acciones del usuario.

3. Propiedades y Métodos Clave del Objeto document

El objeto JavaScript document ofrece muchas propiedades y métodos que respaldan una amplia gama de operaciones en páginas web. En esta sección, presentaremos las propiedades y métodos más usados.

1. Propiedades de uso frecuente

A continuación se muestran las propiedades más usadas del objeto document y para qué sirven.

Estas propiedades te ayudan a obtener y actualizar fácilmente información sobre una página web.

2. Métodos de uso frecuente

A continuación, se presentan los métodos utilizados para manipular elementos y añadir nuevos elementos.

3. Ejemplos que combinan propiedades y métodos

Veamos ejemplos de uso real.

Ejemplo 1: Obtener el valor de un formulario

let form = document.forms[0];
let input = form.elements["username"];
console.log(input.value);

Ejemplo 2: Crear y añadir un nuevo elemento

let newParagraph = document.createElement("p");
newParagraph.textContent = "This is a new paragraph.";
document.body.appendChild(newParagraph);

Ejemplo 3: Añadir un evento de clic

document.getElementById("myButton").addEventListener("click", () => {
    alert("The button was clicked!");
});

4. Resumen

El objeto document ofrece un conjunto amplio de propiedades y métodos útiles para manipular páginas web. Al dominarlos, puedes crear páginas más interactivas y funcionales.

4. Selección y Manipulación de Elementos HTML (Con Ejemplos de Código)

Usando el objeto document de JavaScript, puedes seleccionar fácilmente elementos HTML, editar su contenido y cambiar sus atributos. En esta sección, explicaremos en detalle las técnicas comunes de selección y manipulación con ejemplos de código.

1. Cómo Seleccionar Elementos HTML

1-1. Seleccionar por ID – getElementById()

Selecciona elementos usando el atributo ID asignado a un elemento HTML.

Ejemplo: Cambiar el texto de un elemento
HTML:

<h1 id="title">Original Title</h1>

JavaScript:

let title = document.getElementById("title");
title.textContent = "New Title"; // Change the text

Punto clave

• Un ID debe ser único. No puedes asignar el mismo ID a varios elementos.

1-2. Seleccionar por nombre de clase – getElementsByClassName()

Selecciona varios elementos que comparten el mismo nombre de clase.

Ejemplo: Cambiar el color de fondo
HTML:

<div class="box">Box 1</div>
<div class="box">Box 2</div>

JavaScript:

let boxes = document.getElementsByClassName("box");
for (let i = 0; i < boxes.length; i++) {
    boxes[i].style.backgroundColor = "lightblue";
}

Punto clave

• Iteras sobre los elementos como si fueran un array y los manipulas uno a uno.

1-3. Seleccionar por nombre de etiqueta – getElementsByTagName()

Selecciona todos los elementos con el nombre de etiqueta especificado.

Ejemplo: Cambiar el color de todos los párrafos
HTML:

<p>Paragraph 1</p>
<p>Paragraph 2</p>

JavaScript:

let paragraphs = document.getElementsByTagName("p");
for (let p of paragraphs) {
    p.style.color = "green";
}

1-4. Seleccionar con selectores CSS – querySelector() y querySelectorAll()

Usar selectores CSS te permite seleccionar elementos de forma más flexible.

Seleccionar un solo elemento – querySelector()

let firstDiv = document.querySelector("div.box");
firstDiv.textContent = "Selected box";

Seleccionar varios elementos – querySelectorAll()

let allDivs = document.querySelectorAll("div.box");
allDivs.forEach(div => div.style.border = "1px solid red");

2. Cómo Manipular Elementos HTML

2-1. Editar texto o HTML

Ejemplo: Diferencia entre innerHTML y textContent
HTML:

<div id="content">Original text</div>

JavaScript:

let content = document.getElementById("content");

// Change text only
content.textContent = "<b>New text</b>"; // Displayed as plain text

// Change including HTML
content.innerHTML = "<b>New text</b>"; // Displayed in bold

Puntos clave

• textContent trata las etiquetas como una cadena de texto simple y no las interpreta como HTML.
• innerHTML aplica HTML directamente, pero debes tener cuidado con la seguridad (prevención de XSS).

2-2. Edición de atributos

Ejemplo: Cambiar un enlace
HTML:

<a id="link" href="https://example.com">Original link</a>

JavaScript:

let link = document.getElementById("link");
link.setAttribute("href", "https://google.com"); // Change the URL
link.textContent = "Link to Google";             // Change the label

2-3. Creación y adición de nuevos elementos

Ejemplo: Agregar un nuevo elemento de lista
HTML:

<ul id="list">
  <li>Item 1</li>
</ul>

JavaScript:

let list = document.getElementById("list");
let newItem = document.createElement("li");
newItem.textContent = "Item 2"; // Create a new item
list.appendChild(newItem);      // Append to the end of the list

2-4. Eliminación de elementos

Ejemplo: Eliminar un elemento al hacer clic en un botón
HTML:

<div id="box">Element to be removed</div>
<button id="deleteBtn">Remove</button>

JavaScript:

let box = document.getElementById("box");
let deleteBtn = document.getElementById("deleteBtn");

deleteBtn.addEventListener("click", () => {
    box.remove(); // Remove the element
});

3. Resumen

En esta sección, aprendiste cómo seleccionar y manipular elementos HTML usando el objeto document a través de ejemplos prácticos. Dominar estas técnicas facilita mucho el control dinámico de las páginas web.

5. Pasos para Crear y Agregar Nuevos Elementos (Con Diagramas)

Usando el objeto document de JavaScript, puedes crear dinámicamente nuevos elementos HTML y agregarlos a una página existente. En esta sección, explicamos los pasos específicos para crear y agregar elementos con ejemplos de código y diagramas.

1. Cómo crear nuevos elementos

1-1. Crear un elemento – createElement()

Crea un nuevo elemento HTML usando el método document.createElement().

Ejemplo: Crear un nuevo elemento de párrafo

let newParagraph = document.createElement("p"); // Create a new <p> element
newParagraph.textContent = "This paragraph was added dynamically."; // Set the text

Puntos clave

• El elemento creado aún no se ha agregado al DOM.
• Puedes establecer libremente el texto y los atributos.

2. Establecer atributos y estilos en un elemento

2-1. Establecer atributos – setAttribute()

Para establecer atributos en un elemento creado, usa el método setAttribute().

Ejemplo: Agregar atributos a un elemento de enlace

let link = document.createElement("a");
link.textContent = "Google";
link.setAttribute("href", "https://google.com"); // Set the URL
link.setAttribute("target", "_blank");           // Open in a new tab

2-2. Establecer estilos – la propiedad style

Si quieres establecer el diseño directamente, usa la propiedad style.

Ejemplo: Estilizar un botón

let button = document.createElement("button");
button.textContent = "Click";
button.style.backgroundColor = "blue"; // Background color
button.style.color = "white";          // Text color
button.style.padding = "10px 20px";    // Padding

3. Agregar el elemento a la página

Puedes agregar elementos creados al DOM usando appendChild() o insertBefore().

3-1. Agregar al final – appendChild()

Ejemplo: Agregar un elemento de lista
HTML:

<ul id="list">
  <li>Item 1</li>
</ul>

JavaScript:

let list = document.getElementById("list");
let newItem = document.createElement("li");
newItem.textContent = "Item 2"; // Create a new item
list.appendChild(newItem);      // Append to the end of the list

3-2. Insertar en una posición específica – insertBefore()

Ejemplo: Insertar un elemento en una posición especificada

let referenceItem = list.firstElementChild; // Use the first item as a reference
list.insertBefore(newItem, referenceItem);  // Insert before the first item

4. Eliminar elementos

Puedes eliminar los elementos creados usando removeChild() o remove().

4-1. Eliminar un elemento hijo – removeChild()

let itemToRemove = list.lastElementChild; // Get the last item
list.removeChild(itemToRemove);           // Remove it

4-2. Eliminar el propio elemento – remove()

newItem.remove(); // Remove itself

5. Ejemplo práctico: Creación dinámica de un elemento de tarjeta

A continuación se muestra un ejemplo que crea dinámicamente un nuevo elemento “card”, establece estilos y lo agrega a la página.

HTML:

<div id="container"></div>

JavaScript:

let container = document.getElementById("container");

// Create the card element
let card = document.createElement("div");
card.classList.add("card"); // Add a class

// Create the card title
let title = document.createElement("h2");
title.textContent = "Card Title";

// Create the card body text
let description = document.createElement("p");
description.textContent = "This is the description text for the card.";

// Assemble and append
card.appendChild(title);
card.appendChild(description);
container.appendChild(card); // Append to the page

// Styling
card.style.border = "1px solid #ccc";
card.style.padding = "10px";
card.style.margin = "10px";
card.style.width = "200px";
card.style.boxShadow = "0 4px 6px rgba(0, 0, 0, 0.1)";

Resultado:

Card Title
This is the description text for the card.

6. Resumen

En esta sección, aprendiste el flujo completo desde la creación de nuevos elementos hasta la configuración de atributos y estilos, y su inserción en la página. Al aplicar estas técnicas, generar contenido web dinámico se vuelve mucho más fácil.

6. Cómo configurar escuchas de eventos (Ejemplos prácticos)

En JavaScript, puedes usar el objeto document para configurar escuchas de eventos y ejecutar procesamiento dinámico en respuesta a acciones del usuario. En esta sección, explicamos todo, desde los conceptos básicos de los escuchas de eventos hasta ejemplos de uso práctico.

1. ¿Qué es un escucha de eventos?

Un escucha de eventos es un mecanismo que detecta acciones del usuario (como clics, entradas o movimiento del ratón) y ejecuta una operación correspondiente.

Ejemplo: Evento de clic básico

document.getElementById("myButton").addEventListener("click", () => {
    alert("The button was clicked!");
});

2. Cómo agregar escuchas de eventos

2-1. Uso básico de addEventListener()

El método addEventListener() utiliza la siguiente sintaxis:

element.addEventListener(event, function, useCapture);

Descripción de los parámetros

1. event – El tipo de evento (por ejemplo: click, mouseover, keydown ).
2. function – La función a ejecutar (anónima o nombrada).
3. useCapture – Método de propagación del evento (true para captura, false para burbujeo).

Ejemplo: Añadir un evento mouseover

let box = document.getElementById("box");
box.addEventListener("mouseover", () => {
    box.style.backgroundColor = "lightblue";
});

3. Tipos de eventos más usados

A continuación se presentan los tipos de eventos más usados y ejemplos.

4. Ejemplos prácticos de escuchas de eventos

4-1. Cambiar texto al hacer clic en un botón

HTML:

<button id="changeText">Change</button>
<p id="text">Original text</p>

JavaScript:

let button = document.getElementById("changeText");
let text = document.getElementById("text");

button.addEventListener("click", () => {
    text.textContent = "Nuevo texto";
});

4-2. Real-time input detection

HTML:

<input type="text" id="nameInput" placeholder="Introduce tu nombre">
<p id="output"></p>

JavaScript:

let input = document.getElementById("nameInput");
let output = document.getElementById("output");

input.addEventListener("input", () => {
    output.textContent = "Entrada: " + input.value;
});

4-3. Change background color on hover

HTML:

<div id="hoverBox" style="width: 100px; height: 100px; background-color: lightgray;"></div>

JavaScript:

let hoverBox = document.getElementById("hoverBox");

hoverBox.addEventListener("mouseover", () => {
    hoverBox.style.backgroundColor = "yellow";
});

hoverBox.addEventListener("mouseout", () => {
    hoverBox.style.backgroundColor = "lightgray";
});

5. How to remove event listeners

You can remove an event listener using the removeEventListener() method.

Example: Remove a click event

function handleClick() {
    alert("¡Has hecho clic!");
}

let button = document.getElementById("myButton");
button.addEventListener("click", handleClick);

// Eliminar el listener del evento
button.removeEventListener("click", handleClick);

Important note

• To remove an event listener, you must reference the same function. Anonymous functions cannot be removed.

6. Summary

In this section, you learned how to set up event listeners, common event types, and practical usage examples. Mastering event handling is essential for creating interactive web applications.

7. Common Practical Use Cases and Applied Scenarios

The JavaScript document object can be applied in many real-world scenarios. In this section, we introduce common use cases and applied scenarios frequently seen in actual development.

1. Dynamic form validation

Form input validation is important for improving user experience. Below is an example that checks input in real time.

HTML

<form id="signupForm">
  <label for="email">Correo electrónico:</label>
  <input type="email" id="email" required>
  <span id="emailError" style="color: red;"></span>
  <br>
  <button type="submit">Enviar</button>
</form>

JavaScript

let emailInput = document.getElementById("email");
let emailError = document.getElementById("emailError");
let form = document.getElementById("signupForm");

// Validación de entrada
emailInput.addEventListener("input", () => {
    let emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (!emailPattern.test(emailInput.value)) {
        emailError.textContent = "Por favor, introduce una dirección de correo electrónico válida.";
    } else {
        emailError.textContent = "";
    }
});

// Comprobar al enviar el formulario
form.addEventListener("submit", (event) => {
    if (emailError.textContent !== "") {
        event.preventDefault();
        alert("Hay un error en tu entrada.");
    }
});

2. Dynamic content generation

This example dynamically generates new elements based on user actions.

HTML

<div id="container"></div>
<button id="addItem">Agregar elemento</button>

JavaScript

let container = document.getElementById("container");
let addButton = document.getElementById("addItem");

addButton.addEventListener("click", () => {
    let newItem = document.createElement("div");
    newItem.textContent = "Nuevo elemento";
    newItem.style.border = "1px solid #ccc";
    newItem.style.padding = "10px";
    newItem.style.margin = "5px 0";
    container.appendChild(newItem);
});

Result: A new item is added each time the button is clicked.

8. Cautions and Best Practices

The JavaScript document object is very powerful, but improper usage can negatively impact performance and security. In this section, we introduce important cautions and best practices to keep your code safe and efficient.

1. Performance optimization

1-1. Minimizar operaciones del DOM

Las operaciones del DOM son costosas, por lo que deberías reducir la cantidad de veces que se ejecutan.

Ejemplo incorrecto (operaciones del DOM repetidas dentro de un bucle)

for (let i = 0; i < 100; i++) {
    let div = document.createElement("div");
    div.textContent = "Item " + i;
    document.body.appendChild(div);
}

Ejemplo mejorado (usando un Document Fragment)

let fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
    let div = document.createElement("div");
    div.textContent = "Item " + i;
    fragment.appendChild(div);
}
document.body.appendChild(fragment);

Punto clave

• Los fragmentos pueden añadirse al DOM en una sola operación, mejorando el rendimiento.

1-2. Reducir reflujo y repintado

Cambiar estilos con frecuencia provoca reflujo y repintado, lo que puede ralentizar la renderización.

Ejemplo incorrecto

let box = document.getElementById("box");
box.style.width = "100px";
box.style.height = "100px";
box.style.backgroundColor = "red";

Ejemplo mejorado (actualizaciones por lotes)

let box = document.getElementById("box");
Object.assign(box.style, {
    width: "100px",
    height: "100px",
    backgroundColor: "red"
});

2. Consideraciones de seguridad

2-1. Prevención de ataques XSS

Usar innerHTML puede permitir la inyección de scripts maliciosos.

Ejemplo peligroso

let userInput = "<script>alert('Attack!')</script>";
document.getElementById("output").innerHTML = userInput;

Ejemplo seguro

let userInput = "<script>alert('Attack!')</script>";
document.getElementById("output").textContent = userInput;

Punto clave

• Siempre sanitiza la entrada del usuario antes de mostrarla.

2-2. Gestión adecuada de los listeners de eventos

Si los listeners de eventos no utilizados no se eliminan, pueden provocar fugas de memoria.

Ejemplo incorrecto

document.getElementById("button").addEventListener("click", () => {
    alert("Clicked!");
});

Ejemplo mejorado (eliminar el listener cuando ya no sea necesario)

function handleClick() {
    alert("Clicked!");
}
let button = document.getElementById("button");
button.addEventListener("click", handleClick);
button.removeEventListener("click", handleClick);

3. Legibilidad y mantenibilidad

3-1. Convenciones de nombres consistentes

Utiliza nombres descriptivos para variables y funciones que indiquen claramente su función.

Ejemplo incorrecto

let a = document.getElementById("username");
let b = document.getElementById("password");

Ejemplo mejorado

let usernameInput = document.getElementById("username");
let passwordInput = document.getElementById("password");

3-2. Creación de funciones reutilizables

Al refactorizar el código en funciones, reduces la duplicación y mejoras la mantenibilidad.

Ejemplo incorrecto

document.getElementById("btn1").addEventListener("click", () => alert("Button 1"));
document.getElementById("btn2").addEventListener("click", () => alert("Button 2"));

Ejemplo mejorado

function handleClick(message) {
    alert(message);
}

document.getElementById("btn1").addEventListener("click", () => handleClick("Button 1"));
document.getElementById("btn2").addEventListener("click", () => handleClick("Button 2"));

4. Consideraciones móviles y responsivas

Al usar JavaScript, asegúrate de que el comportamiento sea fluido también en dispositivos móviles.

Consejos y contramedidas

1. Alternativa a los eventos de clic – En móvil, considera touchstart o touchend.
2. Configuración del viewport – Configura correctamente el viewport para evitar zoom no deseado.

   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   

3. Combinar con media queries – Usa media queries de CSS para diseños responsivos.

5. Resumen

Esta sección cubrió advertencias importantes y buenas prácticas para usar el objeto document de forma segura y eficiente.

• Optimización del rendimiento : Minimizar las operaciones del DOM.
• Seguridad : Prevenir XSS y manejar la entrada del usuario de forma segura.
• Mantenibilidad : Escribir código legible y reutilizable.
• Soporte móvil : Considerar el diseño responsivo y los eventos táctiles.

9. Preguntas frecuentes: Preguntas comunes para principiantes

Los principiantes que comienzan a usar el objeto JavaScript document a menudo se encuentran con diversas preguntas y problemas. Esta sección responde a las preguntas más comunes en formato de preguntas y respuestas.

Q1. ¿Por qué no puedo seleccionar un elemento usando getElementById()?

R:
Las razones más comunes incluyen lo siguiente:

1. ID incorrecto

• El ID especificado no existe o está escrito incorrectamente.
• Solución : Verifica que el ID en tu HTML coincida con el que usas en tu JavaScript.

2. Momento de ejecución del script

• Si el JavaScript se ejecuta antes de que el HTML se haya cargado, el elemento aún no existe.
• Solución : Usa el evento DOMContentLoaded.

  document.addEventListener("DOMContentLoaded", () => {
      let element = document.getElementById("myDiv");
      console.log(element.textContent);
  });
  

Q2. ¿Cuál es la diferencia entre innerHTML y textContent?

R:

• innerHTML : Obtiene o establece todo el contenido, incluidas las etiquetas HTML.
• textContent : Obtiene o establece solo el contenido de texto (las etiquetas HTML se ignoran).

Q3. ¿Por qué no puedo modificar los elementos devueltos por querySelectorAll()?

R:
querySelectorAll() devuelve una NodeList estática, que no es un array. Debes iterar sobre ella para aplicar cambios.

let items = document.querySelectorAll(".item");
items.forEach(item => {
    item.style.color = "blue";
});

Q4. ¿Por qué no funciona addEventListener()?

R:
Las posibles razones incluyen:

1. Elemento no encontrado

• El elemento objetivo no se seleccionó correctamente.
• Solución : Verifica en la consola si el elemento existe.

Q5. ¿Por qué removeChild() lanza un error?

R:
El elemento a eliminar debe ser un hijo del elemento padre.

let list = document.getElementById("list");
let item = document.getElementById("item1");
list.removeChild(item);

6. Resumen

Esta sección de preguntas frecuentes abordó problemas comunes de principiantes. Prestar atención a la selección de elementos, el momento de ejecución y el uso correcto de los métodos te ayudará a evitar muchos problemas.

10. Conclusión y próximos pasos

A lo largo de este artículo, has aprendido el objeto document de JavaScript, desde conceptos básicos hasta aplicaciones prácticas. Repasemos los puntos clave y veamos los próximos pasos para seguir aprendiendo.

Al dominar el objeto document, obtienes la base necesaria para crear aplicaciones web dinámicas, interactivas y eficientes. Como siguiente paso, explora la manipulación avanzada del DOM, la integración de APIs y los frameworks modernos para mejorar aún más tus habilidades.