document object model: dom

John Cardozo

John Cardozo

document object model: dom

html + css + js

HTML

CSS

Describe el contenido

Describe el estilo

Javascript

Brinda interactividad

FRONTEND

Código

HTML Y dom

<html>
  <head>
   <title>
     Mi página
   </title> 
  </head>
  <body>
    <h1>
      Artículo
    </h1>
    <div class="datos">
      <p>
        parrafo 1
      </p>
      <p>
        parrafo 2
      </p>
    </div>
  </body>
</html>

elemento

elemento padre de <h1> y <div>

elemento raíz

elementos hijos de <div>

elemento hermano de <body>

representación gráfica

<p>

párrafo 2

párrafo 1

Artículo

Mi página

<p>

<div>

<h1>

<title>

<body>

<head>

<html>

document

class=datos

elemento raíz

elemento

atributo

texto

manipulación del dom

Reaccionar a eventos en una página

Modificar los elementos de una página

Crear y agregar elementos y atributos a una página

Eliminar elementos y atributos en una página

Modificar los atributos de los elementos de una página

Modificar el CSS de los elementos de una página

Crear nuevos eventos en una página

objetos

propiedades

métodos

eventos

web

móviles

escritorio

elementos y selectores

<a 
   id="enlacePrincipal" 
   href="http://www.python.org" 
   class="enlace">
  Haga click aquí
</a>

tag

texto

identificador

atributo

clase

a

.enlace

#enlacePrincipal

input[type=text]

tag

class

identificador

atributo

SELECTORES

obtener elementos

getElementById

var elemento = document.getElementbyId("titulo");
<h1 id="titulo" class="encabezado">
  Artículo del día
<h1/>

getElementsByTagName

var lista = document.getElementsByTagName("a");

HTML

getElementsByClassName

var lista = document.getElementsByClassName("encabezado");

elemento

HTMLCollection

HTMLCollection

similar a un arreglo

document

obtener elementos: CSS SELECTORS

querySelectorAll

var items = document.querySelectorAll("li.item");
<ul id="lista">
  <li class="item">America</li>
  <li class="item">Europa</li>
  <li class="item">Asia</li>
</ul>

HTML

NodeList

querySelector

var item = document.querySelector("li.item");
var ul = document.querySelector("#lista");

Node

actualizar el contenido

textContent o innerHTML

var titulo = document.getElementById("titulo");
// Modifica el HTML interno del elemento
titulo.textContent = "Articulo modificado";
<h1 id="titulo">Articulo principal</h1>
<a 
  id="linkPython" 
  href="http://www.python.org">Python
</a>

HTML

attribute

var elemento = document.getElementById("linkPython")
elemento.href = "http://www.javascript.com";

atributos

getAttribute

// Obtiene el elemento
let imagen = document.getElementById("imagen");

// Obtiene el valor del atributo "alt"
let alt = imagen.getAttribute("alt");
<img 
     id="imagen" 
     src="sun.png" 
     alt="sol">

HTML

setAttribute

// Obtiene el elemento
let imagen = document.getElementById("imagen");

// Modifica el valor del atributo "alt"
imagen.setAttribute("alt", "sun");

modificando el estilo

style

var titulo = document.getElementById("titulo")
titulo.style.color = "red"
<h1 id="titulo">Continentes</h1>
<ul id="lista">
  <li class="item">America</li>
  <li class="item">Europa</li>
  <li class="item">Asia</li>
</ul>

HTML

.item{
  color: blue;
}

CSS

agregar clases css

classList.add

// Obtiene el elemento
let li1 = document.getElementById("li1");
// Agrega las clases
li1.classList.add("clase1");
li1.classList.add("clase-padding");
<ul id="listaPaises">
  <li id="li1">Colombia</li>
  <li id="li2">Ecuador</li>
  <li id="li3">Peru</li>
</ul>

HTML

.clase-padding{
  padding: 10px;
}

.clase1{
  background: blue;
  color: red;
}

CSS

eliminar clases

classList.remove

// Obtiene el elemento
let li1 = document.getElementById("li1");

// Agrega las clases
li1.classList.remove("clase1");
<ul id="listaPaises">
  <li id="li1">Colombia</li>
  <li id="li2">Ecuador</li>
  <li id="li3">Peru</li>
