JavaScript

JavaScript

Tutorial JavaScript: Introducción al DOM

DOM: Descubre cómo el Document Object Model permite interactuar y manipular elementos HTML con JavaScript. Aprende a optimizar tu código.

Aprende JavaScript y certifícate

Conceptos fundamentales: El DOM como interfaz de programación entre HTML y JavaScript

El Document Object Model (DOM) constituye el puente fundamental entre el código HTML que estructura una página web y el JavaScript que le otorga interactividad. En esencia, el DOM es una representación estructurada del documento HTML que permite a los programas acceder y modificar dinámicamente el contenido, estructura y estilo de una página web.

Cuando un navegador carga una página web, no solo interpreta el HTML para mostrar su contenido, sino que también crea una representación en memoria de ese documento en forma de árbol de objetos. Esta transformación convierte cada elemento HTML (como párrafos, divisiones, encabezados) en nodos manipulables mediante código JavaScript.

Del HTML al DOM: Una transformación visual

Para entender mejor cómo el navegador convierte HTML en una estructura DOM, observemos un ejemplo:

<!-- Código HTML -->
<article>
  <h1>Introducción al DOM</h1>
  <p>El DOM permite <em>manipular</em> páginas web.</p>
</article>

Este HTML se transforma en la siguiente estructura de árbol DOM:

document
  └── article (ElementNode)
      ├── h1 (ElementNode)
      │   └── "Introducción al DOM" (TextNode)
      └── p (ElementNode)
          ├── "El DOM permite " (TextNode)
          ├── em (ElementNode)
          │   └── "manipular" (TextNode)
          └── " páginas web." (TextNode)

Como puedes ver, cada etiqueta HTML se convierte en un nodo de elemento en el árbol DOM, y el texto se convierte en nodos de texto. Esta estructura jerárquica permite a JavaScript navegar y manipular cualquier parte del documento.

El DOM como una interfaz orientada a objetos

Una característica fundamental del DOM es que implementa un paradigma orientado a objetos. Esto significa que:

  • Cada elemento del DOM es un objeto JavaScript con propiedades y métodos
  • Estos objetos se organizan en una jerarquía de clases con herencia
  • Existe una relación de "es un" entre los diferentes tipos de nodos

Por ejemplo, un elemento <div> en el DOM es una instancia de HTMLDivElement, que hereda de HTMLElement, que a su vez hereda de Element, y finalmente de Node:

const div = document.querySelector('div');
console.log(div instanceof HTMLDivElement); // true
console.log(div instanceof HTMLElement);    // true
console.log(div instanceof Element);        // true
console.log(div instanceof Node);           // true

Esta jerarquía de herencia, que ya estudiamos en lecciones anteriores sobre POO, permite que cada elemento tenga propiedades y métodos específicos según su tipo, pero también comparta funcionalidades comunes con otros elementos.

Función del DOM como interfaz

El DOM actúa como una API (Application Programming Interface) que establece un conjunto de reglas y métodos estandarizados para que JavaScript pueda:

  • Acceder a cualquier elemento de la página
  • Modificar el contenido de los elementos
  • Alterar los atributos y estilos
  • Crear nuevos elementos
  • Eliminar elementos existentes
  • Responder a eventos del usuario

Esta interfaz permite que el código JavaScript no necesite entender HTML directamente, sino que trabaje con una abstracción orientada a objetos del documento.

// Ejemplo básico de interacción con el DOM
const heading = document.createElement('h1');
heading.textContent = 'Hola Mundo DOM!';
document.body.appendChild(heading);

En este ejemplo, no estamos manipulando texto HTML directamente, sino utilizando objetos y métodos del DOM para crear y añadir un nuevo elemento a la página.

El DOM y el rendimiento

La manipulación del DOM es una operación costosa en términos de rendimiento. Cada vez que se modifica el DOM, el navegador debe recalcular la disposición de los elementos (reflow) y volver a pintar la pantalla (repaint).

// Enfoque ineficiente (múltiples manipulaciones del DOM)
for (let i = 0; i < 100; i++) {
  const paragraph = document.createElement('p');
  paragraph.textContent = `Paragraph ${i}`;
  document.body.appendChild(paragraph); // Causa reflow en cada iteración
}

// Enfoque optimizado (manipulación única del DOM)
const fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
  const paragraph = document.createElement('p');
  paragraph.textContent = `Paragraph ${i}`;
  fragment.appendChild(paragraph);
}
document.body.appendChild(fragment); // Un solo reflow al final

Esta característica ha llevado al desarrollo de bibliotecas y frameworks como React, Vue o Angular, que implementan DOM virtuales o sistemas de renderizado optimizados para minimizar las manipulaciones directas del DOM.

El DOM vs. HTML

Es crucial entender que el DOM no es exactamente igual al código HTML original. El DOM:

  • Corrige automáticamente errores en el HTML
  • Añade elementos implícitos que pueden omitirse en HTML (como <tbody> en tablas)
  • Representa el estado actual de la página, que puede haber cambiado desde la carga inicial
// HTML original: <div></div>
// El DOM corrige automáticamente y representa:
console.log(document.querySelector('div').outerHTML); // <div></div>

// HTML original con error: <p>Texto<p>
// El DOM corrige y representa:
// <p>Texto</p><p></p>

Esta capacidad de representar y corregir el documento HTML es fundamental para entender cómo JavaScript interactúa con las páginas web a través del DOM.

Anatomía del árbol de nodos: Tipos de nodos y estructura jerárquica del documento

El DOM representa un documento HTML como una estructura de árbol donde cada parte del documento se convierte en un nodo. Esta organización jerárquica permite navegar eficientemente por el documento y manipular sus elementos de forma precisa.

Estructura jerárquica del DOM

Cuando un navegador procesa un documento HTML, construye una representación en memoria organizada como un árbol invertido. En la cima de esta estructura se encuentra el nodo document, que actúa como raíz de todo el árbol. A partir de ahí, se ramifica siguiendo la estructura anidada del HTML original.

Tomemos un HTML más completo y veamos su representación DOM:

<!DOCTYPE html>
<html>
<head>
  <title>Mi Página</title>
  <meta charset="utf-8">
</head>
<body>
  <header>
    <h1>Bienvenidos</h1>
  </header>
  <main>
    <p>Este es un <a href="#">enlace</a> de ejemplo.</p>
  </main>
</body>
</html>

Su representación en el árbol DOM sería:

document
  ├── DOCTYPE html
  └── html (elemento raíz)
      ├── head
      │   ├── title
      │   │   └── "Mi Página" (texto)
      │   └── meta charset="utf-8"
      └── body
          ├── header
          │   └── h1
          │       └── "Bienvenidos" (texto)
          └── main
              └── p
                  ├── "Este es un " (texto)
                  ├── a href="#"
                  │   └── "enlace" (texto)
                  └── " de ejemplo." (texto)

Esta estructura permite relaciones familiares entre nodos:

  • Nodo padre: El nodo que contiene directamente a otro nodo
  • Nodo hijo: Cualquier nodo contenido directamente dentro de otro
  • Nodos hermanos: Nodos que comparten el mismo padre
  • Descendientes: Todos los nodos contenidos dentro de un nodo (hijos, nietos, etc.)
  • Ancestros: Todos los nodos que contienen a un nodo (padre, abuelo, etc.)

Tipos de nodos en el DOM

