Usuario:ManuelRomero/JavaScript/dom/domJS

De WikiEducator
Saltar a: navegación, buscar



DOM

</div>

Qué es el DOM

  • Es un estándar de la W3C.
  • Es una abreviatura de HTML Document Object Model.
  • Consiste en un conjunto de objetos para los html y una forma estándar para acceder y manipular las páginas (documentos html).


Icon key points.gif

Puntos clave

EL DOM nos permitirá acceder y cambiar todos los elementos de una página html


  • HTML DOM no depende de ninguna plataforma ni lenguaje de programación determinado. DOM es una utilidad disponible también para otros lenguajes como Java y PHP.
  • Alguno de los objetos son Document, Image, Body, Form, Frame, Iframe, etc.
  • Cada objeto puede tener una colección de objetos asociados, unas propiedades y unos métodos.

Ejemplo: Objeto document

<html>
	<body>
		<img border="0" src="imagen1.gif" width="48" height="48">
		<br />
		<img border="0" src="imagen2.gif" width="107" height="98">
		<br /><br />
		<script type="text/javascript">
			document.write("Este documento contiene: ")
			document.write(document.images.length + " imágenes.")
		</script>
</body>
</html>

Arbol de nodos

Estructura de documento html según estándar DOM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Página sencilla</title>
	</head>
 	<body>
		<p>Esta página es <strong>muy sencilla</strong></p>
	</body>
</html>

Acceso a los nodos

  • Acceso directo
  • A través de sus nodos padre 
//buscaremos todos los parrafos a partir del elemento document
var parrafos = document.getElementsByTagName("p");
 
var primerParrafo = parrafos[0];
 
for(var i=0; i<parrafos.length; i++) {
  var parrafo = parrafos[i];
}
 
var parrafoEspecial = document.getElementsByName("especial");
var cabecera = document.getElementById("cabecera");

Qué se puede hacer en JavaScript

Permite cambiar dentro de un página html 
elementos
atributos
Estilos css
Pemite añadir y eliminar elementos y atributos dentro de la página
Permite reaccionar ante cualquier evento
Podemos crear un evento en la páǵina

Creación de nodos

// Crear nodo de tipo Element
var parrafo = document.createElement("p");
// Crear nodo de tipo Text
var contenido = document.createTextNode("Hola Mundo!");
// Añadir el nodo Text como hijo del nodo Element
parrafo.appendChild(contenido);
// Añadir el nodo Element como hijo de la pagina
document.body.appendChild(parrafo);

Eliminación de nodos

var parrafo = document.getElementById("provisional");
parrafo.parentNode.removeChild(parrafo);
 
<p id="provisional">...</p>

Acceso directo a atributos

var enlace = document.getElementById("enlace");
alert(enlace.href); // muestra http://www...com
....
<a id="enlace" href="http://www...com">Enlace</a>
  • Para obtener las propiedades CSS, mediante el atributo style: 
var imagen = document.getElementById("imagen");
alert(imagen.style.margin);
....
<img id="imagen" style="margin:0; border:0;" src="logo.png" />
  • Si el nombre de una propiedad CSS es compuesto, se accede a su valor modificando ligeramente su nombre:
font-weight se transforma en fontWeight
line-height se transforma en lineHeight 
<html>
	<head>
		<script type="text/javascript">
			function getValue()
			{
				var x=document.getElementById("Titulo");
				alert(x.innerHTML);
			}
		</script>
	</head>
	<body>
		<h1 id="Titulo" onclick="getValue()">Este es el título</h1>
		<p>Pulsa en el título para que te salga una alert box con su valor.</p>
	</body>
</html>

Ejemplos

<html>
	<head>
		<script type="text/javascript">
			function startTime()
			{
				var today=new Date();
				var h=today.getHours();
				var m=today.getMinutes();
				var s=today.getSeconds();
				m=checkTime(m);// add a zero in front of numbers<10
				s=checkTime(s);// add a zero in front of numbers<10
				document.getElementById('txt').innerHTML=h+":"+m+":"+s;
				t=setTimeout('startTime()',500);
			}
			function checkTime(i)
			{
				if (i<10)
  				{
  					i="0" + i;
  				}
				return i;
			}
		</script>
	</head>
	<body onload="startTime()">
		<p> prueba </p>
		<div id="txt"></div>
	</body>
</html>
Obtenido de «https://es.wikieducator.org/index.php?title=Usuario:ManuelRomero/JavaScript/dom/domJS&oldid=18943»