algo sobre DOM

zyon · #1 (**permalink**) 20/04/2007, 07:46

que tal,m estoy viendo algo de DOM, pero no logro entender por completo lo de los nodos, por ejemplo intento pasar los siguientes datos a un combo por ejemplo con,

<datos>
<campo1>001</campo1>
<campo2>002</campo2>
<campo3>003</campo3>
<campo4>004</campo4>
<campo5>005</campo5>
</datos>

podrian solo darme un ejemplo con eso? no lo comprendo aun :(

tunait · #2 (**permalink**) 21/04/2007, 02:34

Hola qué tal

Se supone que estos datos son xml ¿no?

zyon · #3 (**permalink**) 23/04/2007, 06:12

si, pero como es sobre manejarlos con DOM crei que me podrian ayudar en este foro de JavaScript! deberia hacer la pregunta en XML?

Francisco01 · #4 (**permalink**) 23/04/2007, 10:28

DOM es php, yo lo podria en el de php.

Un saludo

zyon · #5 (**permalink**) 23/04/2007, 11:01

enserio es PHP? que no se maneja con JS? ya me estoy confundiendo :P

tunait · #6 (**permalink**) 23/04/2007, 13:01

Cita:

Iniciado por zyon

si, pero como es sobre manejarlos con DOM crei que me podrian ayudar en este foro de JavaScript! deberia hacer la pregunta en XML?

No, está bien la pregunta en este foro. Sin embargo hay que hacer algún paso extra para acceder al objeto xml y usar el DOM para tomar los datos y crear html.

Deja que prepare un ejemplo y te lo pongo

un saludo

zyon · #7 (**permalink**) 23/04/2007, 13:26

a excelente, me ayudaria ver tu ejemplo y ver ese paso al que te refieres, lo espero con ancias!!!

tunait · #8 (**permalink**) 23/04/2007, 16:29

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

zyon · #9 (**permalink**) 23/04/2007, 17:07

wow! pues lo probare y me hare lios un rato, péro cuando dices que necesitamos un PARSER XML, te refieres a una salida que me devuelva un objeto tipo XML? es que io lo manejo con un JSP que me genera de salida un XML (funciona bien esa parte), no se si sea lo mismo ? y muchas gracias por el ejemplo, voy a probarlo como dije y te hecho un grito por si me atoro (que seguramente pasara!) , gracias de nuevo!!!

tunait · #10 (**permalink**) 23/04/2007, 17:12

No hay de qué, ya me contarás

zyon · #11 (**permalink**) 23/04/2007, 17:19

mm como tu llamas a crear el objeto es algo diferente a lo que io tengo, cuando tu haces

xmlDatos.load("zyon.xml");//

es lo mismo a si io hiciera

ajax.open("POST", url, true);
...
var datosXML = ajax.responseXML;

?

y tampoco entiendo esta liena:

for(var m in XMLdatos.documentElement.childNodes)

ademas de que cuando ejecuto la función y llega a esa linea truena...

tunait · #12 (**permalink**) 23/04/2007, 17:24

mmm veo que el IE se queja con un par de sentencias ...

puedes usar esta condición para el bucle

Código:

for(var m=0; m < xmlDatos.documentElement.childNodes.length;m++)

en vez de esta otra

Código:

for(var m in xmlDatos.documentElement.childNodes)

Y usar la alternativa que mencioné más arriba para ponerle el texto a las opciones

Código:

opcion.appendChild(document.createTextNode(xmlDatos.documentElement.childNodes[m].firstChild.nodeValue))

en lugar de

Código:

opcion.text = xmlDatos.documentElement.childNodes[m].firstChild.nodeValue

tunait · #13 (**permalink**) 23/04/2007, 17:44

Cita:

Iniciado por zyon

y tampoco entiendo esta liena:

for(var m in XMLdatos.documentElement.childNodes)

Es un tipo de bucle que itera tantas veces como elementos encuentra en un array

Cita:

Iniciado por zyon

ademas de que cuando ejecuto la función y llega a esa linea truena...

Sí, es lo que te mencionaba un par de mensajes más arriba

zyon · #14 (**permalink**) 23/04/2007, 17:47

mm si me confunde esto, en estos dias que empese a ver AJAX no he leido algo como lo que tu haces xmlDatos.load(datosXML); pero veo que siempre usan el oAjax.open y el oAjax.response(); no entiendo bien a que te refieres con el PARCER, osea con el xmlDatos.load(datosXML);

zyon · #15 (**permalink**) 23/04/2007, 17:53

mm osea que despues de hacer el XMLdatos=oAjax.responseXML; debo poner la linea oAjax.load(XMLdatos); ?

tunait · #16 (**permalink**) 23/04/2007, 18:00

Cita:

Iniciado por zyon

mm si me confunde esto, en estos dias que empese a ver AJAX no he leido algo como lo que tu haces xmlDatos.load(datosXML); pero veo que siempre usan el oAjax.open y el oAjax.response(); no entiendo bien a que te refieres con el PARCER, osea con el xmlDatos.load(datosXML);

No he usado mucho Ajax y lo poco que he hice tuve que cambiarlo por problemas de accesos denegados que obtenía desde algunos servidores cuando enviaba datos con POST.

Por otro lado tampoco he trabajado con xml con ajax; lo que he hecho ha sido usando responseText así que desconozco si al usar responseXML haya que cargar el parser "a mano" o si lo carga por las suyas.

Yo "diría" que se debe cargar el parser igual que si se tratara de un documento .xml externo. Al fin y al cabo es lo mismo, sólo que lo que se recoge con ajax está guardado en una variable pero es igual un documento xml lo que se obtiene.<--(Información errónea)

El parser vendría a ser el encargado de 'interpretar' el contenido xml.

zyon · #17 (**permalink**) 23/04/2007, 18:18

eso mismo tengo entendi que hace el responseXML, que interporeta el objeto que recive como un XML y lo he mandado a imprimir y en efecto es un XML bien formado, por eso lo del parse que mencionas me pierde un poco :S, la funcion ya corre , solo que me crea el select con null únicamente, debería darme todas los valores que estenb entre las etiqueta campoX, no?

zyon · #18 (**permalink**) 23/04/2007, 18:21

:S no lei tu último mensaje, dejame checarlo y te digo...por ahorita tengo que irme, pero ya mañana tempranito te digo que inda, gracais por tu atencion, enserio te lo agradesco!!!! nos leemos mañana!

tunait · #19 (**permalink**) 24/04/2007, 04:33

Pues tienes toda la razón. El xml que se llega está listo para usar sin instanciar al parser a mano. He estado jugando un poco (primera vez que juego con responseXML).

Así que puedes usar directamente la variable en donde recoges el response en la función que crea el selector.

var datosXML = ajax.responseXML;

creaSelector()

y la función recoge de datosXML

Código:

function creaSelector(){
	var selector = document.createElement('select')
	for(var m=0; m < datosXML.documentElement.childNodes.length;m++){
		if(datosXML.documentElement.childNodes[m].nodeType == 1){
			opcion = document.createElement('option')
			opcion.appendChild(document.createTextNode(datosXML.documentElement.childNodes[m].firstChild.nodeValue))
			selector.appendChild(opcion)
		}
	}
	document.body.appendChild(selector)
}

tunait · #20 (**permalink**) 24/04/2007, 04:47

He eliminado y/o corregido y/o avisado de información errónea que había puesto en algunos mensajes anteriores para no confundir a quien venga detrás buscando información al respecto

p.d. si no me dedicara a responder a las 2 de la mañana seguramente haría pruebas antes de responder estupideces

zyon · #21 (**permalink**) 24/04/2007, 09:13

ya pribandolo de nuevo no me ha dado nada :(, mi XML es:

Código HTML:

<datos>
<campo1>001</campo1>
<campo2>002</campo2>
<campo3>003</campo3>
<campo4>004</campo4>
<campo5>005</campo5>
</datos>

e implemento :

Código HTML:

function MostrarConsulta(url){
...
ajax=objetoAjax();
        ajax.open("POST", url,true);
...
vari = ajax.responseXML;
creaSelector();
...
}//fin de función

llamando a :

Código HTML:

function creaSelector(){
	var selector = document.createElement('select');
	for(var m=0; m < vari.documentElement.childNodes.length;m++){
		if(vari.documentElement.childNodes[m].nodeType == 1){
			opcion = document.createElement('option');
			opcion.appendChild(document.createTextNode(vari.documentElement.childNodes[m].firstChild.nodeValue));
			selector.appendChild(opcion);
		}
	}
	document.body.appendChild(selector);
}

solo me manda un select con un valor escrtito de "null", en la linea

Código HTML:

opcion.appendChild(document.createTextNode(vari.documentElement.childNodes[m].firstChild.[B]nodeValue[/B]));

le modifique:

Código HTML:

opcion.appendChild(document.createTextNode(vari.documentElement.childNodes[m].firstChild.[B]data[/B]));

y eso me arroja "undefined" como valor escrito...que mas me sugeririras hacer? la verdad no tengo idea, de hecho me gustaria que me explicaras como esta linea :

Código HTML:

opcion.appendChild(document.createTextNode(vari.documentElement.childNodes[m].firstChild.nodeValue));

navega por la estructura del XML ... espero no estar artandote con el tema :( pero enserio te agradesco toda tu atencion aunque respondas tonterias :P como dices!!!

tunait · #22 (**permalink**) 24/04/2007, 09:49

Nada, no me estoy hartando. El tema me ha venido bien para refrescar un poco el asunto este y para aprender alguna cosilla del responseXML

Un detalle, ¿te has asegurado de que la variable vari sea una variable global?

Igual, te he dejado un ejemplo en marcha en mi servidor
http://tunait.com/pruebas/zyon.php

zyon · #23 (**permalink**) 24/04/2007, 15:07

si, la declare global a ver que la usare en otra función, checo la liga mañana, hoy tengo un problema, pero mañana le seguire, gracias por el tiempo!

zyon · #24 (**permalink**) 24/04/2007, 18:19

hey, corregi un errorsillo por hay que tenia y ya jala!!!! se me me ha ocurrido hacer algo para probar algo mas sobre el manejo de los nodos, el dato te lo paso mañana, lo probare antes a ver que me da, enseri, muchas gracias!!!

zyon · #25 (**permalink**) 25/04/2007, 17:14

tratare de implementarlo a la forma donde me lo pidieron, solo que tambien me pidieron itras cosas, pero en cuanto pueda digo que paso!!!

zyon · #26 (**permalink**) 26/04/2007, 09:22

que tal, TUNAIT o alguién mas, nunca lo havia pensado, pero se puede mandar un arreglo como parametro?