El DOM define diferentes tipos de nodos, cada uno representado por una clase distinta en el sistema de objetos del DOM. Los más comunes son:

  1. Nodos de elemento (Element Node): Representan las etiquetas HTML como <div>, <p>, <span>. Son instancias de la clase Element y sus subclases.
  2. Nodos de texto (Text Node): Contienen el texto dentro de los elementos. Por ejemplo, en <p>Hola mundo</p>, "Hola mundo" es un nodo de texto hijo del elemento <p>.
  3. Nodos de atributo (Attribute Node): Representan los atributos de los elementos HTML como class, id o src.
  4. Nodos de comentario (Comment Node): Contienen los comentarios HTML (<!-- comentario -->).
  5. Nodo documento (Document Node): El nodo raíz que representa el documento entero.
  6. Nodo de tipo documento (DocumentType Node): Representa la declaración del tipo de documento (<!DOCTYPE html>).

Podemos identificar estos tipos de nodos mediante la propiedad nodeType, que devuelve un número representando el tipo de nodo:

// Explorando tipos de nodos
const element = document.querySelector('div');     // Nodo de elemento
const text = element.firstChild;                  // Posible nodo de texto
const comment = document.createComment('Nota');   // Nodo de comentario

console.log(element.nodeType);   // 1 (ELEMENT_NODE)
console.log(text.nodeType);      // 3 (TEXT_NODE) si el primer hijo es texto
console.log(document.nodeType);  // 9 (DOCUMENT_NODE)

Esta organización en tipos de nodos es otro ejemplo de cómo el DOM utiliza conceptos de POO, con cada tipo de nodo siendo una clase especializada con propiedades y comportamientos específicos.

El DOM proporciona propiedades de navegación que permiten moverse entre nodos relacionados:

// Propiedades de navegación básicas
const parent = element.parentNode; // Nodo padre
const firstChild = element.firstChild; // Primer hijo (puede ser texto)
const lastChild = element.lastChild; // Último hijo
const nextSibling = element.nextSibling; // Hermano siguiente
const previousSibling = element.previousSibling; // Hermano anterior

// Propiedades que solo navegan entre elementos (ignorando nodos de texto y comentarios)
const firstElementChild = element.firstElementChild; // Primer elemento hijo
const children = element.children; // Colección de elementos hijos
const nextElementSibling = element.nextElementSibling; // Siguiente elemento hermano

Veamos un ejemplo visual de cómo usar estas propiedades de navegación. Considerando este HTML:

<ul id="lista">
  <li>Primero</li>
  <li>Segundo</li>
  <li>Tercero</li>
</ul>

Podemos navegar por su estructura DOM:

const lista = document.getElementById('lista');
const primerItem = lista.firstElementChild;      // <li>Primero</li>
const segundoItem = primerItem.nextElementSibling; // <li>Segundo</li>
const tercerItem = lista.lastElementChild;       // <li>Tercero</li>

Colecciones de nodos

El DOM utiliza colecciones especiales para representar grupos de nodos relacionados:

  • NodeList: Colección de nodos devuelta por métodos como querySelectorAll(). Puede ser estática o dinámica.
  • HTMLCollection: Colección de elementos HTML devuelta por propiedades como children o métodos como getElementsByClassName(). Siempre es dinámica.
// NodeList estática (no se actualiza si el DOM cambia)
const parrafos = document.querySelectorAll('p');

// HTMLCollection dinámica (se actualiza automáticamente)
const elementosActivos = document.getElementsByClassName('active');

// Si añadimos un nuevo elemento con clase "active":
const nuevoElemento = document.createElement('div');
nuevoElemento.className = 'active';
document.body.appendChild(nuevoElemento);

console.log(elementosActivos.length); // Aumenta (refleja el cambio)

Es importante notar que aunque estas colecciones se parecen a arrays, son objetos especiales con propiedades y métodos limitados. Para trabajar con ellas como arrays completos, podemos convertirlas:

// Convertir NodeList a Array
const parrafosArray = Array.from(document.querySelectorAll('p'));
// o
const parrafosArray2 = [...document.querySelectorAll('p')];

Nodos especiales y su función

