S08L01 - El Objeto DOM

html

Comprendiendo el DOM: Una Guía Completa para Principiantes y Desarrolladores
Tabla de Contenidos

Introducción al DOM ...................1
Estructura del DOM .......................3
Navegando por el Árbol del DOM .................6
Modificando el DOM con JavaScript .......9
Métodos y Propiedades del DOM ..........12
Ejemplos Prácticos ...........................15
Conclusión .............................................18


Introducción al DOM
Bienvenido a esta guía completa sobre el Document Object Model (DOM). Ya seas un principiante que se adentra en el mundo del desarrollo web o un desarrollador experimentado que busca repasar sus conocimientos, comprender el DOM es crucial para crear páginas web dinámicas e interactivas.
¿Qué es el DOM?
El DOM es una representación de objetos de tus documentos HTML o XML, sirviendo como un puente entre las páginas web y lenguajes de programación como JavaScript. Organiza una página web en una estructura de árbol jerárquico, permitiendo a los desarrolladores navegar, modificar y manipular el contenido dinámicamente.
Importancia del DOM

Interactividad: Mejora la experiencia del usuario permitiendo actualizaciones dinámicas de contenido sin recargar la página.
Flexibilidad: Permite cambios en tiempo real en la estructura, estilo y contenido de la página web.
Integración: Sirve como columna vertebral para que JavaScript interactúe y modifique las páginas web.

Pros y Contras de Usar el DOM


Pros
Contras


Facilita la manipulación de contenido dinámico
Puede llevar a problemas de rendimiento si se usa incorrectamente


Mejora la interacción del usuario
La complejidad aumenta con documentos más grandes


Permite actualizaciones en tiempo real sin recargas
Requiere comprensión de estructuras de árbol


Cuándo y Dónde Usar el DOM

Aplicaciones Web Dinámicas: Al construir características interactivas como formularios, juegos o paneles de control.
Actualizaciones de Contenido en Tiempo Real: Para aplicaciones que requieren actualizaciones de datos en vivo, como aplicaciones de chat o feeds en vivo.
Manipulación de Contenido de la Página Web: Cuando necesitas agregar, eliminar o modificar elementos sobre la marcha basado en acciones o eventos del usuario.


Estructura del DOM
Comprender la estructura del DOM es fundamental para manipular eficazmente las páginas web. El DOM representa el documento como una estructura de árbol, donde cada nodo es un objeto que representa una parte del documento.
El Árbol del DOM
En el núcleo del DOM se encuentra el DOM Tree, una estructura jerárquica similar a un árbol que refleja la estructura de tu documento HTML.
Ejemplo de Árbol DOM




		
		
			
			
Java
			
			Document
│
├── HTML
    │
    ├── Head
    │   └── Title
    │
    └── Body
        ├── H1
        │   └── Text Node
        └── A Tag
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
				
						Document
│
├── HTML
    │
    ├── Head
    │   └── Title
    │
    └── Body
        ├── H1
        │   └── Text Node
        └── A Tag
					
				
			
		


Componentes Clave

Document: El nodo raíz que representa el documento HTML o XML completo.
Element Nodes: Representan elementos HTML como <html>, <head>, <body>, <h1>, <a>, etc.
Text Nodes: Contienen el contenido de texto dentro de los elementos.
Attributes: Propiedades de los elementos, como class, id, href, etc.

Representación Jerárquica
Cada elemento en el árbol del DOM puede tener nodos hijos, nodos padres y nodos hermanos, creando un marco estructurado y navegable.

Navegando por el Árbol del DOM
La manipulación efectiva del DOM se basa en la capacidad de navegar a través del árbol del DOM para acceder y modificar elementos específicos.
Accediendo a los Nodos
JavaScript proporciona varios métodos para acceder a los nodos dentro del DOM:

document.getElementById(): Selecciona un elemento por su id.
document.getElementsByClassName(): Selecciona todos los elementos con una class específica.
document.getElementsByTagName(): Selecciona todos los elementos con un nombre de etiqueta específico.
document.querySelector(): Selecciona el primer elemento que coincide con un selector CSS.
document.querySelectorAll(): Selecciona todos los elementos que coinciden con un selector CSS.

Recorriendo el DOM
Una vez que has seleccionado un nodo, puedes recorrer sus relaciones:

Parent Node: Usa parentNode para acceder al padre de un elemento.
Child Nodes: Usa childNodes para acceder a todos los nodos hijos o children para acceder solo a elementos hijos.
Sibling Nodes: Usa nextSibling y previousSibling para navegar entre hermanos.

Ejemplo: Accediendo y Recorriendo Nodos




		
		
			
			
Java
			
			// Seleccionando el elemento body
const body = document.body;

// Accediendo al nodo padre de body (que es HTML)
const parent = body.parentNode;

