Clase 9 - DOM

Esta clase va a ser
grabada
Clase 09. JAVASCRIPT
Modelo de objetos del

documento (DOM)
CLASE N°8
Glosario
Operar: Abstracción: Resumen de un grupo complejo de Objeto Math: Contenedor de herramientas y serie de
instrucciones bajo una palabra clave (función) que sugiere métodos propio de Javascript para realizar funciones
cuál es el problema a resolver por la misma. matemáticas complejas.
Función de orden superior: Es aquella que bien retorna una Clase Date: Clase propia de Javascript que nos permite
función, o recibe una función por parámetro. También es representar y manipular fechas.
conocida como función de alto orden o higher-order
functions.
Objetivos de la clase
Comprender el DOM, su alcance y su importancia para
operar sobre elementos HTML.
Identificar la estructura del DOM y los tipos de nodos.
Conocer los métodos de acceso y modificación de nodos.
Aprender cómo agregar y quitar nodos.
Entender la importancia de la plantilla de texto en ES6 de

JavaScript.
MAPA DE CONCEPTOS CLASE 7
¿Qué es y cómo
funciona?
DOM HTML a DOM
Estructura
Tipos
getElementById()
Plantillas Literales Métodos
Nodos getElementsByClassName()
de acceso
getElementsByTagName()
Agregar o
quitar
Query Selector
Query Selector All

¡Vamos a la clase!
¿Qué es el Modelo de
objetos del documento
(DOM) y cómo funciona?
DOM
(Document Object Model)
El Modelo de Objetos del Documento (DOM) es una

estructura de objetos generada por el navegador, la cual
representa la página HTML actual.
Con JavaScript la empleamos para acceder y

modificar de forma dinámica elementos de la
interfaz.
Es decir que, por ejemplo, desde JavaScript podemos

modificar el texto contenido de una etiqueta <h1>.
¿Cómo funciona?
La estructura de un documento HTML son las Las etiquetas anidadas son llamadas “nodos hijos”
etiquetas. de la etiqueta “nodo padre” que las contiene.
En el Modelo de Objetos del Documento (DOM),

cada etiqueta HTML es un objeto, al que podemos
llamar nodo.
¿Cómo funciona?
Todos estos objetos son accesibles empleando JavaScript mediante el objeto global
document.
Por ejemplo, document.body es el nodo que representa la etiqueta <body>.

Editar el DOM desde el navegador
Los navegadores modernos brindan medios para

editar el DOM de cualquier página en tiempo real.
Ejemplo: en Chrome podemos hacerlo mediante la

Herramienta para desarrolladores en la pestaña
“Elements”.
Referencia: Editar el DOM (Chrome)

Editar el DOM desde
el navegador
Si bien la estructura DOM está simplificada, es un medio muy útil
para verificar y probar actualizaciones en la estructura.
Referencia: Editar el DOM (Chrome)

Acceso al DOM
Acceder a los Nodos
Existen distintos métodos para acceder a los elementos del DOM empleando en la
clase Document.
Los más comunes son:
getElementById()
getElementsByClassName()
getElementsByTagName()
Getelementbyid()
El método getElementById() sirve para acceder a un elemento de la estructura
HTML, utilizando su atributo ID como identificación.
//CODIGO HTML DE REFERENCIA

<div id = "app">
<p id = "parrafo1" >Hola Mundo</p>
</div>
//CODIGO JS
let div = document.getElementById("app");
let parrafo = document.getElementById("parrafo1");
console.log(div.innerHTML);
console.log(parrafo.innerHTML);
Getelementsbyclassname()
El método getElementsByClassName() sirve para acceder a un conjunto de
elementos de la estructura HTML, utilizando su atributo class como identificación.
Se retornará un Array de elementos con todas las coincidencias:

