Les 6 - Meer invoer tegelijk afhandelen
Als je document.getElementById() gebruikt krijg je steeds maar een element uit je pagina. Maar stel nu dat je de volgende code hebt:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Kleuren</title>
</head>
<body>
<p class="teksten" id="kleur0">Wat</p>
<p class="teksten" id="kleur1">een</p>
<p class="teksten" id="kleur2">mooie</p>
<p class="teksten" id="kleur3">tekst</p>
<script src="kleuren.js"></script>
</body>
</html>
Je wilt alle teksten van kleur veranderen. Je kunt dan natuurlijk het volgende doen:
See the Pen ClassName voorbeeld 1e onhandig by Jurjenh (@jurjenh) on CodePen.
Maar ja, daar staat steeds bijna dezelfde code. Dat moet makkelijker kunnen!
getElementsByClassName()
Naast document.getElementById() heb je ook de functie document.getElementsByClassName(). Je geeft dan niet een id mee, maar een class. En je krijgt dan niet een element terug, maar een hele lijst met elementen. Hoe dat eruit ziet zie in het volgende voorbeeld:
See the Pen ClassName voorbeeld 1e by Jurjenh (@jurjenh) on CodePen.
Je ziet dat we nu de class=teksten gebruiken in document.getElementsByClassName("teksten"). We krijgen dan een lijst terug kleuren. Deze lijst is niet een array net als een lijst in Python, maar we kunnen er wel op dezelfde manier mee om gaan.
Zo kun je doen:
let teksten = document.getElementsByClassName("teksten");
console.log(teksten[0].innerHTML);
teksten[0] is de eerste tekst op je pagina (Wat) en teksten[1] is de tweede tekst op je pagina (een) enzovoort. We kunnen nu met behulp van een for-loop de elementen handig benaderen.
for (let index = 0; index < teksten.length; index++){
teksten[index].style.color = "red";
}
//let index = 0; // wordt uitgevoerd voordat de for-loop begint
//index < teksten.length; // zolang deze conditie (voorwaarde) klopt, blijft de for loop verder gaan
//index++ // telkens aan het einde van één keer de loop uitvoeren, wordt dit uitgevoerd
// index++ is hetzelfde als index = index + 1 (dus i wordt steeds met 1 opgehoogd)
In dit filmpje leggen we uit wat er precies gebeurt:
Note: Opdracht
Maak de volgende opdrachten in Repl.it:
- Les 6 - Gekleurde invoer - Maken in Repl.it
- Les 6 - Random gekleurde invoer - Maken in Repl.it
getElementsByTagName()
Je kunt behalve op class name ook selecteren op tag name. Zo kun je bijvoorbeeld alle elementen met <a>-tag, <p>-tag of <strong>-tag uit je pagina halen en bewerken. Je krijgt net als bij getElementsByClassName een lijst met elementen terug waar je met behulp van een for-loop doorheen loopt. Zie hiervoor het volgende voorbeeld waar alle elementen met een <strong>-tag onzichtbaar worden gemaakt.
See the Pen vVgaYp by Jurjenh (@jurjenh) on CodePen.
Note: Opdrachten
Maak de volgende opdrachten in Repl.it:
- Inleveropdracht Les 6 - Selecteer de tag
- Oefenopdracht Les 6 - Gekleurde invoer
- Oefenopdracht Les 6 - Random gekleurde invoer