Elementen selecteren
Het sterke van mootools is dat je simpel elementen kan veranderen, toevoegen en verwijderen. Daarvoor moet je eerst een element op je website selecteren. Normaal ging dat met:
Code (php)
1
document.getElementById('idvanhetelement');
Nu kan dat simpel met het dollarteken:
Code (php)
1
$('idvanhetelement');
Verder heb je ook het dubbele dollarteken. Dat is meer om wat anders door de DOM te gaan. Met een enkel dollarteken kun je alleen ID's selecteren, maar met het dubbele dollarteken kun je net wat meer. Het lijkt soms net CSS:
Code (php)
1
2
3
4
2
3
4
$$('div'); //Zo krijg je alle <div /> tag's van de site
$$('div.class'); //Zo krijg je alle <div /> tag's van de site met als class class
$$('#id'); //Zo krijg je op een k een id, net als bij het enkele dollarteken.
$$('#id div.class'); //Zo krijg je een <div /> element met de class class in de tag met het id id
$$('div.class'); //Zo krijg je alle <div /> tag's van de site met als class class
$$('#id'); //Zo krijg je op een k een id, net als bij het enkele dollarteken.
$$('#id div.class'); //Zo krijg je een <div /> element met de class class in de tag met het id id
Belangrijk is dat je met het dubbele dollarteken altijd een array terugkrijgt.
Je hebt nog een aantal manieren om elementen te selecteren. Ik noem ze hier niet allemaal, maar ik zal nog twee bespreken. Deze twee komen ongeveer op hetzelfde neer. Ze werken net wat anders dan de dollartekens, want je zoekt als het ware een element in een ander element:
Code (php)
1
2
2
$('idVanHetElement').getElements('li'); // Zo krijg je alle <li /> elementen in het element met het id idVanHetElement
$('idVanHetElement').getElements('input[type=text]'); // zo krijg je alle <input /> velden met als type text in het element met het id idVanHetElement
$('idVanHetElement').getElements('input[type=text]'); // zo krijg je alle <input /> velden met als type text in het element met het id idVanHetElement
Met de vierkante haakjes kun je wel aardig gericht zoeken naar een bepaald element. Je kunt van het = teken ook wat anders maken, namelijk:
^= Als iets begint met …
$= Als iets eindigt met …
!= Als iets niet … is
Bijvoorbeeld:
Code (php)
1
2
3
2
3
$('idVanHetElement').getElements('input[type!=text]'); // Zo krijg je alle inputs in idVaHetElement als het type niet text is.
$('idVanHetElement').getElements('input[name^=test]'); //Zo krijg je alle inputs in idVaHetElement als name begint met test.
$('idVanHetElement').getElements('input[name^=test]'); //Zo krijg je alle inputs in idVaHetElement als name begint met test.
Om meer van elementen selecteren te lezen of te zien moet je maar eens hier klikken.
« vorige pagina | volgende pagina »
Inhoudsopgave
- Wat kun je met mootools?
- Mootools “installeren”
- Elementen selecteren
- Voorbeeld 1: Tabs in mootools
- Voorbeeld 2: Coole effecten in mootools
- Mootools en Ajax
- Iets gaan doen met de elementen
- Voorbeeld 3 en handige links