JavaTutorial de script DOM con ejemplo

Por: james hartman james hartman
Hours Actualizado

⚡ Resumen inteligente

JavaLa funcionalidad Script DOM y Events otorga a los scripts un control total sobre una página web, permitiendo que el código lea, modifique, agregue o elimine cualquier elemento que el navegador haya renderizado, y que responda instantáneamente cada vez que un visitante haga clic, escriba o se desplace.

  • ???? Tipos de nodos: Los nodos de elemento, texto, atributo y comentario desempeñan cada uno un papel distinto dentro del árbol DOM.
  • 🔍 Selección de elementos: Las funciones getElementById, querySelector y querySelectorAll localizan los nodos exactos con los que un script necesita trabajar.
  • ✏️ Actualización de contenido: innerHTML, textContent y setAttribute modifican lo que un visitante ve realmente en la pantalla.
  • 🧩 Nodos de construcción: createElement y appendChild insertan elementos completamente nuevos sin recargar la página.
  • 🗑️ Eliminación de nodos: removeChild y remove eliminan los elementos no deseados del árbol vivo.
  • 🖱️ Manejo de eventos: addEventListener adjunta controladores de clic, pulsación de tecla y envío a cualquier elemento.
  • 🔄 Delegación del evento: Un único oyente principal junto con event.target gestiona los clics de muchos elementos secundarios a la vez.
  • 🤖 Depuración asistida por IA: Los asistentes de codificación de IA ayudan trace identificar problemas recurrentes y sugerir patrones de delegación para interfaces de usuario complejas.
Descubre más

¿Qué es DOM en Java¿Texto?

JavaUn script puede acceder a todos los elementos de una página web utilizando el Modelo de Objetos del Documento (DOM). De hecho, el navegador web crea un DOM de la página web cuando esta se carga. El modelo DOM se crea como un árbol de objetos como este:

DOM en JavaScript

Cada elemento HTML de una página se convierte en un nodo dentro de este árbol. Los navegadores agrupan los nodos DOM en unos pocos tipos principales: los nodos de elementos representan etiquetas como <p> or <div>, los nodos de texto contienen las palabras visibles dentro de una etiqueta, los nodos de atributo almacenan valores como id or classy los nodos de comentarios conservan <!-- --> marcado. El nodo superior siempre es el document objeto, y todos los demás elementos son descendientes de él.

Usando el DOM, JavaScript Puede realizar múltiples tareas. Puede crear nuevos elementos y atributos, modificar elementos y atributos existentes e incluso eliminar elementos y atributos existentes. JavaEl script también puede reaccionar a eventos existentes y crear nuevos eventos en la página. Las secciones siguientes explican cómo seleccionar elementos, modificarlos y configurar los controladores de eventos con ejemplos prácticos y ejecutables.

Es útil recordar que el DOM no es lo mismo que el archivo fuente HTML. El HTML que descarga un navegador es texto estático, pero el DOM que construye a partir de ese texto es un modelo de objetos vivo y dinámico. Cualquier cambio JavaEl script modifica el DOM y este aparece en pantalla inmediatamente, sin que el archivo HTML original haya sido tocado en ningún momento.

Cómo seleccionar elementos DOM en JavaScript

Antes JavaUn script puede modificar cualquier elemento de una página, pero primero necesita seleccionar el nodo de destino. El DOM proporciona varios métodos de selección, cada uno adecuado para diferentes situaciones:

  • obtenerElementoPorId(): devuelve el único elemento que coincide con un valor dado id atributo.
  • obtenerElementosPorNombreDeClase(): Devuelve una colección HTML en vivo de todos los elementos que tienen una clase determinada.
  • obtenerElementosPorNombreDeEtiqueta(): devuelve una colección HTML en vivo de cada elemento con un nombre de etiqueta determinado, como por ejemplo: p or li.
  • selector de consulta(): Devuelve el primer elemento que coincide con cualquier selector CSS.
  • consultaSelectorAll(): Devuelve una lista estática de nodos (NodeList) con todos los elementos que coinciden con un selector CSS.

La tabla que aparece a continuación compara los cuatro métodos de selección más utilizados para que puedas elegir el más adecuado para el puesto.

Método Returns Mejores Usados ​​Cuando
getElementById Elemento único Conoces la identificación exacta y única del objetivo.
getElementsByClassName Colección HTML en vivo Todos los elementos deben compartir un mismo nombre de clase.
selector de consulta Elemento único (primera coincidencia) Puedes usar cualquier selector CSS, no solo id o clase.
consultaSelectorTodos Lista de nodos estáticos Necesitas recorrer cada coincidencia con forEach.