<ul>
<li class="paises">AR</li>
<li class="paises">CL</li>
<li class="paises">UY</li>
</ul>
//CODIGO JS
let paises = document.getElementsByClassName("paises");
console.log(paises[0].innerHTML);
Getelementsbytagname()
El método getElementsByTagName() sirve para acceder a un conjunto de
elementos de la estructura HTML, utilizando su nombre de etiqueta como
identificación. Esta opción es la menos específica de todas, ya que es muy probable
que las etiquetas se repitan en el código HTML.

<div>
<div>CONTENEDOR 2</div>
<div>CONTENEDOR 3</div>
</div>
//CODIGO JS
let contenedores = document.getElementsByTagName("div");
console.log(contenedores[0].innerHTML);
Ejemplo aplicado:
Recorre HTMLcollection con For...Of
let contenedores = document.getElementsByTagName("div");
for (const pais of paises) {

console.log(pais.innerHTML);
}
for (const div of contenedores) {

console.log(div.innerHTML);
}
Modificar Nodos
Innet Text
La propiedad innerText de un nodo nos permite modificar su nodo de texto. Es decir, acceder
y/o modificar el contenido textual de algún elemento del DOM.

<h1 id=”titulo”>Hola Mundo!</h1>
//CODIGO JS
let titulo = document.getElementById("titulo")
console.log( titulo.innerText ) // “Hola Mundo!”
// cambio el contenido del elemento
titulo.innerText = “Hola Coder!”
console.log( titulo.innerText ) // “Hola Coder!”
Innet HTML
innerHTML permite definir el código html interno del elemento
seleccionado. El navegador lo interpreta como código HTML y no
como contenido de texto, permitiendo desde un string crear una
nueva estructura de etiquetas y contenido.
Innet HTML
Al pasar un string con formato de etiquetas html y contenido a través
de la propiedad innerHTML, el navegador genera nuevos nodos
con su contenido dentro del elemento seleccionado.
Innet HTML
<div id=”contenedor”></div>
//CODIGO JS
let container = document.getElementById("contenedor")
// cambio el código HTML interno
container.innerHTML = “<h2>Hola mundo!</h2><p>Lorem ipsum</p>”
//Resultado en el DOM
<div id=”contenedor”>
<h2>Hola mundo!</h2>
<p>Lorem ipsum</p>
</div>
Class Name
<div id=”contenedor”></div>
A través de la propiedad className //CODIGO JS
de algún nodo seleccionado podemos let container = document.getElementById("contenedor")
acceder al atributo class del mismo y
// cambio el código HTML interno
definir cuáles van a ser sus clases:
container.innerHTML = “<h2>Hola mundo!</h2>”
// cambio el atributo class
container.className = “container”
//Resultado en el DOM
<div id=”contenedor” class=“container”>
<h2>Hola mundo!</h2>
</div>
Ejemplo en vivo
¡VAMOS A PRACTICAR LO VISTO!

☕
Break
¡10 minutos y volvemos!
¡Volvemos!
Agregar o quitar Nodos
Creación de elementos
Para crear elementos se utiliza la función document.createElement(), y se debe
indicar el nombre de etiqueta HTML que representará ese elemento.
Luego debe agregarse como hijo el nodo creado con append(), al body o a otro
nodo del documento actual.
// Crear nodo de tipo Elemento, etiqueta p

let parrafo = document.createElement("p");
// Insertar HTML interno
parrafo.innerHTML = "<h2>¡Hola Coder!</h2>";
// Añadir el nodo Element como hijo de body
document.body.append(parrafo);
Eliminar elementos
Se pueden eliminar nodos existentes y nuevos. El método remove() permite
eliminar un nodo seleccionado del DOM:
let parrafo = document.getElementById("parrafo1");

//Elminando el propio elemento
parrafo.remove();

