Ver Mensaje Individual
  #8 (permalink)  
Antiguo 23/04/2007, 16:29
Avatar de tunait
tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 23 años, 6 meses
Puntos: 381
Re: algo sobre DOM

Bueno, a ver si no te lío demasiado ...

Para leer el documento xml necesitamos un parser xml. Lo primero que debemos hacer es crear una instancia del parser que tenga implementado el navegador y cargar el documento xml en esta instancia.

El xml podemos tenerlo en un archivo xml externo o podemos tenerlo guardado en una variable de tipo string. Para el ejemplo que te pongo usaré un xml de nombre zyon.xml

Para crear la instancia del parser xml hay que contemplar por un lado al IE y por el otro al resto de navegadores (como para todo, vamos).

Una función que se encargue de averiguar qué soporta el navegador y cómo debe cargar el parser sería algo como esto

Código:
var xmlDatos //variable en donde guardaremos la instancia del parser xml
function cargaDatos(){
	if (window.ActiveXObject){//Si es IE pasará por aquí 
	  xmlDatos = new ActiveXObject("Microsoft.XMLDOM");
	  xmlDatos.async=false;
	  xmlDatos.load("zyon.xml");//carga el documento xml en el parser
	  creaSelector() //llamada a la función que hará algo con los datos del xml
	 }
//el resto de navegadores crearán la instancia del parser con las sentencias del else
	else if (document.implementation && document.implementation.createDocument){
	  xmlDatos= document.implementation.createDocument("","",null);
	  xmlDatos.load("zyon.xml");//carga el documento xml en el parser
	  xmlDatos.onload=creaSelector //llamada a la función que hará algo con los datos del xml
	 }
}
Llamamos a la función al cargar el documento

<body onload="cargaDatos()">

Ahora tenemos el parser con el xml cargado y podemos trabajar con esos datos. Querías hacer un combo.

Lo primero es crear el tag select para el combo
Código:
var selector = document.createElement('select')
Lo siguiente será crear tantas opciones como nodos hijos tiene el elemento raíz del documento xml.

Código:
xmlDatos.documentElement.childNodes
Podemos crear un bucle que itere por cada nodo hijo del elemento raíz (documentElement)

Sin embargo cada salto de línea en el documento xml es considerado como un nodo de tipo texto (salvo en IE)

En el documento xml tenemos lo siguiente

Código:
<?xml version="1.0" encoding="iso-8859-1"?>
<datos>[salto de línea]
<campo1>001</campo1>[salto de línea]
<campo2>002</campo2>[salto de línea]
<campo3>003</campo3>[salto de línea]
<campo4>004</campo4>[salto de línea]
<campo5>005</campo5>[salto de línea]
</datos>
Eso son 5 nodos de elementos (tipo element) más 6 saltos de línea (tipo text ) que dan un total de 11 nodos (para explorer sólo los 5 de elementos)

Así que en cada iteración deberemos discriminar según el tipo de nodo que sea para quedarnos sólo con los nodos de tipo element

verificamos el tipo con el atributo nodeType. Devuelve 1 para los de tipo element y 3 para los de tipo text

if(xmlDatos.documentElement.childNodes[m].nodeType == 1)

En caso afirmativo creamos una opción para el selector

opcion = document.createElement('option')

El elemento que queremos lo tenemos en xmlDatos.documentElement.childNodes[m] y el valor de ese nodo se encuentra en su primer nodo hijo que es de tipo text y que es su nodeValue.

Se lo asignamos como texto a la opción que hemos creado
Código:

opcion.text = xmlDatos.documentElement.childNodes[m].firstChild.nodeValue
 
aunque también podríamos haberlo agregado como nodo hijo de tipo text a la opción
Código:
opcion.appendChild(document.createTextNode(xmlDatos.documentElement.childNodes[m].firstChild.nodeValue))
Una vez creada la opción se la colocamos al select, que es su nodo padre

selector.appendChild(opcion)

y una vez terminada la iteración agregamos el select a donde corresponda.

document.body.appendChild(selector)

aunque sería más apropiado meterlo dentro de un form, claro.

La función quedaría así

Código:
function creaSelector(){
	var selector = document.createElement('select')
	for(var m in xmlDatos.documentElement.childNodes){
		if(xmlDatos.documentElement.childNodes[m].nodeType == 1){
			opcion = document.createElement('option')
			opcion.text = xmlDatos.documentElement.childNodes[m].firstChild.nodeValue
			selector.appendChild(opcion)
		}
	}
	document.body.appendChild(selector)
}
No sé si te haya liado aún más

Un saludo
__________________
Javascript Códigos - Bambú difunde