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++
RSS. Suscribir canal. Buscar en Aprende Web
Traducir página
Visita nuestro blog:
y entérate de las novedades o deja un comentario.
Dudas y sugerencias:
Sobre ésta página
última modificación: 13-07-2018.
Visitas este mes: 42
Visitas el mes pasado: 97
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
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:
- Comprobamos en primer lugar si el navegador (objeto window) admite el objeto XMLHttpRequest().
if (window.XMLHttpRequest) ... - Si lo admite creamos un nuevo objeto XMLHttpRequest():
xhttp=new XMLHttpRequest(); - Abrimos el nuevo objeto creado. Usamos para ello el método open(), en el cual incluimos tres parámetros. El primero
y el tercero son siempre iguales, y el segundo es la ruta del archivo XML:
xhttp.open("GET","agenda.xml",false); - Enviamos el objeto al servidor:
xhttp.send(); - Recogemos la respuesta, la cual será el objeto DOM de la página XML: xmlDoc=xhttp.responseXML;
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:
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
imprimir esta página
Página creada por ANYELGUTI.
Sugerencias:
aprendeweb@aprende-web.net. Envia un 
Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog
Más sobre anyelguti en http://anyelguti.16mb.com