querySelector y querySelectorAll aceptan cualquier selector CSS válido, lo que los convierte en la opción más flexible para el código moderno. Pruebe el siguiente fragmento en una página que contenga un elemento con id="title" y varios elementos con class="item":

const heading = document.getElementById("title");
const itemsByClass = document.getElementsByClassName("item");
const firstItem = document.querySelector(".item");
const allItems = document.querySelectorAll(".item");
console.log(heading.textContent, itemsByClass.length, allItems.length);

getElementById y getElementsByClassName siguen siendo más rápidos para búsquedas simples, mientras que querySelector y querySelectorAll son preferibles cuando la lógica de selección necesita la potencia de la sintaxis CSS completa, como los selectores de atributos o descendientes.

ARTÍCULOS RELACIONADOS

Cómo modificar, crear y eliminar elementos DOM

Una vez seleccionado un elemento, JavaEl script puede leer o reescribir su contenido, atributos e incluso su existencia en el árbol. Usando DOM, JavaEl script puede crear nuevos elementos y atributos, modificar los elementos y atributos existentes y eliminarlos por completo.

Cambiar contenido con getElementById e innerHTML

  1. getElementById: para acceder a elementos y atributos cuya identificación está establecida.
  2. InnerHTML: Para acceder al contenido de un elemento.

Prueba este ejemplo tú mismo:

<html>
<head>
<title>DOM!!!</title>
</head>
<body>
<h1 id="one">Welcome</h1>
<p>This is the welcome message.</p>
<h2>Technology</h2>
<p>This is the technology section.</p>
<script type="text/javascript">
var text = document.getElementById("one").innerHTML;
alert("The first heading is " + text);
</script>
</body>
</html>

El cuadro de alerta confirma que getElementById localizó el encabezado e innerHTML devolvió el texto almacenado en su interior.

Lee todos los párrafos con getElementsByTagName

getElementsByTagName: para acceder a elementos y atributos utilizando el nombre de la etiqueta. Este método devolverá un matriz de todos los elementos con el mismo nombre de etiqueta.

Prueba este ejemplo tú mismo:

<html>
<head>
<title>DOM!!!</title>
</head>
<body>
<h1>Welcome</h1>
<p>This is the welcome message.</p>
<h2>Technology</h2>
<p id="second">This is the technology section.</p>
<script type="text/javascript">
var paragraphs = document.getElementsByTagName("p");
alert("Content in the second paragraph is " + paragraphs[1].innerHTML);
document.getElementById("second").innerHTML = "The orginal message is changed.";
</script>
</body>
</html>

Debido a que getElementsByTagName devuelve una colección en vivo, paragraphs[1] se refiere al segundo párrafo del documento, y actualizar innerHTML sobrescribe inmediatamente su texto en la pantalla.

Crear y eliminar elementos con createElement y removeChild

Además de modificar lo que ya hay en la página, el DOM permite añadir elementos completamente nuevos o eliminar los existentes:

  • crearElemento(): crea un nuevo nodo de elemento en la memoria.
  • appendChild(): adjunta un nodo como último hijo de un elemento padre.
  • establecerAtributo(): agrega o actualiza un atributo, como por ejemplo: class or href, en un elemento.
  • removeChild(): Elimina un nodo hijo específico de su nodo padre.

El siguiente ejemplo crea un nuevo elemento de lista, le asigna un texto y una clase, lo agrega a una lista existente y luego elimina el primer elemento de esa misma lista:

const list = document.getElementById("myList");
const newItem = document.createElement("li");
newItem.textContent = "Freshly added item";
newItem.setAttribute("class", "highlight");
list.appendChild(newItem);
list.removeChild(list.firstElementChild);

La función createElement() por sí sola no muestra nada, ya que el nodo aún reside únicamente en la memoria. Solo aparece cuando appendChild(), o un método similar como prepend(), lo agrega en algún lugar dentro del árbol visible. Los navegadores modernos también admiten el método node.remove(), más corto, que elimina un elemento directamente sin necesidad de una referencia a su padre, a diferencia de la sintaxis anterior parent.removeChild(node).

Cómo manejar eventos en JavaScript

Un evento es cualquier acción que el navegador puede detectar, como un clic, una pulsación de tecla o la carga de una página. Puedes añadir un controlador de eventos a un elemento específico de dos maneras principales.

Adjunte un controlador con onclick o addEventListener.

El primer enfoque, más antiguo, asigna una función directamente a la propiedad "on-evento" de un elemento:

document.getElementById(id).onclick=function()
{
lines of code to be executed
}