// Accediendo al primer hijo de body (por ejemplo, una etiqueta h1)
const firstChild = body.firstElementChild;

// Registrando los elementos
console.log(parent);      // Outputs: <html>...</html>
console.log(firstChild);  // Outputs: <h1>...</h1>
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
				
						// Seleccionando el elemento body
const body = document.body;
 
// Accediendo al nodo padre de body (que es HTML)
const parent = body.parentNode;
 
// Accediendo al primer hijo de body (por ejemplo, una etiqueta h1)
const firstChild = body.firstElementChild;
 
// Registrando los elementos
console.log(parent);      // Outputs: <html>...</html>
console.log(firstChild);  // Outputs: <h1>...</h1>
					
				
			
		



Modificando el DOM con JavaScript
JavaScript aprovecha el DOM para actualizar dinámicamente el contenido, la estructura y el estilo de las páginas web. Esta sección explora cómo crear, modificar y manipular elementos del DOM.
Creando Elementos
Usa document.createElement() para crear nuevos elementos.




		
		
			
			
Java
			
			// Creando un nuevo elemento de párrafo
const newParagraph = document.createElement('p');
newParagraph.textContent = 'Este es un nuevo párrafo.';
			
				
					
				
					1
2
3
				
						// Creando un nuevo elemento de párrafo
const newParagraph = document.createElement('p');
newParagraph.textContent = 'Este es un nuevo párrafo.';
					
				
			
		


Agregando Elementos
Usa appendChild() o append() para añadir el elemento recién creado al DOM.




		
		
			
			
Java
			
			// Agregando el nuevo párrafo al body
document.body.appendChild(newParagraph);
			
				
					
				
					1
2
				
						// Agregando el nuevo párrafo al body
document.body.appendChild(newParagraph);
					
				
			
		


Modificando Elementos Existentes
Cambia el contenido o los atributos de los elementos existentes.




		
		
			
			
Java
			
			// Cambiando el texto de un elemento h1 existente
const header = document.querySelector('h1');
header.textContent = 'Encabezado Actualizado';

// Modificando un atributo de una etiqueta de ancla
const link = document.querySelector('a');
link.setAttribute('href', 'https://www.example.com');
			
				
					
				
					1
2
3
4
5
6
7
				
						// Cambiando el texto de un elemento h1 existente
const header = document.querySelector('h1');
header.textContent = 'Encabezado Actualizado';
 
// Modificando un atributo de una etiqueta de ancla
const link = document.querySelector('a');
link.setAttribute('href', 'https://www.example.com');
					
				
			
		


Eliminando Elementos
Usa removeChild() o remove() para eliminar elementos del DOM.




		
		
			
			
Java
			
			// Eliminando el párrafo recién agregado
document.body.removeChild(newParagraph);

// Alternativamente, usando remove()
newParagraph.remove();
			
				
					
				
					1
2
3
4
5
				
						// Eliminando el párrafo recién agregado
document.body.removeChild(newParagraph);
 
// Alternativamente, usando remove()
newParagraph.remove();
					
				
			
		



Métodos y Propiedades del DOM
El DOM proporciona una gran cantidad de métodos y propiedades que permiten a los desarrolladores interactuar y manipular eficazmente las páginas web.
Métodos del DOM Comúnmente Usados


Método
Descripción


getElementById(id)
Recupera un elemento por su id.


getElementsByClassName(class)
Recupera todos los elementos con la class especificada.


getElementsByTagName(tag)
Recupera todos los elementos con la etiqueta especificada.


querySelector(selector)
Recupera el primer elemento que coincide con el selector.


querySelectorAll(selector)
Recupera todos los elementos que coincidan con el selector.


createElement(tag)
Crea un nuevo elemento con el nombre de etiqueta especificado.


appendChild(child)
Agrega un nodo hijo al nodo padre especificado.


removeChild(child)
Elimina un nodo hijo del nodo padre especificado.


setAttribute(attr, value)
Establece el valor de un atributo en el elemento especificado.


Propiedades del DOM Comúnmente Usadas


Propiedad
Descripción


innerHTML
Obtiene o establece el contenido HTML dentro de un elemento.


textContent
Obtiene o establece el contenido de texto dentro de un elemento.


parentNode
Hace referencia al nodo padre de un elemento.


childNodes
Hace referencia a todos los nodos hijos de un elemento.


nextSibling
Hace referencia al siguiente nodo hermano de un elemento.


previousSibling
Hace referencia al nodo hermano anterior de un elemento.


attributes
Hace referencia a todos los atributos de un elemento.


style
Permite la modificación de los estilos en línea de un elemento.



Ejemplos Prácticos
Para solidificar tu comprensión del DOM, vamos a recorrer un ejemplo práctico que demuestra cómo acceder, modificar y manipular elementos del DOM.
Escenario de Ejemplo
Imagina que tienes la siguiente estructura HTML:




		
		
			
			
