Attenzione ai DOM

**Virus_101** · 02-02-2009, 18:23

Ciao a tutti come da titolo lavorando con le funzioni DOM di js mi sono imbattuto in qlkosa di mooolto strano :

Codice PHP:


<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Untitled Document</title>

<style type="text/css">

body{margin:0;padding:0}

</style>





<script type="text/javascript">



function test2()

{

    var test = new Test();

    test.createTable();



}





var Test = function()

{



    var pannello = document.getElementById("main_box");



    var pannello_interno = document.createElement( "div" );



    pannello.appendChild(pannello_interno);

    // forzo il ricaricamento del puntatore ... sotto IE NON VAAAAAAAAA !!!!!

    pannello_interno= pannello.firstChild;





    this.createTable = function(){ creaTabella(); }

    

    

    function creaTabella()

    {

        /*Stampa riferimento di pannello_interno e del primo figlio*/

        alert("(1) "+pannello_interno+"->"+pannello_interno.firstChild);

        /*

            Stampa il riferimento del pannello contenitore

                -> del primo figlio

                ->-> e del secondo figlio se esiste il primo

                

            il primo figlio e' pannello_interno il secondo e' la tabella creata

        */

        alert( "(1.1) "+pannello+"->"+pannello.firstChild+"->->"+(pannello.firstChild ? pannello.firstChild.firstChild : "null") );

    

        var table = document.createElement( "table" );

        table.setAttribute("border" , "1");        

        

        var tbody = document.createElement( "tbody" );

        var tr    = null;

        var td    = null;

        var tmp_val = null;

        

        for(var i=0 ; i<10 ; i++ )

        {

            tr = document.createElement("tr");

            for(var j=0 ; j<10 ; j++ )

            {

                tmp_val = document.createTextNode( "["+j+","+i+"]" );

                td = document.createElement("td");

                td.appendChild(tmp_val);

                

                tr.appendChild( td );

                

                tmp_val = null;

                td = null;

            }

            

            tbody.appendChild( tr );

            

            tr = null;

        }

        

        table.appendChild(tbody)        

        pannello_interno.appendChild(table);

        pannello.appendChild(pannello_interno);

        

        /*Stampa riferimento di pannello_interno e del primo figlio*/

        alert("(2) "+pannello_interno+"->"+pannello_interno.firstChild);    

    }    

}



</script>











</head>



<body>





<table cellspacing="0" cellpadding="0" border="1" width="100%" height="100%">

<tr>

    <td>[url="javascript:test2()"]CARICAAAAAAAA[/url]</td>

</tr>

<tr>

    <td id="main_box"></td>

</tr>

</table>





</body>

</html>

Copiate il testo in un file .html e provate ad eseguirlo.

Come prima cosa lo script dovrebbe creare un oggetto Test usato per creare un sottopannello in main_box. E dentro quel pannello dovrebbe metterci una tabella 10x10.
La cosa funziona ma ci sono dei problemi con i puntatori interni alla classe Test.

provatelo sotto FF3 e sotto IE Vederete che il puntatore a pannello interno assume valori diversi. Sotto firefox rimane il riferimento sotto IE NO!!!!!

Per ritornare al nodo che mi serve devo rinavigare tutto l'albero a partire da main_box.

Sinceramente non capisco perche', ho pensato fosse un problema di scoping delle variabili visto il casotto che ha fatto ecma nella fase di standardizzazione di sto linguaggio.

quello che mi lascia basito e' questa porzione di codice e quello che stampa fuori :

Codice PHP:




......



/*Stampa riferimento di pannello_interno e del primo figlio*/

        alert("(1) "+pannello_interno+"->"+pannello_interno.firstChild);

        /*

            Stampa il riferimento del pannello contenitore

                -> del primo figlio

                ->-> e del secondo figlio se esiste il primo

                

            il primo figlio e' pannello_interno il secondo e' la tabella creata

        */

        alert( "(1.1) "+pannello+"->"+pannello.firstChild+"->->"+(pannello.firstChild ? pannello.firstChild.firstChild : "null") );