</ul>

HTML

.clase-padding{
  padding: 10px;
}
.clase1{
  background: blue;
  color: red;
}

CSS

alternar clases

classList.toggle

// Obtiene el elemento
let li1 = document.getElementById("li1");

// Agrega/elimina la clase css
li1.classList.toggle("clase1");    
<ul id="listaPaises">
  <li id="li1">Colombia</li>
  <li id="li2">Ecuador</li>
  <li id="li3">Peru</li>
</ul>

HTML

.clase-padding{
  padding: 10px;
}
.clase1{
  background: blue;
  color: red;
}

CSS

eventos

El usuario hace click en un elemento

La página web se carga

Una imagen es cargada

El mouse se mueve sobre un elemento

El valor de un input cambia

Un formulario envía información al servidor

El usuario oprime una tecla

eventos dom

usando el atributo

<h1 onclick="this.innerHTML = 'se hizo click'">Titulo</h1>

invocando una función desde un atributo

<h1 onclick="cambiar(this)">Contenido</h1>

<script>
function cambiar(elemento) {
  elemento.innerHTML = "Se hizo click";
}
</script>

Asignando un evento a un elemento

document.getElementById("titulo2").onclick = mostrarFecha;

function mostrarFecha(){
  console.log(new Date());
}

escuchar eventos

escuchar un evento

elemento

evento

reaccionar al evento

evento ejecutado

elemento reacciona

EJEMPLO

2

1

Botón

Click

escucha

Se hace click en el botón

reacciona

El botón ejecuta una función

add event listener

addEventListener

elemento.addEventListener("evento", handler);

Asocia un handler a un elemento

Un elemento puede tener varios handlers

Un handler se puede asociar a cualquier elemento

Separa el HTML del Javascript

función

anónima

function

arrow

ejemplos de eventos

document - DOMContentLoaded

document.addEventListener("DOMContentLoaded", function () {
  console.log("Cargó el DOM!");
});

element - click

// Obtiene el botón
let boton = document.getElementById("boton");

// Asocia el evento "click" con la función clickHandler
boton.addEventListener("click", clickHandler);

// Función que responde al click en el botón
function clickHandler(event){
  console.log("Se hizo click en el botón");
}

varios eventos a un mismo elemento

click, mouseOver, mouseOut

// Obtiene el elemento
let boton = document.getElementById("boton");

// Función al pasar el mouse sobre el boton
const mouseOverHandler = () => {
    console.log("Mouse sobre el botón");
}
// Función al hacer click en el botón
const clickHandler = () => {
    console.log("Click en el botón");
}
// Función al sacar el mouse del botón
const mouseOutHandler = () => {
    console.log("El mouse salió del botón");
}

// Asociar los eventos con los handlers en el elemento
boton.addEventListener("mouseover", mouseOverHandler);
boton.addEventListener("click", clickHandler);
boton.addEventListener("mouseout", mouseOutHandler);

relación entre elementos

<h1>

<div>

<div id="area">
  <h1 id="titulo">titulo</h1>
  <p id="parrafo">contenido</p>
</div>

<p>

parentElement

firstElementChild

lastElementChild

nextElementSibling

previousElementSibling

<div> es el padre de <h1> y <p>

<h1> es el primer hijo de <div>

<p> es el último hijo de <div>

<h1> tiene un hijo (nodo texto "titulo")

<div> tiene 2 hijos: <h1> y <p>

<p> tiene un hijo (nodo texto "contenido")

<h1> y <p> son hermanos

navegación: hijos

<div id="area">
  <h1 id="titulo">titulo</h1>
  <p id="parrafo">contenido</p>
</div>
let area = document.getElementById("area");

// HTMLCollection			
let hijos = area.children;

Longitud = 2

// Accede al primer hijo
let e1 = area.firstElementChild;

// Accede al último hijo
let e2 = area.lastElementChild;

// Accede al primer hijo tag
let e3 = area.children[0]);

navegación: padre y hermanos

<div id="area">
  <h1 id="titulo">titulo</h1>
  <p id="parrafo">contenido</p>
</div>
let parrafo = document.getElementById("parrafo");

// Obtiene el elemento padre
let padre = parrafo.parentElement;

<div id="area">