Java
			
			<!DOCTYPE html>
<html>
<head>
    <title>Mi Sitio Web</title>
</head>
<body>
    <h1>Bienvenido a Mi Sitio Web</h1>
    <p id="intro">Este es un párrafo introductorio.</p>
    <a href="https://www.original.com" id="myLink">Visitar Original</a>
</body>
</html>
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
				
						<!DOCTYPE html>
<html>
<head>
    <title>Mi Sitio Web</title>
</head>
<body>
    <h1>Bienvenido a Mi Sitio Web</h1>
    <p id="intro">Este es un párrafo introductorio.</p>
    <a href="https://www.original.com" id="myLink">Visitar Original</a>
</body>
</html>
					
				
			
		


Objetivo

Cambiar el texto del encabezado.
Actualizar el contenido del párrafo.
Modificar la URL y el texto del enlace.
Agregar un nuevo párrafo dinámicamente.

Implementación Paso a Paso
1. Acceder y Modificar el Encabezado




		
		
			
			
Java
			
			// Seleccionando el elemento h1
const heading = document.querySelector('h1');

// Actualizando el contenido de texto
heading.textContent = '¡Descubre el Asombroso Desarrollo Web!';
			
				
					
				
					1
2
3
4
5
				
						// Seleccionando el elemento h1
const heading = document.querySelector('h1');
 
// Actualizando el contenido de texto
heading.textContent = '¡Descubre el Asombroso Desarrollo Web!';
					
				
			
		


2. Actualizar el Contenido del Párrafo




		
		
			
			
Java
			
			// Seleccionando el párrafo por su ID
const paragraph = document.getElementById('intro');

// Cambiando el contenido de texto
paragraph.textContent = 'Aprende cómo manipular el DOM para crear páginas web dinámicas.';
			
				
					
				
					1
2
3
4
5
				
						// Seleccionando el párrafo por su ID
const paragraph = document.getElementById('intro');
 
// Cambiando el contenido de texto
paragraph.textContent = 'Aprende cómo manipular el DOM para crear páginas web dinámicas.';
					
				
			
		


3. Modificar la URL y el Texto del Enlace




		
		
			
			
Java
			
			// Seleccionando la etiqueta de ancla por su ID
const link = document.getElementById('myLink');

// Actualizando el atributo href
link.setAttribute('href', 'https://www.example.com');

// Cambiando el texto del enlace
link.textContent = 'Visitar Example';
			
				
					
				
					1
2
3
4
5
6
7
8
				
						// Seleccionando la etiqueta de ancla por su ID
const link = document.getElementById('myLink');
 
// Actualizando el atributo href
link.setAttribute('href', 'https://www.example.com');
 
// Cambiando el texto del enlace
link.textContent = 'Visitar Example';
					
				
			
		


4. Agregar un Nuevo Párrafo Dinámicamente




		
		
			
			
Java
			
			// Creando un nuevo elemento de párrafo
const newParagraph = document.createElement('p');

// Estableciendo el contenido de texto
newParagraph.textContent = 'Este párrafo fue añadido dinámicamente usando JavaScript.';

// Agregando el nuevo párrafo al body
document.body.appendChild(newParagraph);
			
				
					
				
					1
2
3
4
5
6
7
8
				
						// Creando un nuevo elemento de párrafo
const newParagraph = document.createElement('p');
 
// Estableciendo el contenido de texto
newParagraph.textContent = 'Este párrafo fue añadido dinámicamente usando JavaScript.';
 
// Agregando el nuevo párrafo al body
document.body.appendChild(newParagraph);
					
				
			
		


Ejemplo Completo de Código




		
		
			
			
Java
			
			<!DOCTYPE html>
<html>
<head>
    <title>Mi Sitio Web</title>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            // Acceder y Modificar el Encabezado
            const heading = document.querySelector('h1');
            heading.textContent = '¡Descubre el Asombroso Desarrollo Web!';

            // Actualizar el Contenido del Párrafo
            const paragraph = document.getElementById('intro');
            paragraph.textContent = 'Aprende cómo manipular el DOM para crear páginas web dinámicas.';

            // Modificar la URL y el Texto del Enlace
            const link = document.getElementById('myLink');
            link.setAttribute('href', 'https://www.example.com');
            link.textContent = 'Visitar Example';

            // Agregar un Nuevo Párrafo Dinámicamente
            const newParagraph = document.createElement('p');
            newParagraph.textContent = 'Este párrafo fue añadido dinámicamente usando JavaScript.';
            document.body.appendChild(newParagraph);
        });
    </script>
