Diferencia entre revisiones de «Usuario:ManuelRomero/JavaScript/dom/domJS»

De WikiEducator
Saltar a: navegación, buscar
 
(7 revisiones intermedias por el mismo usuario no mostrado)
Línea 3: Línea 3:
 
__TOC__
 
__TOC__
 
===DOM===
 
===DOM===
−
</div>
+
 
 
<div class="slide">
 
<div class="slide">
 
====Qué es el DOM====
 
====Qué es el DOM====
Línea 52: Línea 52:
 
</div>
 
</div>
 
<div class="slide">
 
<div class="slide">
 +
 +
<div class="slide">
 +
====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
 +
{{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
 +
}}
  
 
====Acceso a los nodos====
 
====Acceso a los nodos====
−
*Acceso directo
+
Entendemos por nodo cada uno de los elementos que puedo tener en una página html
−
*A través de sus nodos padre
+
*Así por ejemplo un image es un nodo, un párrafo un formulario etc.
 +
*Lo primero qu tenemos que hacer para poder obtener información o realizar acciones sobre un nodo es acceder a él
 +
*A continuación vamos a ver diferentes formas de acceder a un nodo o elemento
 +
{{Puntos clave
 +
|Title=Accedieno a nodo por document|
 +
#document.getElementById(id)         encuentra el elemento a través del valor del atributo '''''id'''''
 +
#document.getElementsByTagName(name) encuentra el elemento a través del tag (p, form, imge, ...)
 +
#document.getElementsByClassName(name) encuentra el elemento a través del valor del atributo '''''name'''''
 +
}}
 +
*En caso de haber muchos elementos vamos a obtener un array con todos ellos
 +
 
 +
{{Actividad|
 +
Title=buscar elementos "p" de una página|
 
<source lang="javascript">
 
<source lang="javascript">
 
//buscaremos todos los parrafos a partir del elemento document
 
//buscaremos todos los parrafos a partir del elemento document
Línea 65: Línea 100:
 
   var parrafo = parrafos[i];
 
   var parrafo = parrafos[i];
 
}
 
}
−
 
−
var parrafoEspecial = document.getElementsByName("especial");
 
−
var cabecera = document.getElementById("cabecera");
 
 
</source>
 
</source>
−
</div>
+
}}
 +
 
 +
[[a]]{{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
 +
[[Usuario:ManuelRomero/JavaScript/dom/domJS/ejemplo1|<font size=3 color=red>Solución</font>]]
 +
}}
 +
===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");
 +
*element.innerHTML =  Pone un nuevo contendio en el interior del elemento html
 +
*element.attribute = Pone un  valor del atributo especificado de un elemento concreto
 +
*element.setAttribute(attribute, value) Igual que el caso anterior
 +
*element.style.property = new style Cambia el estilo del elementos html especificado
  
−
<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====
 
====Acceso directo a atributos====
 
<source lang="javascript">
 
<source lang="javascript">
Línea 143: Línea 165:
 
<div class="slide">
 
<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>
 
</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>
 +
<div class="slide">

Última revisión de 01:10 11 mar 2016



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

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




Acceso a los nodos

Entendemos por nodo cada uno de los elementos que puedo tener en una página html

  • Así por ejemplo un image es un nodo, un párrafo un formulario etc.
  • Lo primero qu tenemos que hacer para poder obtener información o realizar acciones sobre un nodo es acceder a él
  • A continuación vamos a ver diferentes formas de acceder a un nodo o elemento


Icon key points.gif

Accedieno a nodo por document

  1. document.getElementById(id) encuentra el elemento a través del valor del atributo id
  2. document.getElementsByTagName(name) encuentra el elemento a través del tag (p, form, imge, ...)
  3. document.getElementsByClassName(name) encuentra el elemento a través del valor del atributo name



  • En caso de haber muchos elementos vamos a obtener un array con todos ellos



Icon activity.jpg

buscar elementos "p" de una página

//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];
}





a


Icon activity.jpg

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

Solució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

element= document.getElementsById("x");

  • element.innerHTML = Pone un nuevo contendio en el interior del elemento html
  • element.attribute = Pone un valor del atributo especificado de un elemento concreto
  • element.setAttribute(attribute, value) Igual que el caso anterior
  • element.style.property = new style Cambia el estilo del elementos html especificado



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>


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>
Obtenido de «https://es.wikieducator.org/index.php?title=Usuario:ManuelRomero/JavaScript/dom/domJS&oldid=19005»