Algunos nodos tienen funciones específicas en la estructura del documento:

  • El nodo documentElement (document.documentElement) representa el elemento <html>, la raíz del contenido.
  • Los nodos head (document.head) y body (document.body) proporcionan acceso directo a estas secciones.
  • Los nodos de fragmento (DocumentFragment) permiten construir estructuras DOM complejas fuera del árbol principal, mejorando el rendimiento.

El objeto document: Punto de entrada y métodos globales para interactuar con la página

El objeto document representa el punto de entrada principal al árbol DOM y proporciona la interfaz fundamental para interactuar con el contenido de una página web. Este objeto es una instancia de la interfaz Document y está disponible globalmente en cualquier script que se ejecute en un navegador.

Como vimos en nuestras lecciones sobre objetos en JavaScript, podemos pensar en document como un objeto complejo con propiedades y métodos específicos:

// Algunas propiedades del objeto document
console.log(document.title);     // El título de la página
console.log(document.URL);       // La URL completa
console.log(document.doctype);   // El tipo de documento (<!DOCTYPE>)
console.log(document.readyState); // Estado de carga del documento

Selección de elementos: Encontrando objetos en el árbol DOM

El objeto document proporciona métodos para seleccionar elementos del DOM, esencialmente permitiéndonos buscar objetos específicos en el árbol:

// Métodos de selección modernos
const elemento = document.getElementById('miId');          // Elemento único con el ID especificado
const primerCoincidencia = document.querySelector('.miClase'); // Primer elemento que coincide con el selector
const todasCoincidencias = document.querySelectorAll('p');     // Todos los elementos que coinciden

// Ejemplos de selectores CSS avanzados
const elementosActivos = document.querySelectorAll('[data-estado="activo"]');
const itemsImpares = document.querySelectorAll('li:nth-child(odd)');

Estos métodos actúan como "buscadores" que recorren el árbol DOM para encontrar los elementos que necesitamos.

Creación y manipulación de elementos

Uno de los usos más poderosos del DOM es la capacidad de crear y manipular elementos dinámicamente. Aquí es donde realmente vemos cómo los elementos DOM son objetos JavaScript con propiedades y métodos:

// Crear un nuevo elemento (un objeto de tipo HTMLDivElement)
const nuevoDiv = document.createElement('div');

// Modificar sus propiedades
nuevoDiv.id = 'contenedor';
nuevoDiv.className = 'contenedor principal';
nuevoDiv.textContent = 'Este es un div creado dinámicamente';

// Añadir estilos (accediendo a su propiedad style, que también es un objeto)
nuevoDiv.style.color = 'blue';
nuevoDiv.style.backgroundColor = '#f0f0f0';
nuevoDiv.style.padding = '10px';

// Añadir al DOM
document.body.appendChild(nuevoDiv);

Observa cómo tratamos al elemento div como un objeto, accediendo y modificando sus propiedades (id, className, textContent, style).

Ejemplo visual: Del HTML al DOM y la manipulación con JavaScript

Para entender la relación entre HTML, DOM y JavaScript, veamos un ejemplo completo:

HTML inicial:

<div id="app">
  <h1>Mi Aplicación</h1>
  <ul class="lista">
    <li>Item 1</li>
    <li>Item 2</li>
  </ul>
</div>

Estructura DOM resultante:

div#app
 ├── h1
 │   └── "Mi Aplicación" (texto)
 └── ul.lista
     ├── li
     │   └── "Item 1" (texto)
     └── li
         └── "Item 2" (texto)

Código JavaScript para manipular esta estructura:

// Acceder a elementos existentes
const app = document.getElementById('app');
const titulo = app.querySelector('h1');
const lista = app.querySelector('.lista');

// Modificar contenido
titulo.textContent = 'Mi Aplicación Actualizada';

// Añadir nuevo elemento
const nuevoItem = document.createElement('li');
nuevoItem.textContent = 'Item 3';
lista.appendChild(nuevoItem);

