Selecteren met getElement(s)By....

Om HTML-elementen te kunnen aanpassen met JavaScript, moet je ze kunnen selecteren. De HTML-DOM heeft vier functies (methodes) beschikbaar waarmee je efficiënt kunt selecteren.

getElementById('abcd')

• Hiermee maak je een verwijzing naar het eerste element in het HTML dat het attribuut id="abcd" heeft.
• Als er meerdere elementen zijn met id="abcd" kun je het tweede, derde, enz., element niet met deze methode bereiken.
• Deze methode is een van de meest gebruikte binnen de HTML-DOM. Je gebruikt hem steeds als je informatie uit een element uit je document wilt halen of als je die informatie wilt veranderen.
• Als het gezochte id niet bestaat word null teruggegeven.
• Gebruik in de aanroep altijd een verwijzing naar het document-object, bijvoorbeeld:
   
  
  var x = document.getElementById('abcd')
   
• Om dit goed te kunnen gebruiken is het handig dat er maar één element is dat id="abcd" heeft.

getElementsByName('efgh')

• Hiermee maak je verwijzing naar een array met elementen die name="egfh" hebben. Denk hierbij vooral aan radiobuttons en checkboxen die je in een formulier kunt tegenkomen.
• Het selecteren bij het name-attribuut is handig als je eigenschappen van een hele serie van dergelijke elementen wilt bekijken en/of veranderen.
• Met de code:
  
  var x = document.getElementsByName('efgh')
   
  krijg je een array van verwijzingen naar de elementen die name="efgh" hebben.
• Het aantal elementen van de array x bepaal je –net zoals bij elke array– met x.length.
• Je kunt nu met behulp van een for-loop de geselecteerde elementen aflopen om er "iets" mee te doen:
   
  /* Zet de vinkjes in de checkboxen met name="efgh" uit */
var x = document.getElementsByName('efgh');
var i;
for (i = 0; i < x.length; i++)
  { x[i].checked = false }

getElementsByClassName('ijkl')

• Hiermee maak je verwijzing naar een array met elementen die class="ijkl" hebben.
• Dit is handig als je eigenschappen van een hele serie elementen met een class wilt veranderen.
• Met onderstaande code maak je een array van elementen met class="ijkl":
   
  
  var x = document.getElementsByClassName('ijkl')
   
• Binnen de array x kun je verder selecteren. Met deze code krijg je een array van elementen die behalve class="ijkl" ook class="xyz" hebben:
   
  
  var y = x.getElementsByClassName('xyz')
   
• Je kunt de elementen van de array aflopen op dezelfde manier als bij getElementsByName()

getElementsByTagName('mnop')

• Hiermee maak je verwijzing naar een array met de tags <mnop …>.
• Dit is handig als je eigenschappen van een hele serie tags wilt veranderen.
• Met onderstaande code maak je een array van tags :
   
  
  var x = document.getElementsByTagName('mnop')
   
• Je kunt nu met behulp van een for-loop de geselecteerde tags aflopen om er "iets" mee te doen:
   
  /* Geef alle h1-tags een rode tekstkleur */
var x = document.getElementsByTagName('h1');
var i;
for (i = 0; i < x.length; i++)
  { x[i].style.color = "red" }

Gebruik
Gebruik in de aanroep altijd een verwijzing naar het document-object, bijvoorbeeld:
 
var x = document.getElementById('…')
 
Let op de spelling: in de naam getElementById() staat een enkelvoud: Element. In de overige drie functions staat het meervoud: Elements.
 
Merk op dat deze functions een verwijzingen geven naar HTML-elementen. Je zult de verwijzing altijd moeten uitbreiden naar een specifieke eigenschap zoals: