Scribd
Cargar
55 vistas

Clase 8 - DOM

Este documento proporciona una introducción al Modelo de Objetos del Documento (DOM) en JavaScript. Explica que el DOM representa la página HTML como una estructura de objetos que pueden ser manipulados dinámicamente con JavaScript. Describe la estructura jerárquica del DOM y los diferentes tipos de nodos, así como métodos comunes como getElementById(), getElementsByClassName(), y getElementsByTagName() para acceder a elementos. También cubre cómo modificar nodos a través de las propiedades innerText e innerHTML.

Cargado por

Emanuel Ocampo
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
55 vistas

Clase 8 - DOM

Este documento proporciona una introducción al Modelo de Objetos del Documento (DOM) en JavaScript. Explica que el DOM representa la página HTML como una estructura de objetos que pueden ser manipulados dinámicamente con JavaScript. Describe la estructura jerárquica del DOM y los diferentes tipos de nodos, así como métodos comunes como getElementById(), getElementsByClassName(), y getElementsByTagName() para acceder a elementos. También cubre cómo modificar nodos a través de las propiedades innerText e innerHTML.

Cargado por

Emanuel Ocampo
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 60

Esta clase va a ser

grabada
Clase 08. JAVASCRIPT

Modelo de objetos del


documento (DOM)
CLASE N°7

Glosario
Operar: Abstracción: Resumen de un grupo complejo Objeto Math: Contenedor de herramientas y serie de
de instrucciones bajo una palabra clave (función) que métodos propio de Javascript para realizar funciones
sugiere cuál es el problema a resolver por la misma. matemáticas complejas.

Función de orden superior: Es aquella que bien Clase Date: Clase propia de Javascript que nos
retorna una función, o recibe una función por permite representar y manipular fechas.
parámetro. También es 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


Temario

07 08 09

Funciones de Modelo de objetos del Eventos


orden superior documento (DOM)

✓ Abstracción
✓ DOM: ✓ Eventos
✓ Funciones de
Funcionamiento
orden superior ✓ Definir eventos
✓ Acceso
✓ Métodos de ✓ Lorem ipsum
búsqueda y ✓ Nodos
transformación
¡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
etiquetas. hijos” 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>.


HTML a DOM
<!DOCTYPE html>
<html>
<head>
<title>Mi primer App</ title>
</head>
<body>
<h2>Coder House</ h2>
</body>
</html>

Herramienta: Live DOM Viewer


Estructura del DOM y
Nodos
Estructura DOM

Cada etiqueta HTML se De esta forma, del nodo Cada etiqueta HTML se La transformación de las
transforma en un nodo raíz solamente pueden transforma en un nodo etiquetas HTML
de tipo "Elemento". La derivar los nodos HEAD que deriva del habituales genera dos
conversión se realiza de y BODY. correspondiente a su nodos
forma jerárquica. "etiqueta padre".

Nodo elemento: Nodo texto: contiene


correspondiente a la el texto encerrado por
propia etiqueta HTML. esa etiqueta HTML.
Ejemplo
<p>Esta página es <strong>muy sencilla</strong></p>

La etiqueta <p> se transforma en los siguientes nodos del DOM:

Herramienta: DOM node tree viewer


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)


Ejemplo aplicado:
Acceso por objeto document
console.dir(document);
console.dir(document.head)
console.dir(document.body);

El acceso a body usando la referencia document.body requiere que el


script se incluya al final del <body> en el HTML.

<body>
<h2>Coder House</ h2>
<script src="js/main.js "></script>
</body>
Tipos de Nodos
La especificación completa de DOM define 12
tipos de nodos, los más usados son:

Document Element Attr Text Comment

Nodo raíz del que Representa cada Se define un nodo Nodo que Representa los
derivan todos los una de las de este tipo para contiene el texto comentarios
demás nodos del etiquetas XHTML. representar cada encerrado por incluidos en la
árbol. Puede contener uno de los una etiqueta página HTML.
atributos y derivar atributos de las HTML.
otros nodos de él. etiquetas HTML,
es decir, uno por
cada par
atributo=valor.
Ejemplo en vivo

¡VAMOS AL CÓDIGO!
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:

//CODIGO HTML DE REFERENCIA


<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);
console.log(paises[1].innerHTML);
console.log(paises[2].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.

//CODIGO HTML DE REFERENCIA


<div>
<div>CONTENEDOR 2</div>
<div>CONTENEDOR 3</div>
</div>
//CODIGO JS
let contenedores = document.getElementsByTagName("div");
console.log(contenedores[0].innerHTML);
console.log(contenedores[1].innerHTML);
console.log(contenedores[2].innerHTML);
Ejemplo aplicado:
Recorre HTMLcollection con For...Of
let paises = document.getElementsByClassName("paises");
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.

//CODIGO HTML DE REFERENCIA


<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!”
InnerHTML
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
//CODIGO HTML DE REFERENCIA
<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
//CODIGO HTML DE REFERENCIA
<div id=”contenedor”></div>
A través de la propiedad //CODIGO JS
className de algún nodo let container = document.getElementById("contenedor")
seleccionado podemos acceder // cambio el código HTML interno
al atributo class del mismo y container.innerHTML = “<h2>Hola mundo!</h2>”
definir cuáles van a ser sus
// cambio el atributo class
clases:
container.className = “container row”
//Resultado en el DOM
<div id=”contenedor” class=“container row”>
<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();

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


//Eliminando el primer elemento de clase paises
paises[0].remove()
Obtener datos de Inputs
Para obtener o modificar datos de un formulario HTML desde JS,
podemos hacerlo mediante el DOM. Accediendo a la propiedad value de
cada input seleccionado:

//CODIGO HTML DE REFERENCIA


<input id = "nombre" type="text">
<input id = "edad" type="number">

//CODIGO JS
document.getElementById("nombre").value = "HOMERO";
document.getElementById("edad").value = 39;
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 sintaxis
permite seleccionar
de CSS para selectores: nodos con la misma
let parrafo = document.querySelector("#contenedor p") sintaxis que utilizamos
// seleccionar sólo el contenedor por id con # en los selectores de
CSS.
let contenedor = document.querySelector("#contenedor")

// o por clase:
parrafo = document.querySelector(".texto")
Query Selector
Lo interesante del querySelector es que también aplica a pseudo-clases
de CSS, brindando un nivel más avanzado de precisión:

let radioChecked = document.querySelector(".radio:checked")

Suponiendo que tengo elementos html radio button y quiero seleccionar


sólo aquel que esté en checked, ésto lo puedo lograr muy fácil con
querySelector y la pseudo-clase :checked de CSS.
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
simulador. JavaScript. Debe identificar el apellido
✓ Identificar el flujo de trabajo del script del alumno/a en el nombre de archivo
en términos de captura de entradas comprimido por “PreEntrega2+Apellido”.
ingresadas por el usuario,
procesamiento esencial del simulador y
notificación de resultados en forma de
salida.
ENTREGA DEL PROYECTO FINAL

Estructura, variables y objetos


Objetivos específicos Sugerencias
✓ Capturar entradas mediante prompt(). ✓ Si bien, por el momento solo podemos
✓ Declarar variables y objetos necesarios hacer entradas con prompt() y salidas
para simular el proceso seleccionado. con alert() o console.log(), es suficiente
✓ Crear funciones y/o métodos para para empezar a pensar el proceso a
realizar operaciones (suma, resta, simular en términos de entradas,
concatenación, división, porcentaje, variables, estructuras, funciones,
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().
ENTREGA DEL PROYECTO FINAL

Estructura, variables y objetos


Se debe entregar Para tener en cuenta
✓ Estructura HTML del proyecto. ✓ La estructura hace referencia a el html y
✓ Variables de JS necesarias. css, correspondientes al armado de la
✓ Funciones esenciales del proceso a página general, pero que el JS que se
simular. evalúa, aún no está interactuando con
✓ Objetos de JS. 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?
¡Completa tu carrera
y potencia tu desarrollo
profesional!
Ingresando el cupón CONTINUATUCARRERA tendrás un
descuento para inscribirte en el próximo nivel.

Puedes acceder directamente desde la plataforma,


entrando en la sección Cursos y carreras.
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

También podría gustarte