[js] vastloper na appendChild

[Verwijderd]

Aangezien tegenwoordig het de bedoeling is dat iedereen semantisch html gebruikt met correcte toepassing van stylesheets wil ik dat natuurlijk ook doen.

Ik werk er nu een redelijk tijd mee en moet zeggen: het werkt fantastisch.

Ware het niet dat bepaalde elementen gecleared moeten worden.

Meestal zijn dit div-jes, ul-tjes of dl-tjes.

Nu wil ik dit een klein beetje automatiseren, zodat ik het clearen niet handmatig hoef te doen.

Dus dacht dat het gebruik van een JavaScript wel zou voldoen.
De functie wordt als volgt aangeroepen:

code:

addEvent(window,'load', function(){ clearObjects('div','dl','ul'); };);
// Dit gebruik ik van de website van Dean Edwards

clearObjects = function(){
    if(arguments.length>0){
        for(var j=0; j<arguments.length; j++){
            var obj = document.getElementsByTagName(arguments[j]);
            for(var i=0; i<obj.length; i++){
                var div = document.createElement('div');
                div.className = 'clear';
                obj[i].appendChild(div); // Bij deze regel gaat het dus fout!
                div = null;
            }
            obj = null, i = null;
        }
        j = null;
    }
}

Wat er precies fout gaat weet ik niet, maar ik krijg dus in zowel FF als IE enorme vastlopers en geheugenproblemen. De fout zit m volgens mij in regel 11.

Wie kan mij vertellen waar dit aan ligt (dan kan ik er wellicht van leren!) en hoe ik dit eventueel op kan lossen.

Vreemde is dat wanneer ik de regel waar de comment staat, vervang door alert(obj[i].nodeName) dat er wel degelijk 'div','dl','ul' wordt weergegeven.

NB:
mm, ik merk dat wanneer ik de functie aanroep met 'ul','dl' dat het prima werkt.
Alleen met 'div' erbij krijg ik de problemen.

[ Voor 4% gewijzigd door Verwijderd op 31-08-2006 21:36 ]

[user109731]

Een nodelist is live volgens mij, dus op het moment dat jouw script die div toevoegt, dan zit die div OOK in 'obj' die je daarvoor had opgevraagd... Dit is best lastig in zo'n situatie, ik vind het zelf ook wat onnatuurlijk eigenlijk.

Oplossing: je nodelist omzetten naar een array, waardoor die nieuwe divs er niet meer bij komen.

[ Voor 10% gewijzigd door user109731 op 31-08-2006 21:43 ]

[Verwijderd]

aha! maarre, ik zet die nodelist toch in een array?!

[Fuzzillogic]

for(var i=0; i<obj.length; i++) en daarin maak je obj steeds langer! Sla obj.length vantevoren op een variabele, en gebruik die in de for-loop.

[ Voor 12% gewijzigd door Fuzzillogic op 31-08-2006 21:50 ]

[crisp]

nee:

JavaScript:

var obj = document.getElementsByTagName(arguments[j]);

'obj' is hier geen array; dat je er overheen kan itereren net zoals bij een array maakt het geen array. 'obj' is een element-collection en die is inderdaad 'live'; op het moment dat je een div toevoegt zal obj.length dus ook met 1 toenemen. Gevolg: een oneindige loop

Nexxennium schreef op donderdag 31 augustus 2006 @ 21:50:
for(var i=0; i<obj.length; i++) en daarin maak je obj steeds langer! Sla obj.length vantevoren op een variabele, en gebruik die in de for-loop.

Nee, dat zal ook niet werken: als je midden in je DOM-tree een nieuw element aanmaakt dan zal hij ook midden in je collection terecht komen en niet per-sé aan het einde van de collection worden toegevoegd.

[ Voor 39% gewijzigd door crisp op 31-08-2006 21:52 ]

[user109731]

Verwijderd schreef op donderdag 31 augustus 2006 @ 21:45:
aha! maarre, ik zet die nodelist toch in een array?!

Nee. getElementsByTagName() geeft een live nodelist terug, geen array. Dat lijkt het wel idd, en dat is best wel verwarrend.
Ik zou een functie make die van een nodelist een array maakt, zoiets:

JavaScript:

function nodelistToArray(nodeList) {
    var arr = new Array();
    for (var i=0; i<nodeList.length;i++)
        arr[i] = nodeList[i];
    return arr;
}

[Verwijderd]

aha, thanks hier kan ik zo weer verder mee! hartstikke bedankt voor de uitleg!