Usuario:ManuelRomero/JavaScript/dom/domJS - Historial de revisiones

ManuelRomero en 13:10 10 mar 2016

2016-03-10T13:10:23Z

ManuelRomero en 13:08 10 mar 2016

2016-03-10T13:08:47Z

ManuelRomero: /* Acceso a los nodos */

2016-03-10T12:59:05Z

‎Acceso a los nodos

ManuelRomero en 12:58 10 mar 2016

2016-03-10T12:58:15Z

ManuelRomero en 12:52 10 mar 2016

2016-03-10T12:52:33Z

ManuelRomero en 13:43 9 mar 2016

2016-03-09T13:43:31Z

ManuelRomero: /* Qué se puede hacer en JavaScript */

2016-03-07T07:28:10Z

‎Qué se puede hacer en JavaScript

ManuelRomero: /* Creación de nodos */

2016-03-06T22:37:58Z

‎Creación de nodos

ManuelRomero en 22:28 6 mar 2016

2016-03-06T22:28:59Z

ManuelRomero: Página creada con « ===DOM===
====Qué es el DOM==== Es un estándar de la W3C. Es una abreviatura de HTML Document Object Model. *Consiste en un conjunto de obje...»

2016-03-06T22:28:23Z

Página creada con « ===DOM=== </div> <div class="slide"> ====Qué es el DOM==== *Es un estándar de la W3C. *Es una abreviatura de HTML Document Object Model. *Consiste en un conjunto de obje...»

Página nueva

===DOM===
</div>
<div class="slide">
====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).
{{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.
</div>
<div class="slide">
====Ejemplo: Objeto document====
<source lang="html4strict">
<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>
</source>
</div>

<div class="slide">

====Arbol de nodos====
[[Archivo:dom_html.png|300px|thumb|left|Estructura de documento html según estándar DOM ]]
<source lang="html4strict">
<!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>

</source>
</div>
<div class="slide">

====Acceso a los nodos====
*Acceso directo
*A través de sus nodos padre
<source lang="javascript">
//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");
</source>
</div>

<div class="slide">
====Creación de nodos====
<source lang="javascript">
// 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);

</source>
</div>

<div class="slide">
====Eliminación de nodos====
<source lang="javascript">
var parrafo = document.getElementById("provisional");
parrafo.parentNode.removeChild(parrafo);

<p id="provisional">...</p>

</source>
</div>
<div class="slide">
====Acceso directo a atributos====
<source lang="javascript">
var enlace = document.getElementById("enlace");
alert(enlace.href); // muestra http://www...com
....
<a id="enlace" href="http://www...com">Enlace</a>
</source>
</div>
<div class="slide">
*Para obtener las propiedades CSS, mediante el atributo style:
<source lang="javascript">
var imagen = document.getElementById("imagen");
alert(imagen.style.margin);
....
<img id="imagen" style="margin:0; border:0;" src="logo.png" />
</source>

*Si el nombre de una propiedad CSS es compuesto, se accede a su valor modificando ligeramente su nombre:
:font-weight se transforma en fontWeight<br>
:line-height se transforma en lineHeight

</div>

<div class="slide">
<source lang="html4strict">
<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>
</source>

</div>

<div class="slide">

====Ejemplos====
<source lang="html4strict">
<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>
</source>

</div>

@@ Línea 3: / Línea 3: @@
 __TOC__
 ===DOM===
-</div>
 <div class="slide">
 ====Qué es el DOM====
@@ Línea 102: / Línea 102: @@
 </source>
   }}
 {{Actividad|
 *Vamos a hacer un programa que me muestre todos los elementos que tiene mi página
 *Lo vamos a hacer creando una función

@@ Línea 105: / Línea 105: @@
 *Vamos a hacer un programa que me muestre todos los elementos que tiene mi página
 *Lo vamos a hacer creando una función
-<hr />
+[[Usuario:ManuelRomero/JavaScript/dom/domJS/ejemplo1|<font size=3 color=red>Solución</font>]]
-[[Usuario:ManuelRomero/JavaScript/dom/objetosJSCGenerales/ejemplo1|<font size=3 color=red>Solución</font>]]
 }}
 ===Accediendo y modificando sus atributos
@@ Línea 115: / Línea 114: @@
 *element.setAttribute(attribute, value)	 Igual que el caso anterior
 *element.style.property = new style	Cambia el estilo del elementos html especificado
 ====Creación de nodos====

@@ Línea 100: / Línea 100: @@
    var parrafo = parrafos[i];
+}
   }}
 {{Actividad|

@@ Línea 90: / Línea 90: @@
 {{Actividad|
-Title=buscar elementos "p" de una página }}
+Title=buscar elementos "p" de una página|
 <source lang="javascript">
 //buscaremos todos los parrafos a partir del elemento document
@@ Línea 100: / Línea 100: @@
    var parrafo = parrafos[i];
+}
 {{Actividad|
-*Vamos a hacer un programa que me muestre todos los elemntos que tiene mi págna
+*Vamos a hacer un programa que me muestre todos los elementos que tiene mi página
-*Lo vamos a hacer creando una funcion}}
+*Lo vamos a hacer creando una función
 ===Accediendo y modificando sus atributos
 *Una vez hemos localizado un elemento, tendremos que poder modificar desde el programa valores para que se puedan ver las acciones a realizar

@@ Línea 52: / Línea 52: @@
 </div>
 <div class="slide">
 <div class="slide">
@@ Línea 76: / Línea 58: @@
   elementos
   atributos
-  Estilos css
+  estilos css
 ;Pemite añadir y eliminar elementos y atributos dentro de la página
 ;Permite reaccionar ante cualquier evento
@@ Línea 93: / Línea 75: @@
 *Cuál es el URI del documento
   }}
 ====Creación de nodos====

@@ Línea 108: / Línea 108: @@
 [[Usuario:ManuelRomero/JavaScript/dom/domJS/ejemplo1|<font size=3 color=red>Solución</font>]]
 }}
-===Accediendo y modificando sus atributos
+===Accediendo y modificando sus atributos===
 *Una vez hemos localizado un elemento, tendremos que poder modificar desde el programa valores para que se puedan ver las acciones a realizar
 element= document.getElementsById("x");
@@ Línea 116: / Línea 116: @@
 *element.style.property = new style	Cambia el estilo del elementos html especificado
 ====Acceso directo a atributos====
 <source lang="javascript">
@@ Línea 188: / Línea 165: @@
 <div class="slide">
-====Ejemplos====
-<source lang="html4strict">
-<html>
+====Creación de nodos====
-	<head>
+<source lang="javascript">
-		<script type="text/javascript">
+// Crear nodo de tipo Element
-			function startTime()
+var parrafo = document.createElement("p");
+// Crear nodo de tipo Text
-				var today=new Date();
+var contenido = document.createTextNode("Hola Mundo!");
-				var h=today.getHours();
+// Añadir el nodo Text como hijo del nodo Element
-				var m=today.getMinutes();
+parrafo.appendChild(contenido);
-				var s=today.getSeconds();
+// Añadir el nodo Element como hijo de la pagina
-				m=checkTime(m);// add a zero in front of numbers<10
+document.body.appendChild(parrafo);
-				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>
 </source>
 </div>

← Revisión anterior		Revisión de 22:28 6 mar 2016
Línea 1:		Línea 1:
		+	{{Usuario:ManuelRomero/JavaScript/dom/nav}}

		+	__TOC__
	===DOM===		===DOM===
	</div>		</div>