Ciclo 4a: Desarrollo de Aplicaciones Web

Sesión 12:
DOM: Introducción al árbol;
Manipulación del árbol DOM y entendimiento del mismo.

Programa Ciencias de la Computación e Inteligencia Artificial

Escuela de Ciencias Exactas e Ingeniería
Universidad Sergio Arboleda
Bogotá
 Contenido
Manipulación y creación de nodos
1. document.getElementById
2. document.getElementsByTagName
3. document.getElementsByClassName
4. document.querySelector
 Árbol DOM

Document Object Model o modelo de

Página
documentos es una representación del
HTML en forma de árbol de nodos. Todos
los navegadores Web interpretan el
contenido de un documento o página html
como una estructura en forma de arbol
con nodos padre e hijo.

Este árbol DOM es la estructura que

modificamos cuando programamos los
eventos o acciones usando javascript o
algún framework o librería reactiva como
react, angular o Vue.

DOM
 Árbol DOM

Cuando un servidor enviá contenido al navegador web se

lleva a cabo un proceso conocido como el Critical rendering
path, el cual consiste en construir 2 arboles de objetos
DOM Y CSSOM que representan la estructura del HTML Y
CSS de la página.

Una página está formada por múltiples etiquetas HTML,

anidadas una dentro de otra,
formando un árbol de etiquetas relacionadas entre sí, que
se denomina árbol DOM.

JavaScript cuenta con instrucciones que nos permiten

acceder a elementos del árbol DOM, y modificar su
aspecto, comportamiento o ubicación, agregar o eliminar
elementos, y una gran variedad de acciones que enriquecen
y mejoran la experiencia de usuario.
 Leyendo Nodos

document.getElementById: Obtiene un elemento a partir de su Id

 Leyendo Nodos

Podemos cambiar el aspecto de los elementos, ocultarnos, agregar

comportamiento(eventos) .
 Leyendo Nodos

document.getElementsByTagName: Para obtener un conjunto de elementos a partir un

tag
 Leyendo Nodos

document.getElementsByClassName: Para obtener un conjunto de elementos a partir

de una clase css
 Leyendo Nodos

document.querySelector: Permite seleccionar cualquier cosa que se especifique, en la

medida en que puedo enviar como parámetro cualquier selector css. Recupera
solamente el primer elemento que encuentre.
 Leyendo Nodos

document.querySelectorAll: Me permite seleccionar cualquier cosa que se especifique,

en la medida en que puedo enviar como parámetro cualquier selector css. Recupera
solamente el primer elemento que encuentre.
 Crear Nodos

Para agregar nodos se utilizan las funciones:

document.createElement: Para crear un elemento

document.createTextNode: Para crear un texto

**solo en memoria, no hemos modificado el DOM.

➔ parentElement.appendChild
➔ parentElement.append
➔ parentElement.insertBefore
➔ parentElement.insertAdjacentElement
Crear Nodos
Crear Nodos