Documento XML con DOM utilizado en Navegadores

(Anterior) XML: El navegador en el futuro

Vea esta aplicación en Acción.

El siguiente fragmento de código demuestra como cargar un documento XML al "Browser" y manipularlo a través de DOM mediante funciones JavaScript, la manipulación también contempla los requerimientos necesarios para lograr una interoperabilidad entre los diversos navegadores del mercado.

El documento XML a ser manipulado/cargado es el siguiente:

<?xml version="1.0"?>

<mensajes>

   <dia>Hoy es Domingo.</dia>
   <dia>Hoy es Lunes.</dia>
   <dia>Hoy es Martes.</dia>
   <dia>Hoy es Miércoles.</dia>
   <dia>Hoy es Jueves.</dia>
   <dia>Hoy es Viernes.</dia>
   <dia>Hoy es Sábado.</dia>

</mensajes>

El documento HTML / XHTML que contiene las declaraciones para manipular el archivo XML, inicia con las siguientes declaraciones :

<html>
<head>
<title>Documento XML con DOM utilizado en Navegadores</title>
</head>

<body>

<div id="fecha" style="position: absolute; 
                          left: 300px; 
                          top: 100px; 
                          width: 200px; 
                          height: 150px; 
                          background-color:yellow">
</div>

Como se puede observar, el cuerpo (<body>) del documento consta de un elemento <div> el cual lleva por nombre fecha, es dentro de este Tag (capa) que serán colocados los valores extraídos del documento XML.

Una vez definido el "layer"(capa) se declaran las diversas funciones JavaScript que llevarán acabo el procesamiento; a diferencia de otros ejemplos que definen sus declaraciones dentro de los elementos <head>, las funciones serán definidas dentro del elemento <body>, esto es necesario debido a que las funciones interactúan directamente con los elementos del contenido (<div>) .

La primer serie de declaraciones es la siguiente :

<script type="text/javascript">
<!-- 

// Cargar Documento XML en Arbol DOM 
// Iniciar condicional para Detectar Browsers Explorer/Netscape

if (window.ActiveXObject) {

var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async=false; 

} else if (document.implementation && document.implementation.createDocument) {

var xmlDoc= document.implementation.createDocument("","doc",null);
}

// Todas las declaraciones DOM posteriores son interoperables 

// Cargar el Documento XML
xmlDoc.load("semanal.xml");

Se define el elemento <script> para incluir las definiciones JavaScript.
La condicional verifica el tipo de "Browser" que esta cargando el documento; al indicarse window.ActiveXObject se esta verificando si el objeto como tal existe en el "Browser", en este caso se conoce que dicho objeto únicamente existe en Navegadores "Internet Explorer"; la definición document.implementation && document.implementation.createDocument verifica si ambos objetos se encuentran en el "Browser", dicha condición siempre resulta verdadera en Navegadores Netscape/Mozilla.
En base al tipo de "Browser", se genera una variable de acuerdo a las especificaciones del Navegador, la cual será utilizada para el documento XML.
A través del método load (Del Objeto xmlDoc) se carga el documento XML, en este caso llamado (semanal.xml).

Posteriormente se define la función getDia, que realiza la parte central de la lógica :

// Expresion ("Regular Expression") para detectar cualquier caracter.
// excepto espacios en Blanco ("Whitespace") 
var caracteresNoBlanco = /\S/

// Funcion para extraer el día de la semana del Sistema 
function getDia(){

// Extraer elemento XML y colocarlo en Objeto 
var msgobj = xmlDoc.getElementsByTagName("mensajes")[0]

// Eliminar espacios en Blanco ("Whitespace") del documento XML file. 
// Necesario para Netscape 7/Mozilla

// Iniciar un Ciclo por el número de Elemento XML 
for (i=0;i < msgobj.childNodes.length;i++){
  if ((msgobj.childNodes[i].nodeType == 3) && (!caracteresNoBlanco.test(msgobj.childNodes[i].nodeValue))) {
         // Esta condicional se cumple si es un nodo de Texto en Blanco 
         msgobj.removeChild(msgobj.childNodes[i])
         i--
     }
  }

// Investigar el día del Sistema
var dateobj=new Date()
var hoy=dateobj.getDay() //Valor entre  0 y 6. 0=Domingo

// En base al día del Sistemas, extraer el valor del Documento XML 
//  y colocarlo en el elemento div
document.getElementById("fecha").innerHTML=
xmlDoc.getElementsByTagName("mensajes")[0].childNodes[hoy].firstChild.nodeValue
}

Antes de iniciarse la definición getDia se define un elemento a través de Regular Expressions para identificar caracteres distintos a espacios en Blanco ("Whitespace"); lo anterior es un requerimiento para Navegadores "Netscape".
A través del método getElementsByTagName se extraen los elementos anidados dentro del tag mensajes, los cuales son colocados en el Objeto msgobj.
Se define un ciclo para eliminar todos aquellos elementos en blanco ("Whitespace") del Objeto msgobj; lo anterior es un requerimiento para Navegadores "Netscape".
Se declara un Objeto Date para extraer el día del sistema, mediante el método getDay.
Finalmente se extrae el valor del documento XML en base al día del sistema, y es colocado dentro del elemento <div> a través de la declaración document.getElementById("fecha").innerHTML.

La invocación del método (getDia) descrito anteriormente, también varía en base al tipo de Navegador :

// Condicional para invocar la función getDia()

// Con Internet Explorer, simplemente llamar ejecutar método
// esta llamada directa es posible debido a la propiedad "async"
if (window.ActiveXObject) { 
 getDia()
}  else  { 
//Con Netscape 8/Mozilla, ejecutar función una vez cargado el Objeto (Documento XML)
 xmlDoc.onload=getDia
}
//-->
</script>
</body>
</html>

Se define una condicional para invocar correctamente el método getDia en base al tipo de Navegador.
Finalmente se clausuran los elementos <script>, <body> y <html>.

[Cerrar Ventana]