</head>
<body>
    <h1>Bienvenido a Mi Sitio Web</h1>
    <p id="intro">Este es un párrafo introductorio.</p>
    <a href="https://www.original.com" id="myLink">Visitar Original</a>
</body>
</html>
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
				
						<!DOCTYPE html>
<html>
<head>
    <title>Mi Sitio Web</title>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            // Acceder y Modificar el Encabezado
            const heading = document.querySelector('h1');
            heading.textContent = '¡Descubre el Asombroso Desarrollo Web!';
 
            // Actualizar el Contenido del Párrafo
            const paragraph = document.getElementById('intro');
            paragraph.textContent = 'Aprende cómo manipular el DOM para crear páginas web dinámicas.';
 
            // Modificar la URL y el Texto del Enlace
            const link = document.getElementById('myLink');
            link.setAttribute('href', 'https://www.example.com');
            link.textContent = 'Visitar Example';
 
            // Agregar un Nuevo Párrafo Dinámicamente
            const newParagraph = document.createElement('p');
            newParagraph.textContent = 'Este párrafo fue añadido dinámicamente usando JavaScript.';
            document.body.appendChild(newParagraph);
        });
    </script>
</head>
<body>
    <h1>Bienvenido a Mi Sitio Web</h1>
    <p id="intro">Este es un párrafo introductorio.</p>
    <a href="https://www.original.com" id="myLink">Visitar Original</a>
</body>
</html>
					
				
			
		


Explicación del Resultado
Después de que JavaScript se ejecuta:

El texto del <h1> cambia a "¡Descubre el Asombroso Desarrollo Web!"
El párrafo con id="intro" actualiza su contenido a "Aprende cómo manipular el DOM para crear páginas web dinámicas."
El atributo href de la etiqueta de ancla cambia a "https://www.example.com", y su texto se actualiza a "Visitar Example".
Se añade un nuevo párrafo al final del body con el texto "Este párrafo fue añadido dinámicamente usando JavaScript."


Conclusión
El Document Object Model (DOM) es un concepto esencial para cualquier persona involucrada en el desarrollo web. Proporciona una representación estructurada de los documentos web, permitiendo interacciones dinámicas y manipulación de contenido en tiempo real. Al dominar el DOM, puedes crear aplicaciones web más interactivas, receptivas y amigables para el usuario.
Puntos Clave

Estructura del DOM: Comprender la estructura similar a un árbol del DOM es fundamental para navegar y manipular páginas web.
Acceder a Elementos: Utiliza varios métodos del DOM para seleccionar y acceder a elementos específicos dentro de tu documento web.
Técnicas de Manipulación: Aprende cómo crear, modificar y eliminar elementos para mejorar la interactividad de tus páginas web.
Aplicación Práctica: Los ejemplos prácticos solidifican el conocimiento teórico, facilitando su aplicación en escenarios del mundo real.

Abraza el poder del DOM para elevar tus habilidades en desarrollo web y crear sitios web atractivos y dinámicos que se destaquen.
SEO Keywords: DOM, Document Object Model, desarrollo web, manipulación DOM con JavaScript, páginas web dinámicas, métodos del DOM, guía para principiantes del DOM, JavaScript para principiantes, manipulando el DOM, páginas web interactivas
Nota: Este artículo fue generado por IA.
Método	Descripción
getElementById(id)	Recupera un elemento por su `id`.
getElementsByClassName(class)	Recupera todos los elementos con la `class` especificada.
getElementsByTagName(tag)	Recupera todos los elementos con la etiqueta especificada.
querySelector(selector)	Recupera el primer elemento que coincide con el selector.
querySelectorAll(selector)	Recupera todos los elementos que coincidan con el selector.
createElement(tag)	Crea un nuevo elemento con el nombre de etiqueta especificado.
appendChild(child)	Agrega un nodo hijo al nodo padre especificado.
removeChild(child)	Elimina un nodo hijo del nodo padre especificado.
setAttribute(attr, value)	Establece el valor de un atributo en el elemento especificado.
Propiedad	Descripción
innerHTML	Obtiene o establece el contenido HTML dentro de un elemento.
textContent	Obtiene o establece el contenido de texto dentro de un elemento.
parentNode	Hace referencia al nodo padre de un elemento.
childNodes	Hace referencia a todos los nodos hijos de un elemento.
nextSibling	Hace referencia al siguiente nodo hermano de un elemento.
previousSibling	Hace referencia al nodo hermano anterior de un elemento.
attributes	Hace referencia a todos los atributos de un elemento.
style	Permite la modificación de los estilos en línea de un elemento.
Pros	Contras
Facilita la manipulación de contenido dinámico	Puede llevar a problemas de rendimiento si se usa incorrectamente
Mejora la interacción del usuario	La complejidad aumenta con documentos más grandes
Permite actualizaciones en tiempo real sin recargas	Requiere comprensión de estructuras de árbol