🎆

S4. Manipulando el DOM

SUMARIO
4.1 Introducción al DOM: Entender qué es y por qué es importante.
4.2 Elementos del DOM: Nodos, elementos, atributos y texto.
4.3 Selección de elementos:

getElementById

getElementsByTagName

getElementsByClassName

querySelector

querySelectorAll

4.4 Manipulación de contenido:

innerText / textContent

innerHTML

outerHTML

4.5 Manipulación de atributos:

S4. Manipulando el DOM 1

 getAttribute

setAttribute

removeAttribute

hasAttribute

4.6 Manipulación avanzada de atributos:

classList (add, remove, toggle, contains)

4.7 Creación y eliminación de nodos:

createElement

removeChild

appendChild

insertBefore

4.8 Propiedades de estilo: Manipular CSS desde JavaScript.

4.9 Traversing the DOM: Navegar entre nodos padre, hijo, hermano, etc.
4.10 Manejo de eventos:

addEventListener

removeEventListener

Eventos comunes: click , input , submit , etc.

4.1 Introducción al DOM

Entender qué es y por qué es importante

4.1.1 ¿Qué es el DOM?

El DOM, o Document Object Model (Modelo de Objeto de Documento), es una
representación estructurada y en memoria de un documento web. Es una interfaz
de programación que permite a los scripts interactuar, modificar, y actualizar tanto
el contenido, estructura, y estilo de una página web en tiempo real.
Esencialmente, el DOM es el puente entre el contenido estático de una página

S4. Manipulando el DOM 2

 web (HTML y CSS) y las funcionalidades dinámicas proporcionadas por los
scripts, principalmente JavaScript.
Imagina el documento HTML como un árbol con ramas y hojas. Cada etiqueta
HTML representa un nodo en este árbol, y estos nodos pueden ser elementos,
atributos, texto, etc.

4.1.2 Importancia del DOM

1. Interactividad: Sin el DOM, las páginas web serían estáticas. A través de la
manipulación del DOM, las páginas pueden responder a acciones del usuario,
como clics, ingreso de texto, desplazamiento, entre otros, y cambiar su
contenido, estructura o apariencia en tiempo real.

2. Dinamismo: El DOM permite que las páginas web se actualicen sin necesidad
de recargar toda la página. Por ejemplo, cuando se publica un nuevo tweet en
Twitter o se recibe un nuevo mensaje en una aplicación de chat, solo se
actualiza una parte del contenido sin recargar toda la página.

3. Acceso y modificación: Gracias al DOM, los desarrolladores pueden

seleccionar, modificar, añadir o eliminar cualquier elemento o contenido de la
página usando JavaScript. Esto da una gran flexibilidad y potencia para crear
experiencias web ricas y personalizadas.

4. Integración con otras tecnologías: Las APIs web y otros servicios interactúan
con las páginas a través del DOM. Por ejemplo, una API de geolocalización
puede insertar un mapa en una página web actualizando el DOM.

5. Base para frameworks y bibliotecas: Herramientas modernas como React,

Angular, y Vue.js operan usando conceptos relacionados con el DOM (como el
Virtual DOM en React) para ofrecer experiencias de usuario más eficientes y
optimizadas.

El DOM es el corazón de la interactividad y dinamismo en la web. Es la estructura

que permite que las páginas web sean más que solo texto y gráficos estáticos. Al
entender cómo funciona el DOM y cómo manipularlo, los desarrolladores tienen el
poder de crear experiencias web más ricas, interactivas y dinámicas para los
usuarios.

S4. Manipulando el DOM 3

 4.2 Elementos del DOM: Nodos, elementos, atributos y
texto
El Document Object Model (DOM) representa una página web como una
estructura de árbol jerárquica. Esta estructura está compuesta por una variedad
de "nodos" que pueden representar diferentes partes y características de la
página. A continuación, vamos a desglosar los principales tipos de nodos que
encontramos en el DOM.

