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

El DOM como objeto

El DOM (Document Object Model) es un objeto disponible para utilizar

  • Tiene una serie de métodos o funciones que puedo utilizar para hacer cosas
  • Tiene una serio de propiedades o valores que puedo consultar
  • A continuación vamos a ir viendo métods y propiedades y viéndo qué se puede hacer


Icon casestudy.gif

Ejemplo

Propiedades de una página que puedo saber con DOM
  • Cuantos elementos html tengo
  • Cuantas imágenes tengo
  • Cuál es el contenido de un elemento concreto
  • Cual es contenido del cuerpo de la página (body)
  • Cuál es el URI del documento




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=18944»