Programmeren in JavaScript/Het Document Object Model/Zoeken

Inleiding

Als we een bepaald HTML-element zouden moeten vinden door te beginnen vanaf de document-node alle kinderen, kleinkinderen enzovoorts van de DOM-boom af te lopen zou dat erg omslachtig zijn. Gelukkig kent het object document enkele methoden waarmee het zoeken veel eenvoudiger is.

Zoeken op ID

Het object document heeft een methode om een element te vinden met een bepaalde id: "getElementById(gezochte_id)". Hierbij wordt gezocht op een HTML-element met een attribuut id="gezochte_id". Volgens de standaard is het de bedoeling dat een bepaalde id maar aan één HTML-element op een pagina mag worden toegekend, Met "getElementById(gezochte_id)" kan ik naar dit ene element zoeken:

Javascript-code: getElementById

var element1 = document.getElementById("writespace");

Eerst declareer ik een variabele "element1" en geef deze de waarde die ik terugkrijg van de methode "getElementById" van het object "document". Als parameter geef ik aan de methode mee, de waarde van het attribuut "id" van het HTML-element dat ik zoek. Als het HTML-element gevonden wordt, verwijst de variable "element1" naar het object dat hoort bij het gezochte HTML-element, zo niet dan bevat de variabele "element1" de waarde null. In beide gevallen is het type van de gegevens in variabele "element1" gelijk aan "object".

In het onderstaande voorbeeld gaan we enkele eigenschappen van het gevonden element veranderen. U kunt het ook zelf proberen door het script op de testpagina te plakken.

Javascript-code: de eigenschap style van een HTML-element

var element1 = document.getElementById("writespace");
element1.innerHTML = "Koud hè";
element1.style.backgroundColor = "orange";

In het bovenstaande bevat "element1.style" een verwijzing naar een object dat overeenkomt met het attribuut "style" van het HTML-element "element1". Het style-object heeft weer een eigenschap "backgroundColor" die ik verander in "orange".

In het bovenstaande zijn we er steeds van uit gegaan dat de methode "document.getElementById" het gezochte HTML-element ook daadwerkelijk gevonden heeft. Als dat niet het geval zou zijn, zou de browser een akelige foutmelding gegeven hebben omdat we objecten proberen te veranderen die er helemaal niet zijn. En de bezoeker van onze website opzadelen met zo'n foutmelding is het laatste wat we willen. Daarom de volgende toevoeging aan het script.

Javascript-code: rekening houden met niet gevonden objecten

var element1 = document.getElementById("writespace");
if (element1 != null)
{
    element1.innerHTML = "Koud hè";
    element1.style.backgroundColor = "orange";
}
else
{
   writenl("element niet gevonden");
}

Nu probeer ik de gewenste wijzigingen alleen aan te brengen als het HTML-element "element1" gevonden is. Speel dit na op de testpagina en verander daarna het argument van getElementByID in "wrotespave" en test nogmaals.

Zoeken op tagnaam

Een andere manier om elementen op een webpagina te vinden is door gebruik te maken van de getElementsByTagName(name) methode van een HTML-element. Omdat er meerdere elementen met dezelfde tagnaam kunnen voorkomen, is het resultaat van de zoekmethode in dit geval een array van elementen.

Voorbeeld:

HTML-code: Zoeken op tagnaam

<div id="eenDiv">
    <p>Alinea 1</p>
    <p>Alinea 2</p>
    <h1>Hoofdstuk 1</h1>
    <p>Alinea 3</p>
</div>

We kunnen nu bijvoorbeeld als volgt het HTML-element van "Alinea 2" vinden.

Javascript-code: Vind alinea 2

var eenDiv = document.getElementById("eenDiv");
var deAlineasInEenDiv = eenDiv.getElementsByTagName('P'); // array van elementen
var alinea2 = deAlineasInEenDiv[1]; // alinea 1 heeft index 0