Javascript getElementsbyClassName

Een veel voorkomende manier om met Javascript elementen te selecteren is ‘document.getElementById()’. Dat is een methode die goed werkt als je unieke elementen wilt beïnvloeden met Javascript. Voor deze methode is het wel noodzakelijk dat ieder element dat je wilt gebruiken een ‘id’ heeft.

In documenten waar veel dezelfde elementen voorkomen kan het chaotisch en vergezocht worden om ieder element van een id te voorzien. Een weblog kan bijvoorbeeld veel uit veel kleine post bestaan. Die post krijgen hun opmaak van een css-class, in plaats van een id.

Om html-elementen zonder id, maar met een class toch aan te kunnen spreken met Javascript is er de methode: document.getElementsByClassName(‘class’). Javascript doorzoekt het document en maakt een lijst van alle elementen met de class-naam tussen de haakjes.

In onderstaand voorbeeld wordt de variabel ‘berichtDivs’ gemaakt. Daar wordt een lijst in gemaakt van drie divs met de class ‘bericht’.

<body>
     <div class=”bericht”><p>tekst</p></div>
     <div class=”bericht”><p>tekst</p></div>
     <div class=”bericht”><p>tekst</p></div>
<script type=”text/javascript”>
var berichtDivs=document.getElementsByClassName(“bericht”);
</script>
</body>

 

Om 1 van de berichten uit de lijst ‘berichtDivs’ te selecteren moet  je aangeven welk bericht  je bedoelt. In dit voorbeeld kunnen we de 1e, 2e of 3e div bedoelen.  Op deze manier werkt een Javascript-lijst ook. De 1e div met class ‘bericht’ wordt op de 1e plaats in de lijst gezet (positie 0), de 2e op de 2e plek (positie 1), de 3e op de 3e plek (positie 2).

In onderstaand voorbeeld maken we de eerste div uit de lijst ‘berichtDivs’ onzichtbaar. Daarbij wordt na het noemen van de variabel ‘berichtDivs’ tussen blokhaken [ ] aangegeven de hoeveelste div bedoeld wordt.

<body>
<div class=”bericht”><p>tekst</p></div>
<div class=”bericht”><p>tekst</p></div>
<div class=”bericht”><p>tekst</p></div>
<script type=”text/javascript”>
var berichtDivs=document.getElementsByClassName(“bericht”);

berichtDivs[0].style.visibility=”hidden”;
</script>
</body>

Op dezelfde manier werkt ook ‘document.getElementsByTagName()’. Een methode die gebruikt kan worden als er geen gebruik gemaakt wordt van id’s en classes. Alle html-elementen met de opgegeven tag-naam worden in een lijst gezet. In onderstaand voorbeeld krijgt de 2e p-tag (positie 1) de tekstkleur rood.

<body>
<div class=”bericht”><p>tekst</p></div>
<div class=”bericht”><p>tekst</p></div>
<div class=”bericht”><p>tekst</p></div>
<script type=”text/javascript”>
var berichtDivs=document.getElementsByClassName(“bericht”);
var teksten=document.getElementsByTagName(“p”);

berichtDivs[0].style.visibility=”hidden”;
teksten[1].style.color=”red”;
</script>
</body>

 

Leave a Reply

Your email address will not be published.