//Eliminando el primer elemento de clase paises
paises[0].remove()
Ejemplo aplicado:
Creando opciones desde un Array
//Obtenemos el nodo donde vamos a agregar los nuevos elementos
let padre = document.getElementById("personas");
//Array con la información a agregar
let personas = ["HOMERO","MARGE", "BART", "LISA","MAGGIE"];
//Iteramos el array con for...of
for (const persona of personas) {
//Creamos un nodo <li> y agregamos al padre en cada ciclo
let li = document.createElement("li");
li.innerHTML = persona
padre.appendChild(li);
}
Plantillas de texto
Plantillas Literales
En versiones anteriores a ES6, solía emplearse la concatenación para incluir
valores de las variables en una cadena de caracteres (string). Esta forma puede ser
poco legible ante un gran número de referencias. En JS ES6 que solventa esta
situación son los template strings.
let producto = { id: 1, nombre: "Arroz", precio: 125 };

let concatenado = "ID : " + producto.id +" - Producto: " + producto.nombre + "$
"+producto.precio;
let plantilla = `ID: ${producto.id} - Producto ${producto.nombre} $ $
{producto.precio}`;
//El valor es idéntico pero la construcción de la plantilla es màs sencilla
console.log(concatenado);
console.log(plantilla);
Plantillas Literales e innerHTML
La plantillas son un medio para incluir variables en la estructura HTML de nodos
nuevos o existentes , modificando el innerHTML.
let producto = { id: 1, nombre: "Arroz", precio: 125 };

let contenedor = document.createElement("div");
//Definimos el innerHTML del elemento con una plantilla de texto
contenedor.innerHTML = `<h3> ID: ${producto.id}</h3>
<p> Producto: ${producto.nombre}</p>
<b> $ ${producto.precio}</b>`;
//Agregamos el contenedor creado al body
document.body.appendChild(contenedor);
Ejemplo aplicado:
Creando elementos desde objetos
const productos = [{ id: 1, nombre: "Arroz", precio: 125 },
{ id: 2, nombre: "Fideo", precio: 70 },
{ id: 3, nombre: "Pan" , precio: 50},
{ id: 4, nombre: "Flan" , precio: 100}];
for (const producto of productos) {

let contenedor = document.createElement("div");
//Definimos el innerHTML del elemento con una plantilla de texto
contenedor.innerHTML = `<h3> ID: ${producto.id}</h3>
<p> Producto: ${producto.nombre}</p>
<b> $ ${producto.precio}</b>`;
document.body.appendChild(contenedor);
}
Query Selector
<div id=”contenedor”>
<p class=”texto”></p>
</div>
El método
querySelector() nos
// puedo seleccionar la etiqueta <p> siguiendo la permite seleccionar nodos
sintaxis de CSS para selectores: con la misma sintaxis que
utilizamos en los
let parrafo = document.querySelector("#contenedor p")
selectores de CSS.
// seleccionar sólo el contenedor por id con #
let contenedor = document.querySelector("#contenedor")
// o por clase:
parrafo = document.querySelector(".texto")
Query Selector All
Query Selector me retorna el primer elemento que coincida
con el parámetro de búsqueda, o sea un sólo elemento. Si
quiero obtener una colección de elementos puedo utilizar el
método querySelectorAll() siguiendo el mismo
comportamiento.
Ejemplo en vivo
¡VAMOS A PRACTICAR LO VISTO!
Segunda entrega
de tu Proyecto final
Deberás entregar la estructura del proyecto, las variables de JS
necesarias y los objetos de JS, correspondientes a la segunda
entrega de tu proyecto final.
ENTREGA DEL PROYECTO
FINAL
Estructura, variables y objetos

Objetivos generales Formato
✓ Codificar la funcionalidad inicial del ✓ Página HTML y código fuente en JavaScript.
simulador. Debe identificar el apellido del alumno/a en el
✓ Identificar el flujo de trabajo del script en nombre de archivo comprimido por
términos de captura de entradas ingresadas “PreEntrega2+Apellido”.
por el usuario, procesamiento esencial del
simulador y notificación de resultados en
forma de salida.
FINAL