4.2.1 Nodos
Todo en el DOM es un nodo. Esto incluye elementos, atributos, texto y más. Los
nodos son la base de la estructura del DOM, y cada uno tiene un tipo específico.
Por ejemplo, un nodo de tipo "Element" representa una etiqueta HTML, mientras
que un nodo de tipo "Text" representa el texto dentro de una etiqueta.

4.2.2 Elementos
Los elementos son el tipo de nodo más común y representan las etiquetas HTML
en una página. Cada elemento tiene un nombre de etiqueta (como div , a , p ,
etc.), y puede tener hijos, que pueden ser otros elementos, texto, o una
combinación de ambos.
Ejemplo:

<p>This is a <strong>paragraph</strong>.</p>

Aquí, <p> y <strong> son elementos. El elemento <p> tiene como hijo tanto texto
("This is a") como otro elemento ( <strong> ).

4.2.3 Atributos
Los atributos son nodos que definen propiedades de un elemento,
proporcionando información adicional sobre ese elemento. Los atributos están
siempre asociados a un nodo de elemento y nunca existen por sí solos en el árbol
del DOM.

Ejemplo:

S4. Manipulando el DOM 4

 <a href="<https://www.example.com>" target="_blank">Visit Exa
mple</a>

En este caso, href y target son atributos del elemento <a> . El valor de href es
"https://www.example.com" y el valor de target es "_blank".

4.2.4 Texto
Los nodos de texto contienen el texto que está presente entre las etiquetas de un
elemento. En el DOM, cualquier texto que veas en una página web, incluso los
espacios y saltos de línea, está representado por un nodo de texto.

Retomando el ejemplo anterior:

<p>This is a <strong>paragraph</strong>.</p>

Aquí, "This is a " y "paragraph" son nodos de texto. Es importante notar que
"paragraph" está dentro de un elemento <strong> , pero sigue siendo un nodo de
texto.

Entender estos componentes básicos del DOM es esencial para cualquier persona
que trabaje en el desarrollo web. Los nodos, elementos, atributos y texto forman
la estructura fundamental de cualquier página web, y conocer cómo se relacionan
entre sí y cómo manipularlos con JavaScript es la clave para crear experiencias
web interactivas y dinámicas.

4.3 Selección de elementos en el DOM

La selección de elementos es uno de los primeros pasos para manipular y trabajar
con el DOM. JavaScript proporciona varios métodos para seleccionar nodos y
elementos del DOM. A continuación, se detallan algunos de los más comunes:

4.3.1 getElementById
Este método selecciona un elemento por su atributo id . Cada ID en un
documento HTML debe ser único, por lo que este método siempre devolverá un
único elemento o null si no se encuentra ningún elemento con ese ID.

S4. Manipulando el DOM 5

 Sintaxis:

document.getElementById(id)

Ejemplo:
Supongamos que tenemos el siguiente HTML:

<div id="myDiv">Hello, World!</div>

Podemos seleccionar el <div> usando:

const divElement = document.getElementById('myDiv');

4.3.2 getElementsByTagName
Este método selecciona todos los elementos que tienen un nombre de etiqueta
específico y devuelve una colección (similar a un array) de esos elementos.
Sintaxis:

document.getElementsByTagName(tagName)

Ejemplo:
Si queremos seleccionar todos los elementos
<p> :

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

Podemos hacerlo con:

const paragraphs = document.getElementsByTagName('p');

4.3.3 getElementsByClassName
Este método selecciona todos los elementos que tienen una clase específica.
Devuelve una colección de esos elementos.

S4. Manipulando el DOM 6

 Sintaxis:

document.getElementsByClassName(className)

Ejemplo:
Para seleccionar todos los elementos con la clase
highlight :

<div class="highlight">Highlighted content 1</div>

<span class="highlight">Highlighted content 2</span>

Usamos:

const highlightedElements = document.getElementsByClassName

('highlight');

4.3.4 querySelector
Este método selecciona el primer elemento que coincide con un selector CSS
especificado. Es muy versátil y permite usar casi cualquier selector CSS que
desees.
Sintaxis:

