Dom html - java script

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

<!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

<!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 DOM
document.getElementById(“unBoton”).onclick=function(){displayDate()};

DOM – HTML - JS
• onmousedown – onmouseup
Escribir un script que implemente la
funcionalidad de: onmousedownup.html

Dom html - java script

Más contenido relacionado

La actualidad más candente (20)

Similar a Dom html - java script (20)

Último (11)

Dom html - java script