dom html - java script
DESCRIPTION
Utilizando Javascript para acceder al DOM.TRANSCRIPT
DOM - HTML - JavaScript
Teórico - Práctico
Document Object Model
Cuando la página web se carga el Navegador arma el DOM
DOM – HTML
<html> <head> <title>My Title</title> </head> <body> <a href=“”>My Link</a> <h1>My Header</h1> </body></html>
DOM – HTML - JS
Con DOM y JS se puede modificar el HTML: • JS puede cambiar TODOS los elementos HTML de la página• JS puede cambiar TODOS los atributos HTML de la página• JS puede cambiar TODOS los estilos CSS styles de la página• JS puede eliminar elementos y atributos HTML• JS puede agregar nuevos elementos y atributos HTML• JS puede reaccionar a los eventos HTML de la página• JSc puede crear nuevos eventos HTML en la página
DOM – HTML - JS
DOM Programming Interface
La forma de modificar el documento HTML:– Propiedades– Métodos– Valores
DOM – HTML - JS
Buscar elementos:• HTML por id• HTML por el nombre de la etiqueta• HTML por el nombre de la clase• HTML por el nombre de la colección del tipo
de objeto
DOM – HTML - JS
var x=document.getElementById("intro");
var y=x.getElementsByTagName("p");
var z=document.getElementsByClassName("intro");
DOM – HTML - JS
• document.anchors: todos los elementos <a>
• document.body: todos los elementos en <body>
• document.documentElement: devuelve el elemento <html>
• document.embeds: todos los elementos con <embed>
• document.forms: todos los forms del documento
• document.head: todos los elementos del <head>
• document.images: todas las imágenes del documento
• document.links: todos los valores de href en <area> y <a>
• document.scripts: todos los <scripts>
• document.title: el título del documento
DOM – HTML - JS<!DOCTYPE html><html><body>
<img src="pic_htmltree.gif"> <img src="pic_navigate.gif"> <p id="demo">
<script> document.getElementById("demo").innerHTML = “Cantidad de imágenes: " + document.images.length; </script>
</body></html>
Cantidad de imágenes: 2
DOM – HTML - JS
Modificar elementos:• elemento.innerHTML = asignar un valor• elemento.attribute = asignar un valor al
atributo• elemento.setAttribute(attribute,value) • elemento.style.property = setear una
propiedad de estilo
DOM – HTML - JS<!-- Cambio contenido --><!DOCTYPE html><html><body>
<h1 id="header">Encabezado</h1>
<script>var elemen = document.getElementById("header");elemen.innerHTML = “Nuevo Encabezado";
</script>
</body></html>
DOM – HTML - JS<!-- Modifico un atributo --><!DOCTYPE html><html><body>
<img id="image" src=“unaimagen.gif”><script> document.getElementById("image").src=“otraimagen.jpg”;</script>
</body></html>
DOM – HTML - JS<! -- Cambio el estilo de un elemento -- ><!DOCTYPE html><html><body>
<p id="p2">Hola Mundo!</p>
<script>document.getElementById("p2").style.color="blue";</script>
</body></html>
DOM – HTML - JS
Agregar/Eliminar elementos:
• document.createElement() = crea un elemento• document.removeChild() = elemina un hijo • document.appendChild() = agrega un hijo• document.replaceChild() = reemplaza un hijo• document.write(text) = escribe en el HTML
DOM – HTML - JS<div id="div1"> <p id="p1">Párrafo uno.</p> <p id="p2">Párrafo dos.</p></div>
<script>var para=document.createElement("p"); var node=document.createTextNode(“Este nodo es nuevo");
para.appendChild(node);
var elemen=document.getElementById("div1");
elemen.appendChild(para);</script>
DOM – HTML - JS<!DOCTYPE html><html><body> <div id="div1"> <p id="p1">Este se va.</p> <p id="p2">Este se queda.</p></div>
<script> var parent = document.getElementById("div1"); var child = document.getElementById("p1"); parent.removeChild(child);</script>
</body></html>
DOM – HTML - JS<!DOCTYPE html><html><body>
<div id="div1"><p id="p1">Este se reemplazará.</p><p id="p2">Este se queda como está.</p>
</div><script>
var parent=document.getElementById("div1");var child=document.getElementById("p1");var para=document.createElement("p");var node=document.createTextNode(“Este es el reemplazante.”);para.appendChild(node);parent.replaceChild(para,child);
</script></body></html>
DOM – HTML - JS
Eventos sobre los que podemos reaccionar:• Clicks mouse• Página ha sido cargada• Imagen ha sido cargada• Mouse se mueve sobre un elemento• Input ha cambiado• HTML form submitted• Usuario teclea
DOM – HTML - JS• Reaccionar a un evento click:
<h1 onclick="this.innerHTML=‘Ops!’">Click aquí!</h1>
• Asignar eventos:- Como atributo
<button id=“unBoton” onclick="displayDate()"> Ver Fecha </button>
- Usando HTML DOMdocument.getElementById(“unBoton”).onclick=function(){displayDate()};
DOM – HTML - JS
• onmousedown – onmouseup
Escribir un script que implemente la funcionalidad de: onmousedownup.html