JavaScript deelt een pagina op in onderdelen. Hij ziet dan de document als objecten. Zo kun je elke tag aanvragen via JavaScript.
De tags in een html document zijn de attributen van het document object. Je kunt bijvoorbeeld de huidige title tag opvragen door het volgende te schrijven:
alert( document.title );
De body tag kun je opvragen via document.body, dit is dan weer een object, aangezien in de body tag ook elementen kunnen zitten, zoals formulieren, element attributen, enzovoorts.
Met de document object kun je ook elementen opvragen via tagname of tagid.
Je kunt een tag opvragen via het id attribuut. Zo kun je acties op een element uitvoeren. Van de functie getElementById( <tagId> ) krijg je een object terug waarmee je die element kunt manipuleren. De attributen van de element zijn ook de attributen van het object dat de functie returned.
We willen weten hoe iemand heet, laten we een input veld aanmaken waar iemand zijn naam kan invullen. En we maken ook een submit button aan waar iemand op kan klikken als zijn naam is ingevuld.
<input type="text" name="naam" id="naam" size="40" /> <input type="button" name="button" value="Bekijk resultaat" onclick="alert('Uw naam is: ' + document.getElementById('naam').value );" />
Bij deze code maken we gebruik van de onclick attribuut. We vragen met de getElementById functie de huidige waarde op.
Zoals je kunt zien is value een attribuut van de tekstveld, die is beschikbaar gemaakt als object attribuut door de getElementById functie.
Value kun je veranderen in bijvoorbeeld name om de naam van de tekstveld op te vragen. Zelfs de id attribuut is beschikbaar gemaakt.
Met getElementById kun je ook attributen wijzigen. Wij gaan nu de value attribuut van een tekstveld wijzigen zodat de informatie niet in een alert box komt, maar gewoon in de tekstveld tevoorschijn komt.
<input type="text" name="naam" id="naam" size="40" /> <input type="button" name="button" value="Bekijk resultaat" onclick="var naamObject = document.getElementById('naam'); naamObject.value = 'Uw naam is: ' + naamObject.value;" />
Je ziet nu dat we meerdere javascript code in 1 regel kunnen zetten. Bij het zetten van een semi-colon kun je stukjes code scheiden van elkaar, zodat je meerdere code in één regel kunt zetten.
Nu hebben we één element opgehaald. Maar we kunnen veel meer dan dat. Wat als we alle checkboxen in een formulier willen "checken" ?
De functie zelf zegt het al. Wij willen alle elementen via de tagnaam ophalen. Laten we alle input velden ophalen die in onze formulier voorkomen.