// El DOM ahora representa:
// div#app
//  ├── h1
//  │   └── "Mi Aplicación Actualizada" (texto)
//  └── ul.lista
//      ├── li
//      │   └── "Item 1" (texto)
//      ├── li
//      │   └── "Item 2" (texto)
//      └── li
//          └── "Item 3" (texto)

Gestión de eventos a nivel de documento

Los eventos son la forma en que el DOM permite que la página responda a las acciones del usuario. Siguiendo el paradigma de programación orientada a objetos, los eventos se implementan mediante el patrón Observer:

// Añadir un "escuchador" a un elemento
const boton = document.querySelector('button');

boton.addEventListener('click', function() {
  console.log('¡El botón fue clicado!');
});

// También podemos añadir escuchadores a nivel de documento
document.addEventListener('keydown', function(evento) {
  console.log('Tecla presionada:', evento.key);
});

Este patrón de evento-handler es similar a cómo implementamos comportamientos en objetos en la programación orientada a objetos.

Propiedades y métodos para trabajar con formularios

El objeto document proporciona acceso directo a los formularios del documento:

// Acceso a formularios
const allForms = document.forms; // HTMLCollection de todos los formularios
const formById = document.forms.formId; // Acceso por ID
const formByIndex = document.forms[0]; // Acceso por índice

// Acceso a elementos de formulario
const inputElement = document.forms.loginForm.username;

Métodos para trabajar con la estructura del documento

El objeto document proporciona métodos para importar y adoptar nodos entre documentos:

// Importar un nodo desde otro documento
const importedNode = document.importNode(externalNode, true); // true para importar descendientes

// Adoptar un nodo de otro documento
const adoptedNode = document.adoptNode(externalNode);

Propiedades relacionadas con el estado de carga

El objeto document proporciona información sobre el estado de carga de la página:

// Comprobar si el DOM está listo
if (document.readyState === 'loading') {
  console.log('El documento está cargando');
} else {
  console.log('El documento ha terminado de cargar');
}

// Escuchar cambios en el estado de carga
document.addEventListener('readystatechange', () => {
  console.log('Estado del documento:', document.readyState);
});

Métodos para trabajar con la selección de texto

El objeto document permite gestionar la selección de texto en la página:

// Obtener la selección actual
const selection = document.getSelection();
console.log('Texto seleccionado:', selection.toString());

// Crear un rango
const range = document.createRange();
const paragraph = document.querySelector('p');
range.selectNodeContents(paragraph); // Selecciona todo el contenido del párrafo

// Aplicar un rango a la selección
selection.removeAllRanges();
selection.addRange(range);

El objeto document es el núcleo de la interacción con el DOM, proporcionando los métodos y propiedades fundamentales que permiten a JavaScript manipular dinámicamente el contenido, estructura y comportamiento de una página web.

Aprende JavaScript online

Otras lecciones de JavaScript

Accede a todas las lecciones de JavaScript y aprende con ejemplos prácticos de código y ejercicios de programación con IDE web sin instalar nada.

Introducción A Javascript

JavaScript

Introducción Y Entorno

Tipos De Datos

JavaScript

Sintaxis

Variables

JavaScript

Sintaxis

Operadores

JavaScript

Sintaxis

Estructuras De Control

JavaScript

Sintaxis

Funciones

JavaScript

Sintaxis

Funciones Cierre (Closure)

JavaScript

Sintaxis

Métodos De Strings

JavaScript

Sintaxis

Funciones Cierre (Closure)

JavaScript

Sintaxis

Operadores Avanzados

JavaScript

Sintaxis

Funciones

JavaScript

Sintaxis

Expresiones Regulares

JavaScript

Sintaxis

Estructuras De Control

JavaScript

Sintaxis

Arrays Y Métodos

JavaScript

Estructuras De Datos

Conjuntos Con Set

JavaScript

Estructuras De Datos

Mapas Con Map

JavaScript

Estructuras De Datos