// Obtiene los elementos
let titulo = document.getElementById("titulo");
let parrafo = document.getElementById("parrafo");

// Obtiene el hermano siguiente
let hermano1 = titulo.nextElementSibling;

// Obtiene el hermano anterior
let hermano2 = parrafo.previousElementSibling;

<p id="parrafo">

parent

siblings = hermanos

<h1 id="titulo">

navegación: recorrer hijos

<ul id="departamentos">
  <li>Antioquia</li>
  <li>Cundinamarca</li>
  <li>Santander</li>
  <li>Valle</li>
</ul>
let departamentos = document.getElementById("departamentos");
  for (let index = 0; index < departamentos.children.length; index++) {
    console.log(departamentos.children[index]);
  }

índice

  Array.from(departamentos.children).forEach((dep) => {
    console.log(dep);
  });

forEach

HTMLCollection no es un arreglo

crear y adicionar elementos

<div id="area">
</div>
// Obtiene el <div>
let area = document.getElementById("area");
// Crea el <ul>
let ul = document.createElement("ul");
// Crea los <li>
let li1 = document.createElement("li");
li1.textContent = "America";  // Agrega texto al <li>

let li2 = document.createElement("li");
// Crea un TextNode y lo agrega al <li>
let texto2 = document.createTextNode("Asia");
li2.appendChild(texto2)

let li3 = document.createElement("li");
li3.textContent = "Europa";  // Agrega texto al <li>

// Agrega los <li> al <ul>
ul.appendChild(li1);
ul.appendChild(li2);
ul.appendChild(li3);
// Agrega el <ul> al <div>
area.appendChild(ul);
<div id="area">
  <ul>
    <li>America</li>
    <li>Asia</li>
    <li>Europa</li>
  </ul>
</div>

createTextNode

textContent

innerText

agregar texto al elemento

append(elemento1, elemento2, ...)

append permite agregar varios elementos a la vez

insertar nodos

<ul id="listaPaises">
  <li id="p1">Colombia</li>
  <li id="p3">Ecuador</li>
  <li id="p4">Peru</li>
</ul>
// Obtiene la lista
let ulPaises = document.getElementById("listaPaises");

// Obtiene el elemento del pais
let pais = document.getElementById("p3");

// Crea el nuevo elemento
let nuevo = document.createElement("li");
nuevo.innerHTML = "Bolivia";
nuevo.id = "p2";

// Inserta el nuevo elemento
ulPaises.insertBefore(nuevo, pais);
<ul id="listaPaises">
  <li id="p1">Colombia</li>
  <li id="p2">Bolivia</li>  
  <li id="p3">Ecuador</li>
  <li id="p4">Peru</li>
</ul>

Insertar un elemento antes de otro

eliminar nodos

<ul id="listaPaises">
  <li id="p1">Colombia</li>
  <li id="p2">Bolivia</li>  
  <li id="p3">Ecuador</li>
  <li id="p4">Peru</li>
</ul>
// Obtiene el elemento
let elemento = document.getElementById("p3");

// Elimina el elemento
elemento.remove();

Eliminar un elemento

// Obtiene el elemento padre
let padre = document.getElementById("listaPaises");

// // Obtiene el elemento hijo
let hijo = document.getElementById("p3");

// Elimina el elemento hijo
padre.removeChild(hijo);

Eliminar un elemento hijo

<ul id="listaPaises">
  <li id="p1">Colombia</li>
  <li id="p2">Bolivia</li>  
  <li id="p4">Peru</li>
</ul>

reemplazar nodos

<ul id="listaPaises">
  <li id="p1">Colombia</li>
  <li id="p2">Bolivia</li>  
  <li id="p3">Ecuador</li>
  <li id="p4">Peru</li>
</ul>
// Obtiene el elemento padre
let ulPaises = document.getElementById("listaPaises");

// Obtiene el elemento a reemplazar
let antiguo = document.getElementById("p3");

// Crea el nuevo elemento
let reemplazo = document.createElement("li");
reemplazo.innerHTML = "Chile"
reemplazo.id = "p5"

// Reemplaza el nodo hijo por el nuevo nodo
ulPaises.replaceChild(reemplazo, antiguo);

Reemplazar hijo

