Korrekt åtkomst av element?

Jag har en väldigt grundläggande fråga som jag som javascript-novis grunnat på en tid. För länge sedan fick jag lära mig att det korrekta sättet att komma åt ett HTML-dokuments element är följande:

document.forms['foo'].elements['bar']

Jag ser dock väldigt ofta andra lösningar och då främst getElementById-metoden men även följande:

document.foo.bar

Vilken metod är lämpligast att använda sig av egentligen om man vill att koden ska fungera ordentligt i de flesta webbläsare?

Båda fungerar oftast lika bra. Men har du ett element vid namn (eller id) "koko bello" kan du inte använda

document.foo.koko bello

Samma sak gäller med PHP när du ofta vill ha med [ och ] i namnet. Då får du använda dig av den första varianten.

Sedan kan det vara så att foo eller bar skall vara dynamiskt styrd från en variabel, och då får du också använda den första varianten för att slippa använda eval().

Tillägg.
Det är f ö på samma sätt med all objekthantering i JS. Ex;

var foo=new Object();
foo.color="green";
alert(foo["color"]);

document.forms["foo"].elements["bar"] är helt klart att föredra. document.foo.bar torde vara deprecated med tanke på vad Jojoxx skrev. Me? I'm just hunting posts :)

document.forms["foo"].elements["bar"]

Är HTML 3 standard, men fungerar fortfarande.

document.getElementById("bar")

är DOM-standard, men kräver egentligen att elementet ska ha id="bar". Här kan man notera att ett element kan ha olika name och id. Följande exempel är till och med beroende av detta faktum. (Detta är kanske lite off-topic, men ändå värt att nämna i sammanhanget tycker jag.)

 
<label for="radio1"><input type="radio" name="group1" id="radio1" />Radioknapp 1</label><br />
<label for="radio2"><input type="radio" name="group1" id="radio2" />Radioknapp 1</label><br />
<label for="radio3"><input type="radio" name="group1" id="radio3" />Radioknapp 1</label><br />