Objetivos específicos Sugerencias
✓ Capturar entradas mediante prompt(). ✓ Si bien, por el momento solo podemos hacer
✓ Declarar variables y objetos necesarios para entradas con prompt() y salidas con alert() o
simular el proceso seleccionado. console.log(), es suficiente para empezar a
✓ Crear funciones y/o métodos para realizar pensar el proceso a simular en términos de
operaciones (suma, resta, concatenación, entradas, variables, estructuras, funciones,
división, porcentaje, etc). métodos y salidas. Verificar Rúbrica
✓ Efectuar una salida, que es el resultado de los
datos procesados, la cual puede hacerse por
alert() o console.log().
FINAL

Se debe entregar Para tener en cuenta
✓ Estructura HTML del proyecto. ✓ La estructura hace referencia a el html y css,
✓ Variables de JS necesarias. correspondientes al armado de la página
✓ Funciones esenciales del proceso a simular. general, pero que el JS que se evalúa, aún no
✓ Objetos de JS. está interactuando con ella.
✓ Arrays.
✓ Métodos de búsqueda y filtrado sobre el
Array.
Para pensar
¿Te gustaría comprobar tus conocimientos de la clase?
Te compartimos a través del chat de Zoom

el enlace a un breve quiz de tarea.
Para el profesor:
Acceder a la carpeta “Quizzes” de la camada.
Ingresar al formulario de la clase.
Pulsar el botón “Invitar”.
Copiar el enlace.
Compartir el enlace a los alumnos a través del chat.
¿Preguntas?
MATERIAL AMPLIADO
Recursos
Documentación
Ejemplos interactivos: DOM
✓ Documentación DOM
✓ Árbol del Modelo de Objetos del Documento (
DOM)
✓ Recorriendo el DOM
✓ Propiedades de los nodos
Disponible en nuestro repositorio.

Resumen
de la clase hoy
✓ DOM: definición y uso.
✓ Árbol de nodos.
✓ Acceder a los elementos, crear y eliminar nodos.
Muchas gracias.
Opina y valora
esta clase

Clase 9 - DOM

Cargado por

Copyright:

Formatos disponibles

Clase 9 - DOM

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Clase 9 - DOM

Cargado por

Copyright:

Formatos disponibles

Esta clase va a ser

Modelo de objetos del

Identificar la estructura del DOM y los tipos de nodos.

Conocer los métodos de acceso y modificación de nodos.

Aprender cómo agregar y quitar nodos.

Entender la importancia de la plantilla de texto en ES6 de

DOM HTML a DOM

Query Selector All

El Modelo de Objetos del Documento (DOM) es una

Con JavaScript la empleamos para acceder y

Es decir que, por ejemplo, desde JavaScript podemos

En el Modelo de Objetos del Documento (DOM),

Por ejemplo, document.body es el nodo que representa la etiqueta <body>.

Los navegadores modernos brindan medios para

Ejemplo: en Chrome podemos hacerlo mediante la

Referencia: Editar el DOM (Chrome)

Referencia: Editar el DOM (Chrome)

Los más comunes son:

//CODIGO HTML DE REFERENCIA

//CODIGO HTML DE REFERENCIA

//CODIGO HTML DE REFERENCIA

for (const pais of paises) {

for (const div of contenedores) {

//CODIGO HTML DE REFERENCIA

¡VAMOS A PRACTICAR LO VISTO!

// Crear nodo de tipo Elemento, etiqueta p

let parrafo = document.getElementById("parrafo1");

let paises = document.getElementsByClassName("paises");

let producto = { id: 1, nombre: "Arroz", precio: 125 };

let producto = { id: 1, nombre: "Arroz", precio: 125 };

for (const producto of productos) {

Estructura, variables y objetos

Estructura, variables y objetos

Estructura, variables y objetos

Te compartimos a través del chat de Zoom

Disponible en nuestro repositorio.

También podría gustarte