<ul id="listaPaises">
  <li id="p1">Colombia</li>
  <li id="p2">Bolivia</li>  
  <li id="p5">Chile</li>    
  <li id="p4">Peru</li>
</ul>

administrador de TAREAS: HTML

<div>
  <label for="tarea">Tarea</label>
  <input type="text" id="tarea">
  <button id="boton">Agregar</button>
</div>
<ul id="lista">
<!--
  <li>
    <input type="checkbox">Estudiar <span>x</span>
  </li>
-->
</ul>

ADMINISTRADOR DE TAREAS: CSS

body {
  font-family: 'Lucida Sans', sans-serif;
}
span {
  color: white;
  background: rgb(242, 112, 112);
  font-size: 0.5em;
  padding: 3px 5px;
  border-radius: 10px;
  float: right;
  cursor: pointer;
}
ul {
  list-style-type: none;
  width: 50%;
  margin: 10px;
  padding: 0px;
}
li {
  padding: 5px;
  background: rgb(235, 235, 235);
  border-radius: 5px;
  margin: 2px;            
}
.terminada {
  background: rgb(203 251 178);
  text-decoration: line-through;
}

ADMINISTRADOR DE TAREAS: CLICK BOTON

// Obtiene el boton
let boton = document.getElementById("boton");
// Agrega handler al evento click
boton.addEventListener("click", () => {
  // Obtiene la tarea
  let tarea = document.getElementById("tarea");
  // Obtiene la lista de tareas
  let lista = document.getElementById("lista")
  // Crea un elemento <li>
  let li = document.createElement("li");
  // Crea el elemento <input>
  let checkbox = document.createElement("input");
  checkbox.setAttribute("type", "checkbox");
  checkbox.addEventListener("click", clickCheckbox);
  // Crea el elemento text
  let texto = document.createTextNode(tarea.value);
  // Crea el <span> para borrar
  let span = document.createElement("span");
  span.innerText = "x";
  span.addEventListener("click", clickSpan);
  // Agrega los elementos al <li>
  li.appendChild(checkbox);
  li.appendChild(texto);
  li.appendChild(span);
  // Agrega el <li> al <ul>
  lista.appendChild(li);
  // Borra el texto digitado
  tarea.value = "";
})

ADMINISTRADOR DE TAREAS: Checkbox - span

function clickCheckbox(evento) {
  // Obtiene el checkbox al cual se le hizo click
  let elemento = evento.target;
  // Obtiene el <li> padre
  let padre = elemento.parentElement;
  // Cambia la clase del <li>
  padre.classList.toggle('terminada')
}

function clickSpan(evento){
  // Obtiene el span al cual se le hizo click
  let elemento = evento.target;
  // Obtiene el <li> padre
  let padre = elemento.parentElement;
  // Elimina el <li> de la lista
  padre.remove();
}

localstorage

Almacenamiento Local

Por dominio

Key

Value

Strings

if (typeof Storage !== "undefined") {
  console.log("LocalStorage soportado");
} else {
  console.log("LocalStorage no soportado");
}

Verifica el soporte de LocalStorage en el Browser

localstorage: GUARDAR Y OBTENER valores

const movie = {
  title: "Star Wars",
  year: 1977,
  genres: ["sci-fi", "futuristic", "action"],
};

// Guarda el objeto conviertiendo de JSON a String
localStorage.setItem("movie", JSON.stringify(movie));
// Obtiene el objeto dado un "key"
const movieFromLocalStorage = localStorage.getItem("movie");

// Verifica que se haya obtenido el objeto desde localStorage
if (movieFromLocalStorage !== null) {
  // Convierte el String a JSON
  const movieJSON = JSON.parse(movieFromLocalStorage);
  
  // Muestra la cadena
  console.log(movieFromLocalStorage);
  
  // Muestra el objeto
  console.log(movieJSON);  
}

Obtiene un objeto de LocalStorage

Guarda un objeto en LocalStorage

const cadena = JSON.stringify(objeto)
const objeto = JSON.parse(cadena)

Objeto a String

String a Objeto

john cardozo

johncardozo@gmail.com

DOM: Document Object Model

By John Cardozo

Made with Slides.com

DOM: Document Object Model

Documento Object Model: elementos, nodos, estilos, eventos.

  • 657

More from John Cardozo