Logo

Complementos y nuevas tendencias en la programación web

Manuales web avanzados

Por Anyelguti

Este curso forma parte del proyecto Aprende Web

logo

DOM V

Acceso a elementos XML

Acceso a la página de XML

En la página anterior vimos cómo podíamos acceder al DOM de una página en XML mediante el método XMLHttpRequest(), y vimos también un pequeño ejemplo de cómo acceder a algunos elementos de la página.

A partir de aquí se desarrollan una serie de tecnologías que unen varios lenguajes de programación, conocidas como Ajax.

Sin entrar a explicar como funciona ajax, (lo cual lo dejamos para el manual de ajax), veremos aquí los métodos y propiedades más habituales para acceder a los elementos de XML mediante javascript.

Acceso a elementos XML

Aunque cabría pensar que se pueden utilizar los mismos métodos del DOM que en HTML para acceder a los elementos de XML, esto no es así ya que métodos como getElementById() o getElementsByName() no pueden usarse con XML, ya que para ello XML debería tener algunas etiquetas predefinidas, cosa que no ocurre.

Por tanto el único método que podemos usar para localizar etiquetas XML es getElementsByTagName().

En realidad tenemos varios procedimientos para acceder a los elementos:

Usar el método getElementsByTagName()

Tal como hemos visto en la página anterior, usamos el método con cada etiqueta y vamos llamando a cada uno de los elementos del array que lo forman. Esto presupone que tenemos que saber el nombre de cada una de las etiquetas y la cantidad de etiquetas que hay con cada nombre.

Recorrer los elementos (nodos) del documento.

Volvamos al ejemplo de la página anterior donde teníamos el archivo libro.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>

Cargamos el documento (recordamos que lo hacíamos mediante la función cargaDomXML(), en archivo javascript aparte) el cual lo obtenemos en la variable xmlDoc. A partir de ahí mediante la propiedad xmlDoc.childNodes creamos un array con todos los nodos hijos del nodo documento. Como en cualquier array podemos recorrer los elementos mediante un bucle. Las repeticiones del bucle vienen determinadas por la longitud del array, la cual se determina mediante la propiedad length. Veamos ahora cómo ver este archivo en una página HTML mediante javascript. Página libro.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("libro.xml");
//Obtener array con todos los nodos secundarios:
nodos=xmlDoc.getElementsByTagName("libro")[0].childNodes;
var salida=""; //variable que recogerá los datos
//bucle para recorrer el array
for (i=0;i<nodos.length;i++) { 
    if (nodos[i].nodeType==1) { //sólo nodos tipo "element" (Type=1)
       nombre=nodos[i].nodeName; //Nombre de la etiqueta
       valor=nodos[i].childNodes[0].nodeValue; //texto de la etiqueta
       salida+="<p>"+nombre+": "+valor+"</p>"; //añadir a variable de salida.
       }
    }
//sacar datos en la página
window.onload=function() {
texto=document.getElementById("milibro");
texto.innerHTML=salida;
}
</script>
</head>
<body>
<h1>Libro</h1>
<div id="milibro"></div>
</body>
</html>

la página anterior se verá como en el siguiente enlace:

Documento libro

En este sencillo ejemplo accedemos a los elementos mediante la propiedad childNodes que crea el array que recorremos con el bucle.

Una vez accedemos a cada elemento, a éstos les aplicamos varias propiedades que nos darán la información que necesitamos, estas son nodeType, nodeName, nodeValue, las cuales explicaremos más adelante.

El texto de dentro de cada etiqueta es un nodo aparte que depende del nodo etiqueta, es por eso que debemos acceder al texto (nodo de texto) como el primer nodo hijo de cada etiqueta (nodo element).

Mediante la propiedad nodeTypehemos restringido el acceso sólo a los nodos de tipo "element". Hacemos esto así para que no se muestren otros tipos de nodos que se pueden crear, y que no nos interesa que aparezcan.

Éste es un ejemplo sencillo en el que todas las etiquetas dependen de la etiqueta raíz. En caso de que hubiera más etiquetas anidadas hijas unas de otras, deberíamos repetir el proceso, creando un bucle dentro de otro o creando una función que compruebe si cada etiqueta tiene mas etiquetas dependientes, y mostrando su valor.

propiedades y métodos más comunes

Propiedades

Otras propiedades que podemos aplicar a cualquier nodo de XML son firstChild, lastChild, previousSibbling, nextSibbling, las cuales vienen explicadas en la página III de este manual.

.

métodos

Podemos usar los mismos métodos que se usan en la manipulación del DOM para HTML, excepto, como se ha dicho antes, los métodos getElementById() y getElementsByName(). La forma de usarlos es igual que que con HTML. Con ellos podemos crear, remplazar, insertar, o duplicar cualquier nodo. Aunque vienen explicados en la página III de este manual, y de una forma más amplia en el curso de javascript, recordemos cuales son éstos:






En la siguiente página seguiremos viendo cómo trabajar con XML y el DOM.

Aspectos de XML y DOM



Manual de DOM

Anterior siguiente     Siguiente siguiente

Ver estadísticas

Free counter and web stats
Visita nuestro foro:

Puedes consultar tus dudas y sugerencias:

sobre el foro (info y entrar)

Página creada por ANYELGUTI.

Manda tus sugerencias:
aprendeweb@ymail.com ... manda un correo