document.querySelector(cssSelector)

Ejemplo:
Si queremos seleccionar el primer elemento con la clase
highlight :

<div class="highlight">Highlighted content 1</div>

<span class="highlight">Highlighted content 2</span>

Hacemos:

S4. Manipulando el DOM 7

 const firstHighlightedElement = document.querySelector('.high
light');

4.3.5 querySelectorAll
Al igual que querySelector , este método selecciona elementos basados en un
selector CSS. Sin embargo, querySelectorAll selecciona todos los elementos que
coincidan con el selector, devolviendo una NodeList.

Sintaxis:

document.querySelectorAll(cssSelector)

Ejemplo:
Para seleccionar todos los elementos con la clase
highlight :

<div class="highlight">Highlighted content 1</div>

<span class="highlight">Highlighted content 2</span>

Utilizamos:

const allHighlightedElements = document.querySelectorAll('.hi

ghlight');

Estos métodos proporcionan a los desarrolladores las herramientas necesarias

para seleccionar y trabajar con elementos en el DOM. Si bien algunos métodos,
como getElementById , son más antiguos y específicos, otros como querySelector y
querySelectorAllofrecen una gran flexibilidad al permitir el uso de selectores CSS.
Conocer cuándo y cómo usar cada método es esencial para una manipulación
eficiente y efectiva del DOM.

4.4 Manipulación de contenido en el DOM

S4. Manipulando el DOM 8

 La manipulación del contenido de una página web es una de las tareas más
comunes cuando trabajamos con el DOM. JavaScript nos ofrece varios métodos y
propiedades para interactuar y modificar el contenido de los elementos. A
continuación, se detallan algunas de las propiedades más utilizadas para este
propósito:

4.4.1 innerText y textContent

Estas propiedades nos permiten obtener o establecer el contenido de texto de un
elemento. Aunque son similares, tienen algunas diferencias clave.

innerText:

Retorna el texto visible de un elemento y sus descendientes.

Respeta el estilo visual (por ejemplo, no incluirá el texto de elementos

ocultos con display: none ).

Es menos eficiente en términos de rendimiento en comparación con

textContent .

textContent:

Retorna todo el contenido de texto de un elemento y sus descendientes,

independientemente de si el contenido es visible o no.

No tiene en cuenta los estilos aplicados al contenido.

Es generalmente más rápido y consistente entre navegadores en

comparación con innerText .

Ejemplo:
Supongamos el siguiente HTML:

<div id="example">Hello, <span style="display: none;">World</

span>!</div>

Con JavaScript:

const div = document.getElementById('example');

S4. Manipulando el DOM 9

 console.log(div.innerText); // "Hello, !"
console.log(div.textContent); // "Hello, World!"

4.4.2 innerHTML
La propiedad innerHTML nos permite obtener o establecer el contenido HTML
completo de un elemento. Esto incluye tanto el texto como cualquier marca HTML
dentro del elemento.
Ejemplo:
Dado el siguiente HTML:

<div id="content">Hello, <strong>World</strong>!</div>

Con JavaScript:

const contentDiv = document.getElementById('content');

console.log(contentDiv.innerHTML);
// "Hello, <strong>World</strong>!"

// Modificar el contenido
contentDiv.innerHTML = 'New <em>content</em> here!';

Nota: Aunque innerHTML es útil, puede ser peligroso si se inserta contenido no

seguro o no sanitizado, ya que puede dar lugar a vulnerabilidades de cross-site
scripting (XSS).

4.4.3 outerHTML
Mientras que innerHTML se refiere al contenido dentro de un elemento, outerHTML
nos permite obtener o establecer el marcado HTML que representa el elemento y
su contenido.

Ejemplo:
Considerando el mismo HTML:

S4. Manipulando el DOM 10

 <div id="content">Hello, <strong>World</strong>!</div>

Con JavaScript:

const contentDiv = document.getElementById('content');

console.log(contentDiv.outerHTML);
// "<div id="content">Hello, <strong>World</strong>!</div>"

// Modificar el elemento completo

contentDiv.outerHTML = '<p>New paragraph here!</p>';

Estas propiedades nos brindan un control directo sobre el contenido de los

elementos en el DOM. Ya sea que necesitemos modificar solo el texto o
interactuar con el marcado HTML completo, JavaScript nos proporciona las
herramientas para hacerlo. Es importante siempre ser cauteloso, especialmente
cuando se trabaja con innerHTML , para asegurarnos de que no introduzcamos
contenido no seguro en nuestra página.

4.5 Manipulación de atributos en el DOM

Los atributos en el DOM son características o propiedades que definen y
proporcionan información adicional sobre un elemento, como el href en un enlace
o el src en una imagen. JavaScript nos ofrece varios métodos para interactuar y
modificar los atributos de los elementos. A continuación, se detallan algunas de
las funciones más utilizadas para este propósito:

4.5.1 getAttribute
Este método nos permite obtener el valor de un atributo específico de un
elemento.

Sintaxis:

S4. Manipulando el DOM 11

 element.getAttribute(attributeName)

Ejemplo:
Dado el siguiente HTML:

<a id="myLink" href="<https://www.example.com>">Visit Example

</a>

Con JavaScript:

const link = document.getElementById('myLink');

const hrefValue = link.getAttribute('href');

console.log(hrefValue); // "<https://www.example.com>"

4.5.2 setAttribute
El método setAttribute nos permite establecer o modificar el valor de un atributo
específico de un elemento. Si el atributo no existe, lo crea; si ya existe, actualiza
su valor.
Sintaxis:

element.setAttribute(attributeName, value)

Ejemplo:
Usando el mismo enlace anterior:

const link = document.getElementById('myLink');

// Cambiar el valor del atributo href

link.setAttribute('href', '<https://www.newwebsite.com>');

Después de ejecutar el código, el HTML del enlace se actualizaría a:

S4. Manipulando el DOM 12

 <a id="myLink" href="<https://www.newwebsite.com>">Visit Exam
ple</a>

4.5.3 removeAttribute
Como su nombre indica, removeAttribute nos permite eliminar un atributo y su valor
de un elemento.

Sintaxis:

element.removeAttribute(attributeName)

Ejemplo:
Dado el HTML:

<button id="myButton" disabled>Click me</button>

Con JavaScript:

const button = document.getElementById('myButton');

// Eliminar el atributo disabled

button.removeAttribute('disabled');

Después de ejecutar el código, el botón ya no estará deshabilitado.

4.5.4 hasAttribute
Este método verifica si un elemento tiene un atributo específico y devuelve true si
lo tiene o false si no.
Sintaxis:

element.hasAttribute(attributeName)

Ejemplo:
Utilizando el mismo botón:

S4. Manipulando el DOM 13

 const button = document.getElementById('myButton');

if (button.hasAttribute('disabled')) {
console.log('The button is disabled.');
} else {
console.log('The button is not disabled.');
}

Los atributos en el DOM juegan un papel crucial en la definición de propiedades y

comportamientos de los elementos. Al tener la capacidad de leer, modificar,
añadir o eliminar atributos, los desarrolladores pueden controlar y adaptar el
comportamiento y la presentación de los elementos en tiempo real, ofreciendo
experiencias web más dinámicas e interactivas.

4.6 Manipulación avanzada de atributos: classList

Mientras que las propiedades y métodos básicos, como getAttribute , setAttribute ,
y removeAttribute , son útiles para manipular atributos generales de un elemento, el
atributo de clase merece una atención especial debido a su uso frecuente y a la
naturaleza potencialmente múltiple de sus valores. La propiedad classList de un
elemento del DOM proporciona métodos convenientes para manipular la lista de
clases de un elemento.

4.6.1 Introducción a classList

La propiedad classList retorna una lista en vivo de las clases del elemento,
permitiendo fácil acceso y manipulación. La lista devuelta por no es un arreglo,
pero puede ser tratada como tal en muchos contextos gracias a que tiene
métodos similares a los de un arreglo.

4.6.2 Métodos de classList

add: Añade una o más clases al elemento. Si la clase ya existe, no la añade
nuevamente.
Ejemplo:

S4. Manipulando el DOM 14

 const element = document.querySelector('div');
element.classList.add('active');
element.classList.add('highlighted', 'visible');

remove: Elimina una o más clases del elemento. Si la clase no existe, no hace
nada.
Ejemplo:

element.classList.remove('inactive');
element.classList.remove('highlighted', 'visible');

toggle: Si el elemento tiene la clase, la elimina; si no la tiene, la añade.

También puede aceptar un segundo argumento booleano: si es true , añade la
clase; si es false , la elimina.

Ejemplo:

element.classList.toggle('active'); // Conmuta la clase

element.classList.toggle('visible', true); // Asegura que
la clase 'visible' esté presente

contains: Verifica si el elemento tiene una clase específica. Retorna true o

false .

Ejemplo:

if (element.classList.contains('active')) {
console.log('El elemento tiene la clase active.');
}

4.6.3 Ventajas de classList sobre manipulación directa

Manipular la propiedad className directamente puede ser propenso a errores,
especialmente si estás intentando añadir o quitar clases individuales en un
elemento que ya tiene múltiples clases. classList simplifica este proceso,
haciendo que el código sea más legible y menos propenso a errores.

S4. Manipulando el DOM 15

 Por ejemplo, en lugar de hacer algo como esto:

if (element.className.indexOf('active') === -1) {

element.className += ' active';
}

Con classList , simplemente puedes hacer:

element.classList.add('active');

La propiedad classList es una herramienta poderosa que facilita la manipulación

de clases en elementos del DOM. Con sus métodos intuitivos y fáciles de usar,
permite a los desarrolladores gestionar las clases de un elemento de manera
eficiente y sin errores, mejorando la calidad y legibilidad del código en
aplicaciones web.

4.7 Creación y eliminación de nodos en el DOM

Manipular el DOM no solo implica cambiar el contenido o los atributos de los
elementos existentes, sino que a menudo requiere la creación o eliminación de
elementos (nodos) dentro del documento. JavaScript nos proporciona varios
métodos para hacer precisamente eso. A continuación, se detallan algunas de las
funciones más comunes para la creación y eliminación de nodos:

4.7.1 createElement
Este método permite crear un nuevo elemento del tipo especificado.
Sintaxis:

document.createElement(tagName)

Ejemplo:
Para crear un nuevo elemento
<p> :

S4. Manipulando el DOM 16

 const newParagraph = document.createElement('p');
newParagraph.textContent = 'This is a new paragraph.';

Este código crea un nuevo elemento <p> , pero aún no se ha añadido al DOM.

4.7.2 appendChild
Una vez que hayamos creado un nuevo elemento con createElement , podemos
agregarlo al DOM usando appendChild . Este método añade un nodo al final de la
lista de hijos de un nodo padre especificado.
Sintaxis:

parentNode.appendChild(childNode)

Ejemplo:
Añadir el párrafo anterior al cuerpo del documento:

document.body.appendChild(newParagraph);

4.7.3 insertBefore
Si deseamos insertar un elemento en una posición específica y no al final,
podemos usar insertBefore . Este método permite insertar un nodo antes del nodo
de referencia dentro de un nodo padre.

Sintaxis:

parentNode.insertBefore(newNode, referenceNode)

Ejemplo:
Si queremos insertar nuestro párrafo anterior a otro elemento existente:

const existingElement = document.getElementById('someElemen

t');
document.body.insertBefore(newParagraph, existingElement);

S4. Manipulando el DOM 17

 Esto insertará newParagraph justo antes de existingElement .

4.7.4 removeChild
Para eliminar un nodo del DOM, utilizamos removeChild . Es importante notar que
removeChild se llama en el nodo padre del elemento que queremos eliminar y

requiere el nodo hijo que deseamos eliminar como argumento.

Sintaxis:

parentNode.removeChild(childNode)

Ejemplo:
Para eliminar el párrafo que hemos creado anteriormente:

document.body.removeChild(newParagraph);

La capacidad de crear y eliminar nodos en el DOM es esencial para las

aplicaciones web dinámicas. Estas operaciones nos permiten actualizar la
estructura de nuestra página en respuesta a interacciones del usuario, cambios
de datos u otros eventos, proporcionando experiencias más ricas y reactivas para
los usuarios. Es importante recordar siempre hacer referencia correctamente a los
nodos padre e hijo al manipular el DOM para evitar errores o comportamientos
inesperados.

4.8 Propiedades de estilo: Manipular CSS desde

JavaScript
La capacidad de cambiar el estilo de los elementos en tiempo real a través de
JavaScript puede mejorar la interactividad y la experiencia del usuario en una
página web. JavaScript ofrece acceso a las propiedades de estilo de los
elementos a través del objeto style , permitiendo a los desarrolladores ajustar,
cambiar o animar la apariencia de los elementos del DOM sobre la marcha.

4.8.1 Accediendo a las propiedades de estilo

S4. Manipulando el DOM 18

 Para acceder o modificar los estilos inline de un elemento, se utiliza la propiedad
del elemento, seguido del nombre de la propiedad CSS que se desea
style

manipular.
Ejemplo:
Supongamos que tenemos el siguiente elemento en nuestro HTML:

<div id="myDiv">Hello, World!</div>

Para cambiar el color del texto a rojo usando JavaScript:

const div = document.getElementById('myDiv');

div.style.color = 'red';

4.8.2 Convenciones de nomenclatura

Mientras que en CSS utilizamos la notación de guion para nombres de
propiedades compuestas (por ejemplo, background-color ), en JavaScript utilizamos
la notación camelCase para las mismas propiedades.

Ejemplo:

// CSS
/* background-color: blue; */

// JavaScript
element.style.backgroundColor = 'blue';

4.8.3 Obtener estilos actuales

Es importante señalar que el objeto style solo refleja los estilos que se han
aplicado directamente al elemento (estilos inline), no los estilos que se han
aplicado a través de hojas de estilo externas o etiquetas <style> en el
encabezado.
Para obtener los estilos computados actuales de un elemento,
independientemente de dónde se definieron, podemos usar el método
getComputedStyle .

S4. Manipulando el DOM 19

 Ejemplo:

const div = document.getElementById('myDiv');

const computedStyle = window.getComputedStyle(div);
console.log(computedStyle.color); // Retorna el color computa
do del texto.

4.8.4 Modificando múltiples estilos

Si deseas cambiar múltiples propiedades de estilo a la vez, puedes usar la
notación de acceso a propiedades para cada una.

Ejemplo:

const div = document.getElementById('myDiv');

div.style.color = 'white';
div.style.backgroundColor = 'black';
div.style.border = '1px solid red';

4.8.5 Manejo de clases CSS con JavaScript

En lugar de cambiar estilos individuales, a menudo es más eficiente y organizado
agregar o quitar clases CSS a los elementos. Esto se puede hacer usando la
propiedad classList del elemento.
Ejemplo:

// Añadir una clase

div.classList.add('active');

// Eliminar una clase

div.classList.remove('inactive');

// Alternar una clase (añadir si no existe, eliminar si exist

e)
div.classList.toggle('highlighted');

S4. Manipulando el DOM 20

 Manipular estilos CSS desde JavaScript brinda a los desarrolladores una gran
flexibilidad para adaptar y mejorar la experiencia del usuario en tiempo real. Ya
sea que se trate de cambios sutiles o animaciones complejas, la capacidad de
ajustar la apariencia de la página sobre la marcha puede hacer que las
aplicaciones web sean más atractivas e interactivas. Aunque es poderoso, es
aconsejable usar esta capacidad con moderación y, cuando sea posible,
considerar soluciones basadas en CSS puro para transiciones y animaciones.

4.9 Traversing the DOM: Navegar entre nodos

Navegar por el Document Object Model (DOM) es una parte esencial de la
manipulación del DOM con JavaScript. Proporciona una forma de acceder y
manipular elementos, atributos y texto dentro de documentos HTML y XML. Aquí
cubriremos las principales maneras de navegar entre diferentes nodos en el DOM,
como padres, hijos y hermanos.

4.9.1 Nodos Padre

Devuelve el nodo padre del nodo especificado. Para acceder al nodo padre de un
elemento, se puede utilizar la propiedad parentNode .

const parent = element.parentNode;

Ejemplo:

<div id="parent">
<p id="child">Este es un párrafo.</p>
</div>

const child = document.getElementById('child');

const parent = child.parentNode;
console.log(parent.id); // Salida: "parent"

4.9.2 Nodos Hijos

S4. Manipulando el DOM 21

 Para acceder a los nodos hijos de un elemento, se pueden utilizar las propiedades
childNodes , children , firstChild , lastChild , firstElementChild y lastElementChild .

firstChild: Devuelve el primer nodo hijo del nodo especificado.

const firstChild = element.firstChild;

lastChild: Devuelve el último nodo hijo del nodo especificado.

const lastChild = element.lastChild;

childNodes: Devuelve una colección de nodos hijos del nodo especificado.

Incluye tanto elementos como otros tipos de nodos (como nodos de texto).

const allChildNodes = element.childNodes;

Ejemplo:

<ul id="parent">
<li>Item 1</li>
<li id="child">Item 2</li>
<li>Item 3</li>
</ul>

const parent = document.getElementById('parent');

// Obtener todos los nodos hijos (incluyendo nodos de texto)

const childNodes = parent.childNodes;

// Obtener solo los nodos elementos hijos

const children = parent.children;

// Obtener el primer y último nodo hijo

const firstChild = parent.firstChild;
const lastChild = parent.lastChild;

S4. Manipulando el DOM 22

 // Obtener el primer y último nodo elemento hijo
const firstElementChild = parent.firstElementChild;
const lastElementChild = parent.lastElementChild;

4.9.3 Nodos Hermanos

Para acceder a los nodos hermanos de un elemento, se pueden utilizar las
propiedades nextSibling , previousSibling , nextElementSibling ,y previousElementSibling .

nextSibling: Devuelve el siguiente nodo hermano del nodo especificado.

const nextNode = element.nextSibling;

previousSibling: Devuelve el nodo hermano anterior del nodo especificado.

const previousNode = element.previousSibling;

Ejemplo:

<ul>
<li id="previousSibling">Item 1</li>
<li id="currentNode">Item 2</li>
<li id="nextSibling">Item 3</li>
</ul>

const currentNode = document.getElementById('currentNode');

// Obtener el nodo hermano anterior y siguiente

const previousSibling = currentNode.previousSibling;
const nextSibling = currentNode.nextSibling;

// Obtener el elemento hermano anterior y siguiente

const previousElementSibling = currentNode.previousElementSib

S4. Manipulando el DOM 23

 ling;
const nextElementSibling = currentNode.nextElementSibling;

4.9.4 Navegación específica para elementos

Las propiedades anteriores consideran todos los nodos, incluidos los nodos de
texto. Si solo estás interesado en navegar entre nodos de elemento (ignorando
otros tipos de nodos, como nodos de texto o comentarios), puedes usar las
siguientes propiedades:

firstElementChild: Devuelve el primer nodo de elemento hijo.

lastElementChild: Devuelve el último nodo de elemento hijo.

children: Devuelve una colección HTML en vivo de los nodos hijos de

elemento.

nextElementSibling: Devuelve el siguiente nodo de elemento hermano.

previousElementSibling: Devuelve el nodo de elemento hermano anterior.

parentElement: Devuelve el nodo de elemento padre.

4.9.5 Traversing con querySelector y querySelectorAll

Además de las propiedades de navegación directa, puedes usar métodos como
querySelector y querySelectorAll para buscar elementos dentro de un nodo

específico:

Ejemplo:
Supongamos que quieres encontrar todos los elementos
<p> dentro de un <div> :

const div = document.getElementById('myDiv');

const paragraphs = div.querySelectorAll('p');

Navegar por el DOM es una habilidad fundamental para los desarrolladores web.
Te permite acceder y manipular elementos de manera eficiente. Al comprender las

S4. Manipulando el DOM 24

 relaciones entre los nodos y cómo navegar entre ellos, puedes llevar a cabo
tareas complejas y crear interacciones ricas en tus aplicaciones web.

4.10 Manejo de Eventos en JavaScript

El manejo de eventos es una parte fundamental de la programación de
aplicaciones web. Permite que las páginas respondan a acciones del usuario,
como clics, movimientos del ratón, presiones de teclas, entre otros. JavaScript
proporciona métodos para agregar y eliminar manejadores de eventos en los
elementos del DOM.

4.10.1 addEventListener
El método addEventListener permite asignar un manejador de eventos a un
elemento del DOM.
Sintaxis:

element.addEventListener(event, function, useCapture);

event : El tipo de evento (como "click" o "mousedown").

function : La función que se ejecutará cuando se dispare el evento.

useCapture(opcional): Un booleano que especifica si se debe capturar el

evento en la fase de captura o en la fase de burbuja. El valor predeterminado
es false (fase de burbuja).

Ejemplo:

const button = document.getElementById('myButton');

button.addEventListener('click', function() {
alert('Button was clicked!');
});

Este código hará que aparezca una alerta cada vez que el botón con el ID
"myButton" sea clicado.

4.10.2 removeEventListener

S4. Manipulando el DOM 25

 Para eliminar un manejador de eventos, se usa el método removeEventListener .
Sintaxis:

element.removeEventListener(event, function, useCapture);

Los parámetros son los mismos que para addEventListener . Es importante destacar
que la función pasada a removeEventListener debe ser la misma referencia que la
función pasada a addEventListener . Esto significa que no se pueden eliminar
manejadores de eventos anónimos o funciones declaradas directamente.
Ejemplo:

function showAlert() {
alert('Button was clicked!');
}

button.addEventListener('click', showAlert);
// ...en algún punto posterior en el código
button.removeEventListener('click', showAlert);

4.10.3 Eventos Comunes

click: Se dispara cuando el usuario hace clic en un elemento.

mousedown y mouseup: Se disparan cuando el usuario presiona o suelta un

botón del ratón.

mousemove: Se dispara cuando el usuario mueve el cursor del ratón.

keydown, keyup, y keypress: Se disparan en respuesta a la presión de las

teclas.

input y change: Se disparan en respuesta a cambios en los campos de

entrada.

submit: Se dispara cuando el usuario envía un formulario.

load y unload: Se disparan cuando una página ha terminado de cargar o está

a punto de descargarse.

S4. Manipulando el DOM 26

 mouseenter y mouseleave: Se disparan cuando el cursor entra o sale de un
elemento.

4.10.4 Objeto Event

Cuando se dispara un evento, se pasa un objeto Event a la función manejadora.
Este objeto contiene información sobre el evento, como el tipo de evento, el
elemento en el que se disparó el evento y, si es un evento de teclado o ratón, qué
teclas o botones están involucrados.
Ejemplo:

button.addEventListener('click', function(event) {
console.log(event.type); // "click"
console.log(event.target); // el elemento button
});

Los eventos y los manejadores de eventos son cruciales para crear páginas web
interactivas. addEventListener y removeEventListener ofrecen una manera flexible y
potente de gestionar cómo responden tus páginas a la entrada del usuario.
Entender estos conceptos y saber cómo usarlos es esencial para cualquier
desarrollador web.

S4. Manipulando el DOM 27