Conjuntos Con Set

JavaScript

Estructuras De Datos

Funciones Flecha

JavaScript

Programación Funcional

Filtrado Con Filter() Y Find()

JavaScript

Programación Funcional

Transformación Con Map()

JavaScript

Programación Funcional

Reducción Con Reduce()

JavaScript

Programación Funcional

Funciones Flecha

JavaScript

Programación Funcional

Transformación Con Map()

JavaScript

Programación Funcional

Inmutabilidad Y Programación Funcional Pura

JavaScript

Programación Funcional

Clases Y Objetos

JavaScript

Programación Orientada A Objetos

Excepciones

JavaScript

Programación Orientada A Objetos

Encapsulación

JavaScript

Programación Orientada A Objetos

Herencia

JavaScript

Programación Orientada A Objetos

Polimorfismo

JavaScript

Programación Orientada A Objetos

This Y Contexto

JavaScript

Programación Orientada A Objetos

Patrón De Módulos Y Namespace

JavaScript

Programación Orientada A Objetos

Prototipos Y Cadena De Prototipos

JavaScript

Programación Orientada A Objetos

Destructuring De Objetos Y Arrays

JavaScript

Programación Orientada A Objetos

Manipulación Dom

JavaScript

Dom

Selección De Elementos Dom

JavaScript

Dom

Modificación De Elementos Dom

JavaScript

Dom

Eventos Del Dom

JavaScript

Dom

Localstorage Y Sessionstorage

JavaScript

Dom

Bom (Browser Object Model)

JavaScript

Dom

Callbacks

JavaScript

Programación Asíncrona

Promises

JavaScript

Programación Asíncrona

Async / Await

JavaScript

Programación Asíncrona

Api Fetch

JavaScript

Programación Asíncrona

Naturaleza De Js Y Event Loop

JavaScript

Programación Asíncrona

Websockets

JavaScript

Programación Asíncrona

Módulos En Es6

JavaScript

Construcción

Configuración De Bundlers Como Vite

JavaScript

Construcción

Eslint Y Calidad De Código

JavaScript

Construcción

Npm Y Dependencias

JavaScript

Construcción

Introducción A Pruebas En Js

JavaScript

Testing

Pruebas Unitarias

JavaScript

Testing

Accede GRATIS a JavaScript y certifícate

Ejercicios de programación de JavaScript

Evalúa tus conocimientos de esta lección Introducción al DOM con nuestros retos de programación de tipo Test, Puzzle, Código y Proyecto con VSCode, guiados por IA.

Excepciones

JavaScript
Test

Transformación con map()

JavaScript
Código

Arrays y Métodos

JavaScript
Código

Reto Métodos de Strings

JavaScript
Código

Transformación con map()

JavaScript
Puzzle

Funciones flecha

JavaScript
Test

Selección de elementos DOM

JavaScript
Puzzle

API Fetch

JavaScript
Código

Encapsulación

JavaScript
Test

Mapas con Map

JavaScript
Código

Creación y uso de variables

JavaScript
Puzzle

Polimorfismo

JavaScript
Puzzle

Reto Funciones flecha

JavaScript
Código

Tipos de datos

JavaScript
Puzzle

Reto Operadores avanzados

JavaScript
Código

Reto Estructuras de control

JavaScript
Código

Estructuras de control

JavaScript
Puzzle

Pruebas unitarias

JavaScript
Proyecto

Inmutabilidad y programación funcional pura

JavaScript
Código

Funciones flecha

JavaScript
Puzzle

Polimorfismo

JavaScript
Test

Reto Polimorfismo

JavaScript
Código

Array

JavaScript
Código

Transformación con map()

JavaScript
Test

Reto Variables

JavaScript
Código

Gestor de tareas con JavaScript

JavaScript
Proyecto

Proyecto Modificación de elementos DOM

JavaScript
Proyecto

Manipulación DOM

JavaScript
Test

Funciones

