Seleccionar elemento hijo de un documento xml / seleccionar hijo con javascript

paskuini · #1 (**permalink**) 26/09/2011, 02:26

Necesito ayuda con esto que ahora os cuento.
Tengo un documento xml con la siguiente estructura:

Código PHP:

  <CATALOGO> 
    <CATEGORIA> 
        <SUBCATEGORIA> 
            <PRODUCTOS> 
                <PRODUCTO1> 
                    <NOMBRE>Producto1</NOMBRE> 
                    <DESCRIPCION>Esto es una prueba de xml</DESCRIPCION> 
                    <QUOTE>Probando xml</QUOTE> 
                    <FOTO1>../img/p1.jpg</FOTO1> 
                    <FOTO2>../img/p2.jpg</FOTO2> 
                    <FOTO3>../img/p3.jpg</FOTO3> 
                    <FOTO4>../img/p4.jpg</FOTO4> 
                    <FOTO5>../img/p5.jpg</FOTO5> 
                    <FOTO6>../img/p6.jpg</FOTO6> 
                </PRODUCTO1> 
                <PRODUCTO2> 
                    <NOMBRE>Producto2</NOMBRE> 
                    <DESCRIPCION>Esto es una prueba de xml</DESCRIPCION> 
                    <QUOTE>Probando xml</QUOTE> 
                    <FOTO1>../img/p1.jpg</FOTO1> 
                    <FOTO2>../img/p2.jpg</FOTO2> 
                    <FOTO3>../img/p3.jpg</FOTO3> 
                    <FOTO4>../img/p4.jpg</FOTO4> 
                    <FOTO5>../img/p5.jpg</FOTO5> 
                    <FOTO6>../img/p6.jpg</FOTO6> 
                </PRODUCTO2> 
            </PRODUCTOS> 
        </SUBCATEGORIA> 
        <SUBCATEGORIA> 
            <PRODUCTOS> 
                <PRODUCTO1> 
                    <NOMBRE>Prueba PRODUCTOSs 2</NOMBRE> 
                    <DESCRIPCION>Esto es una prueba de xml</DESCRIPCION> 
                    <QUOTE>Probando xml</QUOTE> 
                    <FOTO1>../img/p1.jpg</FOTO1> 
                    <FOTO2>../img/p2.jpg</FOTO2> 
                    <FOTO3>../img/p3.jpg</FOTO3> 
                    <FOTO4>../img/p4.jpg</FOTO4> 
                    <FOTO5>../img/p5.jpg</FOTO5> 
                    <FOTO6>../img/p6.jpg</FOTO6> 
                </PRODUCTO1> 
            </PRODUCTOS> 
        </SUBCATEGORIA> 
    </CATEGORIA> 
</CATALOGO>

y un documento html con la siguiente:

Código PHP:

  <html> 
    <head> 
        <style> 
            body{font-family:Verdana, Geneva, sans-serif;} 
            h1{font-size:2em;} 
            h2{font-size:1.5em;} 
            h3{font-size:1em;} 
            img{padding:5px;} 
        </style> 
    </head> 
    <body> 
     
    <script type="text/javascript"> 
        if (window.XMLHttpRequest)  {// code for IE7+, Firefox, Chrome, Opera, Safari 
          xmlhttp=new XMLHttpRequest(); 
          } 
        else  {// code for IE6, IE5 
          xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
          } 
        xmlhttp.open("GET","productos.xml",false); 
        xmlhttp.send(); 
        xmlDoc=xmlhttp.responseXML; 
         
        var x=xmlDoc.getElementsByTagName("PRODUCTOS"); 
        for (i=0;i<x.length;i++) 
          { 
          document.write("<h1>"); 
          document.write(x[i].getElementsByTagName("NOMBRE")[0].childNodes[0].nodeValue); 
          document.write("<h1><h2>"); 
          document.write(x[i].getElementsByTagName("DESCRIPCION")[0].childNodes[0].nodeValue); 
          document.write("</h2><h3>"); 
          document.write(x[i].getElementsByTagName("QUOTE")[0].childNodes[0].nodeValue); 
          document.write("</h3><img src='"); 
          document.write(x[i].getElementsByTagName("FOTO1")[0].childNodes[0].nodeValue); 
          document.write("'/><img src='"); 
          document.write(x[i].getElementsByTagName("FOTO2")[0].childNodes[0].nodeValue); 
          document.write("'/><img src='"); 
          document.write(x[i].getElementsByTagName("FOTO3")[0].childNodes[0].nodeValue); 
          document.write("'/><img src='"); 
          document.write(x[i].getElementsByTagName("FOTO4")[0].childNodes[0].nodeValue); 
          document.write("'/><img src='"); 
          document.write(x[i].getElementsByTagName("FOTO5")[0].childNodes[0].nodeValue); 
          document.write("'/><img src='"); 
          document.write(x[i].getElementsByTagName("FOTO6")[0].childNodes[0].nodeValue); 
          document.write("'/>"); 
          } 
    </script> 
     
    </body> 
</html>

el script que tengo me muestra los artículos dentro de <PRODUCTOS>; pero yo quiero que me muestre los HIJOS de la etiqueta <PRODUCTOS>.
¿Cómo selecciono el elemento hijo con javascript?

paskuini · #2 (**permalink**) 26/09/2011, 02:32

He solucionado lo del xml cargándome <productos> y <productoX> para reemplazarlas por <producto>. He visto la luz... jejej menuda tontería.
De todas formas,

Cita:

Iniciado por paskuini

¿Cómo selecciono el elemento hijo con javascript?

zerokilled · #3 (**permalink**) 26/09/2011, 03:10

buenas,
simplemente explora los nodos. por ejemplo, childNodes contiene una lista de todos los nodos de un elemento. firstChild selecciona el primer nodo de un elemento. nextSibling selecciona el nodo que le sigue al nodo. previousSibling selecciona un nodo que le antecede al nodo. visualizalo como una relación de familia donde hay padres, hijos y hermanos.

paskuini · #4 (**permalink**) 26/09/2011, 03:27

Muchas gracias, zerokilled! como siempre, tu ayuda es de gran utilidad! :D

P.D.

Al final, tendré que dejar el xml como al principio. estoy mirando... se puede seleccionar elementos del xml por sus atributos?

Panino5001 · #5 (**permalink**) 26/09/2011, 03:40

Podés usar el método getAttribute

paskuini · #6 (**permalink**) 26/09/2011, 05:13

Según lo que pone aquí: XML DOM getAttribute() Method

Cita:

Iniciado por Example

The following code fragment loads "books.xml" into xmlDoc using loadXMLDoc() and gets the value of the "category" attribute in all <book> elements:

Código PHP:

  xmlDoc=loadXMLDoc("books.xml"); 
 
x=xmlDoc.getElementsByTagName('book'); 
 
for (i=0;i<x.length;i++) 
{ 
document.write(x[i].getAttribute('category')); 
document.write("<br />"); 
}

books.xml
Esto lo que hace es devolverte el valor del atributo... Yo lo que quisiera es buscar el valor del atributo directamente y que me devuelva a qué objeto pertenece. Como si fuese un ID, vamos... Perdonad mi ignorancia, pero es la primera vez que veo xml...

Panino5001 · #7 (**permalink**) 26/09/2011, 05:48

Podés usar algo así: http://snipplr.com/view/1853/ o directamente xPath

zerokilled · #8 (**permalink**) 26/09/2011, 05:51

se me ocurre que puedes intentar con xpath. pero como no estoy al tanto, no se estoy seguro si xpath puede hacer ese tipo de selección, además de si es compatible con los navegadores principales. de todos modos, aunque bien getAttribute devuelve el valor del atributo, supongo que la idea de panino era que viajes por los nodos determinando la existencia del atributo. yo diria, que en lugar de getAttribute, uses hasAttribute si vas a implementar ese método.

paskuini · #9 (**permalink**) 26/09/2011, 07:33

Finding Elements by Id in a DOM Document Using XPath

Ahora mismo lo pruebo. Muchas gracias a los dos!