.......

In teoria pannello_interno dovrebbe avere un figlio dopo la prima esecuzione del metodo.
Ma ie dice di no. Invece se riscorro l'albero dalla radice il nodo esiste eccome

Sinceramente nn capisco

e' come se

nodo1 = new Nodo();
nodo2 = new Nodo();
nodo3 = new Nodo();

nodo1.appendChild(nodo2);
nodo2.appendChild(nodo3);

Dovrebbe fare l'albero

nodo1->nodo2->nodo3

quindi se faccio
stampa(nodo2.firstChild )

dovrebbe stampare nodo3.

Ma invece non stampa nulla e mi tocca fare
stampa(nodo1->firstChild->firstChild )

Non so ...... pls help!!!!!

**artorius** · 02-02-2009, 18:38

posso dirti che avere una struttura come:

<div id="Uno">
<div id="Due">
<div id="Tre">
</div>
</div>
</div>

Non è affatto detto che facendo

var d = document.getElementById('Uno');

d.firstChild sia div#Due e d.firstChild.firstChild sia div#Tre

questo perché dom tiene conto di spazi, caratteri e qualsiasi cosa ci sia in un element che non sia senza figli (per dirti <td /> è diverso da <td></td> a seconda del browser ci può essere un contenuto o no)

Crea una funzione del tipo:

Codice PHP:


function getFirstElement(elem){

   if(elem.nodeType != 1) return null; //Non è un Element non ha figli

   for(child = elem.firstChild; child != null; child = child.nextSibling){

      if(child.nodeType == 1) return child; 

   }

}

Usando questa ottieni il primo nodo Element figlio di quello passato.

**Virus_101** · 02-02-2009, 18:44

OK ma io creo i nodi direttamente con le funzioni dom.
Quello che si perde e' il riferimento del figlio.

In quel codice c'e una cosa del tipo

nodo1 = creaNodo

nodo2 = creaNodo

nodo3 = creaNodo

nodo2.aggiungiFiglio(nodo3)

nodo1.aggiungiFiglio(nodo2)

poi se faccio

nodo2.primoFiglio ---> da NULL

mentre

nodo1.primoFiglio.primoFiglio ---> da nodo3
nell'html il nodo contenitore e' unico tutti i sotto nodi sono creati con js dentro i metodi della classe test.

**artorius** · 02-02-2009, 18:52

prova a fare:

nodo1 = creaNodo

nodo2 = creaNodo

nodo3 = creaNodo

nodoContenitore.aggiungiFiglio(nodo1)

nodo1.aggiungiFiglio(nodo2)

nodo2.aggiungiFiglio(nodo3)

in modo che aggiungi un figlio SOLO ai nodi già nel DOM.

**Virus_101** · 02-02-2009, 19:01

il problema e' che facendo cosi' ie non stampa nulla.

Infatti la mia prima sol era quella. Poi per far funzionare ie ho duto usare un approccio bottom-up.

E cmq il prob e' gia' risolto nel codice che ho postato basta appunto scorrere l'albero dal nodo cotenitore caricato dal DOM e non creato al volo.

Quello che volevo capire era appunto perche' sotto IE mi sparisce un riferimento a run-time.
Il fatto e' che credo dipenda da come il browser gestisce lo scope delle var quando le ficchi dentro i pseudo oggetti.

Come sanno tti infatti scrivere in un pseudo-oggetto js

var test = function()
{

ciao
var ciao
this.ciao

}

sono 3 cose estremamente diverse in termini di scope delle var.
Inoltre i metodi dentro si possono dichiarare in molti modi diversi in base al fatto che li voglio pubblici o privati etc.

Per me dipende da una diversa gestione dello scope degli attributi tra i due browsers e volevo appunto capire bene questa cosa in modo da non doverci litigare piu' in futuro.

Discussione: Attenzione ai DOM

Strumenti discussione

Ricerca discussione

Visualizza

Attenzione ai DOM

Permessi di invio