Vysvtlení d.getElementById

Zde je kus zdrojového kódu (je to "vykastrované" menu z Centrumu). Upravil jsem si jej podle libosti, kouskum rozumím, kouskum zatím ne... Zde je tedy jen základ JavaScriptu (je to zkrátka menu, které po kliknutí na polozku odkazu vykoná pár následných výměn na stránkách. Jen mi není jasné:

- jak teoreticky funguje to d.getElementById (nerozumím principu fungování)
- naco je v tom className v úvozovkách prázdná mezera

Díky.


function showCard (flag,card){
d.getElementById('sr1').style.display='none';d.getElementById('oranzo va').className='';
d.getElementById('sr2').style.display='none';d.getElementById('zluta' ).className='';
d.getElementById('sr3').style.display='none';d.getElementById('zelena ').className='';
d.getElementById('sr4').style.display='none';d.getElementById('ruzova ').className='';
d.getElementById('sr5').style.display='none';d.getElementById('modra' ).className='';
d.getElementById(card).style.display='block';d.getElementById(flag).c lassName='ok_barva';
}

if(d.getElementById&&(w.attachEvent||w.addEventListener)){
d.write(
'<div id="menu">'+
'<p><span id="oranzova" class="ok_barva"><a href="#"

onclick="showCard(\'oranzova\',\'sr1\');return(false)">Hlavní</a></spa n><span id="zluta"><a href="#"

onclick="showCard(\'zluta\',\'sr2\'); return(false)">Oddíl</a></span><span id="zelena"><a href="#"

onclick="showCard(\'zelena\',\'sr3\'); return(false)">Tábory</a></span><span id="ruzova"><a href="#"

onclick="showCard(\'ruzova\',\'sr4\'); return(false)">Archív</a></span><span id="modra"><a href="#"

onclick="showCard(\'modra\',\'sr5\'); return(false)">Odkazy</a></span></p>'+
'<div class="clr"></div></div>'+
'<div class="lista_celek" id="sr1">'+
'<div class="bx5"><div class="bx6"><p><strong>Co bys rád vyhledal?</strong></p></div></div><div class="bx7"

style="width:750px;">'+podmenu1+'</div></div>'+
'<div class="lista_celek" id="sr2">'+
'<div class="bx5"><div class="bx6"><p><strong>Stránka o našem oddíle:</strong></p></div></div><div class="bx7"

style="width:750px;">'+podmenu2+'</div></div>'+
'<div class="lista_celek" id="sr3">'+
'<div class="bx5"><div class="bx6"><p><strong>Vše o táborech:</strong></p></div></div><div class="bx7"

style="width:750px;">'+podmenu3+'</div></div>'+
'<div class="lista_celek" id="sr4">'+
'<div class="bx5"><div class="bx6"><p><strong>Články z naší činnosti:</strong></p></div></div><div class="bx7"

style="width:750px;">'+podmenu4+'</div></div>'+
'<div class="lista_celek" id="sr5">'+
'<div class="bx5"><div class="bx6"><p><strong>Další odkazy na skauty:</strong>'+
'<select style="width:250px">'+
'<option>Skautský oddíl Naděje</option><option>Trojka Vsetín</option><option>Roveři z Podlesí</option><option>Další

oddíly...</option></select>'+
'<input type="submit" value="Přejít" class="ok_hledat"></p></div></div><p class="bx7"

style="padding-left:263px;">'+podmenu5+'</p>'+
'</form></div>');
}

Rozumím.
V sedném řádku...
d.getElementById(card).style.display='block';d.getElementById(flag).c lassName='ok_barva';

... je na začátku d.getElementById(card) - sr1, sr2, sr3 atd. předdefinované styly mám, ovšem card nemám nikde nijak definovaný... Co je tím myšleno?
... je na konci className='ok_barva' - v jiných řádcích v úvozovkách není nic. Znamená to tedy, že tímto řádkem začne a do ostatních prázdných úvozovek si v průběhu doplňuje další id?

Hodil jsem to pro ukázku sem:

www.suta.wz.cz

Aha, už jsem to našel.

V tom posledním řádku...
d.getElementById(card).style.display='block';d.getElementById(flag).c lassName='ok_barva';
... jsou v závorkách (card) a (flag)

... a to card a flag je úplně v prvním řádku v závorce...
function showCard (flag,card){

Co to má znamenat?

(pro orientaci část kódu o níž je řeč)?
function showCard (flag,card){
d.getElementById('sr1').style.display='none';d.getElementById('oranzo va').className='';
d.getElementById('sr2').style.display='none';d.getElementById('zluta' ).className='';
d.getElementById('sr3').style.display='none';d.getElementById('zelena ').className='';
d.getElementById('sr4').style.display='none';d.getElementById('ruzova ').className='';
d.getElementById('sr5').style.display='none';d.getElementById('modra' ).className='';
d.getElementById(card).style.display='block';d.getElementById(flag).c lassName='ok_barva';
}

Vřelé díky, skládám uznání.
Poslední otázka: (snad :)
- kde je definované (nebo jak to prostě funguje), že se mají projít všechny záložky a odstraní se jim třídy?

Díky!