Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Logo

Aprende Web

Crea y diseña tus sitios en la Web.

Manual de DOM

El DOM (document object model) marca la escructura de la página


Y ahora tambien aprende a programar en C++ con Aprende Web C++

logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net





Sobre ésta página

Ültima modificación: 29-01-2016.

Visitas este mes: 273

Visitas el mes pasado: 277

logo
WEB-GRAFÍA

Mi agradecimiento a las siguientes páginas Web. en las cuales me he basado para la elaboración de este manual:


Introducción a XML
Desarrollo Web
DOM
mozilla.org
php: DOM manual
php.net
Document Object Model (DOM) Level 1 Specification
W3C.org
Especificación del Modelo de Objetos del Documento (DOM), Nivel 1
Traducción de W3C: conclase.net
HTML DOM Tutorial
w3schools.com
XML DOM Tutorial
w3schools.com

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.




DOM (IV)

Acceso al DOM en XML

imagen dom

Acceder con javascript

En HTML accedemos al documento o DOM simplemente con la palabra clave document. El propio documento y la página web son el mismo archivo, por lo que no tenemos que crear nuevos archivos para mostrar el documento.

En XML el documento muestra simplemente una información estructurada. Los archivos XML son en sí archivos de datos estructurados. Por lo tanto para acceder al documento con javascript, lo haremos desde otra página en HTML.

Debemos por tanto "capturar" el documento XML y pasarlo a javascript como un objeto del tipo "HTML-Document". Para ello la mayoría de los navegadores tienen una objeto o método llamado XMLHttpRequest() el cual captura el documento XML y lo devuelve como un objeto documento.


Capturar el documento XML

Como hemos explicado anterioremente el Documento XML lo capturamos mediante el método XMLHttpRequest(). Veamos cómo funciona este método. Supongamos que tenemos un archivo XML llamado agenda.xml, queremos capturar este archivo en otra página html (miagenda.html), para mostrar todos o algunos datos del archivo XML. Para ello en el archivo html, abrimos un script javascript con el siguiente contenido:

if (window.XMLHttpRequest) {
   xhttp=new XMLHttpRequest();
   }
xhttp.open("GET","agenda.xml",false);
xhttp.send();
xmlDoc=xhttp.responseXML; 

Expliquemos este script:

A partir de aquí la variable xmlDoc contiene el objeto documento del archivo XML, desde el cual podremos acceder a todos sus contenidos.

Esto funciona para la mayoría de los navegadores, pero no con todos, ya que Internet Explorer version 5 y 6 no reconocen el objeto XMLHttpRequest() como un método de window. En su lugar debemos poner un objeto "ActiveX". Esto nos obliga a modificar el código anterior para que pueda funcionar también con estos navegadores:

if (window.XMLHttpRequest) {
   xhttp=new XMLHttpRequest();
   }
//con Explorer 5 y 6:
else {
   xhttp=new ActiveXObject("Microsoft.XMLHTTP");
   }
xhttp.open("GET","agenda.xml",false);
xhttp.send();
xmlDoc=xhttp.responseXML;

Ahora ya tenemos el código completo para obtener el DOM en un documento XML. El código para obtener el DOM de cualquier página XML es siempre el mismo, y lo único que cambia es la ruta del documento, que la pondremos como segundo parámetro del método open()


Archivo javascript aparte

Ya que para obtener el DOM de un documento XML usamos siempre el mismo código (excepto la ruta del archivo), por comodidad, rapidez y para no tener que repetir el código para cada documento XML, podemos crear una función, que contenga el código anterior.

A esta función le pasaremos como parámetro la ruta del archivo, y nos devolverá el xmlDoc o objeto-documento de la página. Para poder acceder a la función desde varias páginas lo pondremos en un archivo javascript aparte. Creamos así el archivo cargaDocXML.js con el siguiente contenido:

function cargaDocXML(rutaxml)
{
if (window.XMLHttpRequest) {
   xhttp=new XMLHttpRequest();
   }
else {
   xhttp=new ActiveXObject("Microsoft.XMLHTTP");
   }
xhttp.open("GET",rutaxml,false);
xhttp.send();
return xhttp.responseXML;
}

Una vez que hemos creado y guardado el archivo anterior, desde la página html (miagenda.html) sólo tenemos que abrir un link javascript a este archivo en la cabecera, y luego en el código javascript llamar a la función cargaDocXML(), pasando como parámetro la ruta de la página XML, por ejemplo:

<html>
<head>
<title>mi agenda</title>
<script type="text/javascript" src="cargaDomXML.jx"></script>
<script type="text/javascript">
xmlDoc=cargaDocXML("agenda.xml");
// ... continua el código javascript ...
</script>
</head>
<body>
.....
</body>
</html>

En negrita vienen destacadas las líneas con las que accedemos al DOM del XML. En la primera cargamos la función (en un archivo aparte) con la que accedemos al DOM, y en la segunda llamamos a la función, concretando (en el parámetro) la ruta del archivo.

A partir de aquí la variable xmlDoc (o la que pongamos en su lugar), actua igual que el objeto document del HTML. Podemos acceder a los elementos del archivo XML de la misma manera que accedemos a los elementos de un archivo HTML, es decir usando las mismas propiedades y métodos del DOM que usamos con document, pero en este caso con xmlDoc.


Ejemplo de acceso a archivo XML

Veremos esto en las siguientes páginas de este manual. De momento veamos un ejemplo sencillo de como acceder a algunos elementos de un archivo XML con javascript. Tenemos el siguiente archivo XML llamado milibro.xml.

<?xml version="1.0" encoding="iso-8859-15"?>
<libro>
  <titulo>Don Juan Tenorio</titulo>
  <autor>José Zorrilla</autor>
  <genero>teatro clásico</genero>
  <año>1844</año>
</libro>

Ponemos en el mismo directorio el archivo javascript con la función de cargar el archivo XML cargaDocXML.js .

Creamos el archivo HTML donde recogemos los datos del archivo XML y los sacamos en pantalla. le llamamos milibro.html :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Page title</title>
<script type="text/javascript" src="cargaDocXML.js"></script>
<script type="text/javascript">
//cargar el documento XML
xmlDoc=cargaDocXML("milibro.xml");
//obtener datos y preparar su salida
mititulo=xmlDoc.getElementsByTagName("titulo")[0].childNodes[0].nodeValue;
mititulo="<p>Libro: "+mititulo+"</p>";
miautor=xmlDoc.getElementsByTagName("autor")[0].childNodes[0].nodeValue;
miautor="<p>Autor: "+miautor+"</p>";
migenero=xmlDoc.getElementsByTagName("genero")[0].childNodes[0].nodeValue;
migenero="<p>Género: "+migenero+"</p>";
mianyo=xmlDoc.getElementsByTagName("año")[0].childNodes[0].nodeValue;
mianyo="<p>Ano: "+mianyo+"</p>";
//sacar datos en la página
window.onload=function() {
texto=document.getElementById("milibro");
texto.innerHTML=mititulo+miautor+migenero+mianyo;
}
</script>
</head>
<body>
<h1>Libro</h1>
<div id="milibro"></div>
</body>
</html>

El archivo milibro.html recoge los datos obtenidos en el archivo XML. Este quedará como en el siguiente enlace:

milibro.html


Para obtener los datos del archivo XML en primer lugar hemos accedido al documento mediante la función en archivo externo que activa el objeto XMLHttpRequest().

El objeto devuelto por la función (xmlDoc) actúa igual que el objeto document en HTML, pero con el archivo XML. Para obtener los datos del archivo XML le aplicamos los siguientes métodos y propiedades:

  • getElementsByTagName() : Accedemos a las etiquetas que tengan como nombre el indicado en el parámetro. Como este método devuelve un array, indicamos que queremos acceder al primer elemento de ese array mediante [0].
  • childNodes[0] : Mediante esta propiedad accedemos al primer nodo hijo del elemento anterior, el cual es el nodo de texto de la etiqueta.
  • nodeValue : Esta propiedad nos da el valor del nodo de texto anterior, el cual no es otro que el propio texto de la etiqueta.

En este ejemplo hemos accedido al texto de las etiquetas de la página XML. En las siguientes páginas seguiremos viendo las posibilidades que hay de ver o cambiar el archivo XML.

NOTA: En algunos navegadores como Internet Explorer necesitamos además subir la página al servidor (el cual debe tener PHP o ASP) para poder verla, o en su defecto tener instalado un servidor local en el ordenador, como el que instala el programa XAMPP (en windows). -Ver manual de PHP , página 1.3 Instalar XAMPP para la instalación de este programa.






En la siguiente página veremos cómo obtener mediante javascript los distintos elementos de la página XML

Acceso a elementos XML



Manual de DOM

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un manda un correo

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com