O bien, utilizando el método addEventListener(), más moderno y flexible:

document.getElementById(id).addEventListener("click", functionname)

Generalmente se prefiere `addEventListener()` porque permite asociar más de un controlador al mismo evento en el mismo elemento, y acepta un tercer argumento opcional que controla la captura, tema que se abordará más adelante en esta sección. También se combina con `removeEventListener()`, que desvincula un controlador cuando ya no es necesario, algo que la propiedad `onclick` no puede hacer por sí sola.

HTML también admite un tercer estilo: un controlador en línea escrito directamente en la etiqueta, como por ejemplo <button onclick="clicked()">Click Me</button>Los manejadores en línea mezclan marcado con lógica y rápidamente se vuelven difíciles de mantener, por lo que la mayoría JavaLos desarrolladores de scripts los reservan para demostraciones rápidas y confían en addEventListener() para aplicaciones reales.

Pruébalo: Un ejemplo completo de evento de clic

Prueba este ejemplo tú mismo:

<html>
<head>
<title>DOM!!!</title>
</head>
<body>
<input type="button" id="btnClick" value="Click Me!!" />
<script type="text/javascript">
document.getElementById("btnClick").addEventListener("click", clicked);
function clicked()
{
alert("You clicked me!!!");
}
</script>
</body>
</html>

Al hacer clic en el botón se activa la función clicked(), que desencadena una JavaCuadro de alerta del script que confirma que el controlador de eventos se ejecutó correctamente.

El objeto de evento

Cada controlador de eventos recibe automáticamente un objeto de evento como primer argumento. Este objeto contiene detalles útiles sobre lo sucedido, como event.target (el elemento exacto donde se originó la acción), event.type (el nombre del evento, como "click") y métodos como event.preventDefault(), que impide el comportamiento predeterminado del navegador, como seguir un enlace o enviar un formulario.

document.getElementById("btnClick").addEventListener("click", function(event) {
console.log("Clicked element: " + event.target.id);
});

Dos propiedades más completan el objeto de evento: event.currentTarget Siempre se refiere al elemento al que está conectado el oyente, incluso si event.target informa de un elemento secundario anidado, y event.stopPropagation() detiene un evento antes de que continúe propagándose o capturándose. Junto con preventDefault(), estas herramientas proporcionan al controlador un control preciso sobre lo que sucede a continuación.

Eventos Bubblcaptura, delegación y gestión

Cuando se activa un evento en un elemento anidado, no se detiene ahí. En el burbujeante En esta fase, el evento viaja hacia arriba desde el elemento objetivo a través de cada ancestro, hasta llegar al documento. captura fase, que se ejecuta primero y es opcional, el evento viaja hacia abajo desde el documento hasta el destino antes de que comience la propagación. {capture: true} como tercer argumento de addEventListener() para escuchar durante la fase de captura.

Delegación de eventos Aprovecha el efecto de propagación: en lugar de adjuntar un detector de eventos independiente a cada elemento hijo, se adjunta un único detector a un elemento padre compartido y se inspecciona event.target para determinar qué hijo lo activó. Esto consume menos memoria y cubre automáticamente los elementos que se agreguen a la página posteriormente.

const list = document.getElementById("myList");
list.addEventListener("click", function(event) {
  if (event.target.tagName === "LI") {
    alert("You clicked " + event.target.textContent);
  }
});

La delegación, junto con el burbujeo y la captura, le brinda un control preciso sobre cómo el DOM y los eventos en JavaEl script responde a medida que la página se vuelve más interactiva.

Preguntas Frecuentes

No. HTML es el marcado estático que un navegador analiza, mientras que el DOM es el árbol de objetos en memoria que está en vivo. JavaEl script puede leerse y modificarse después de que la página se haya cargado.

Prefiera addEventListener(). Permite múltiples manejadores para un mismo evento, admite la fase de captura y no sobrescribe un manejador ya adjunto mediante onclick.

BubblEl proceso transporta un evento desde el elemento de destino hasta el documento. El proceso de captura se ejecuta primero y se mueve en sentido contrario, desde el documento hasta el destino.

Sí. Asistentes como Copiloto de GitHub puede tracExplique por qué un controlador nunca se activa, detecte llamadas faltantes a event.stopPropagation() y sugiera patrones de delegación para listas dinámicas.

Sí. Herramientas como ChatGPT y GitHub Copilot puede generar fragmentos de código para createElement, querySelector y addEventListener a partir de una descripción en lenguaje natural, aunque el resultado aún necesita ser probado.

Resumir este post con: