Consulta complicada sobre DOM

frijolerou · #1 (**permalink**) 23/04/2006, 22:53

Que tal gentes!!

Supongamos que tengo un documento HTML con la siguiente estructura:

Código:

<body>
    <div>
        <form>
            <div>
                <div></div>
            </div>
        </form>
    </div>
    <div>
            <div></div>
    </div>
</body>

Si quiero "capturar" todos los elementos DIV del documento puedo hacer esto:

Código:

lista = document.getElementsByTagName('DIV');

Y si no se me ha olvidado como contar, me entregaría una lista de 6 elementos. Pero lo que en realidad necesito es lo siguiente: capturar sólo aquellos DIV's que no estén anidados (directa o indirectamente) dentro de otro DIV (que en código de ejemplo que puse serían sólo 2).

El lío es que para esto no puedo disponer ni del atributo CLASS ni del atributo ID de cada DIV.

¿Será muy complicado de realizar?
Se supone que

caricatos · #2 (**permalink**) 24/04/2006, 00:49

Hola:

La verdad es que es algo complejo, y requiere algo más de código... Los hodos hijos de uno dado se obtienen con el array childNodes... luego hay que discriminar los que no son div...

var losDivs = new Array();
for (i = 0, hijos = document.body.childNodes, total = hijos.length; i < total; i ++)
if (hijos[i].tagName == "DIV") losDivs[losDivs.length] = hijos[i];

Bueno, lo puse "a capella" pero es la manera que se me ocurre...

Saludos

tunait · #3 (**permalink**) 24/04/2006, 01:53

Hola

tal vez podrías repasarlos y verificar si su parentNode.tagName.toLowerCase() == 'body'

frijolerou · #4 (**permalink**) 24/04/2006, 11:45

hola Tunait y Caricatos:

Cita:

Iniciado por tunait

tal vez podrías repasarlos y verificar si su parentNode.tagName.toLowerCase() == 'body'

El problema es que un DIV que no es descendiente de otro DIV tampoco sea nodo hijo de BODY. De todoas formas tu respuesta me iluminó y llegué a una solución (no sé si la más óptima, pero me sirvió) que detallo a continuación.

Código:

// Capturo todos los DIVs del documento
lista = document.getElementsByTagName('DIV');

// Recorro el contenido de la lista mediante un bucle.
for(i=0; i<lista.length; i++){
    /* 
      De manera recursiva voy recorriendo los "nodos ancestros" (ni idea 
      cual será el nombre técnico) de cada elemento de la lista, hasta 
      llegar a un DIV o aun BODY (que será mi tope).
    */
    nodoPadre = lista[i].parentNode;
    if(nodoPadre.nodeName != 'DIV' && nodoPadre.nodeName != 'BODY')
        nodoPadre = nodoPadre.parentnode;

    /* 
      Si el valor final de "nodoPadre" es "BODY" significa que el elemento 
      de la lista no es descendiente de un DIV, y por lo tanto, me sirve
    */
    if(nodoPadre.nodeName == 'BODY')
        alert('Este DIV me sirve');

}