JavaScript
Test

Conjuntos con Set

JavaScript
Código

Reto Prototipos y cadena de prototipos

JavaScript
Código

Reto Encapsulación

JavaScript
Código

Funciones flecha

JavaScript
Código

Async / Await

JavaScript
Código

Reto Excepciones

JavaScript
Código

Reto Filtrado con filter() y find()

JavaScript
Código

Reto Promises

JavaScript
Código

Creación y uso de variables

JavaScript
Test

Excepciones

JavaScript
Puzzle

Promises

JavaScript
Código

Funciones cierre (closure)

JavaScript
Test

Reto Herencia

JavaScript
Código

Herencia

JavaScript
Puzzle

Reto Async / Await

JavaScript
Código

Proyecto Eventos del DOM

JavaScript
Proyecto

Herencia

JavaScript
Test

Selección de elementos DOM

JavaScript
Test

Modificación de elementos DOM

JavaScript
Test

Reto Clases y objetos

JavaScript
Código

Filtrado con filter() y find()

JavaScript
Test

Funciones cierre (closure)

JavaScript
Puzzle

Reto Destructuring de objetos y arrays

JavaScript
Código

Callbacks

JavaScript
Código

Funciones

JavaScript
Puzzle

Mapas con Map

JavaScript
Test

Reducción con reduce()

JavaScript
Test

Callbacks

JavaScript
Puzzle

Manipulación DOM

JavaScript
Puzzle

Introducción al DOM

JavaScript
Proyecto

Reto Funciones

JavaScript
Código

Reto Funciones cierre (closure)

JavaScript
Código

Promises

JavaScript
Test

Reto Reducción con reduce()

JavaScript
Código

Async / Await

JavaScript
Test

Reto Estructuras de control

JavaScript
Código

Eventos del DOM

JavaScript
Puzzle

Introducción a JavaScript

JavaScript
Puzzle

Async / Await

JavaScript
Puzzle

Promises

JavaScript
Puzzle

Selección de elementos DOM

JavaScript
Proyecto

Filtrado con filter() y find()

JavaScript
Código

Callbacks

JavaScript
Test

Creación de clases y objetos Restaurante

JavaScript
Código

Reducción con reduce()

JavaScript
Código

Filtrado con filter() y find()

JavaScript
Puzzle

Reducción con reduce()

JavaScript
Puzzle

Conjuntos con Set

JavaScript
Puzzle

Herencia de clases

JavaScript
Código

Eventos del DOM

JavaScript
Test

Clases y objetos

JavaScript
Puzzle

Modificación de elementos DOM

JavaScript
Puzzle

Mapas con Map

JavaScript
Puzzle

Proyecto carrito compra agoodshop

JavaScript
Proyecto

Introducción a JavaScript

JavaScript
Test

Reto Mapas con Map

JavaScript
Código

Funciones

JavaScript
Código

Proyecto administrador de contactos

JavaScript
Proyecto

Reto Expresiones regulares

JavaScript
Código

Tipos de datos

JavaScript
Test

Clases y objetos

JavaScript
Test

Array

JavaScript
Test

Conjuntos con Set

JavaScript
Test

Array

JavaScript
Puzzle

Encapsulación

JavaScript
Puzzle

Clases y objetos

JavaScript
Código

Uso de operadores

JavaScript
Puzzle

Uso de operadores

JavaScript
Test

Estructuras de control

JavaScript
Test

Proyecto Manipulación DOM

JavaScript
Proyecto

En esta lección

Objetivos de aprendizaje de esta lección

  1. Comprender la estructura y funciones del Document Object Model (DOM).
  2. Aprender a acceder y modificar elementos HTML usando JavaScript.
  3. Conocer la jerarquía y tipos de nodos en el DOM.
  4. Optimizar las manipulaciones del DOM para mejorar el rendimiento.
  5. Identificar los estándares y versiones del DOM soportados por navegadores.