JavaScript functies voor Personalisatie
querySelectorAll
Hiermee selecteer je een element op de pagina.
Selecteer een html element op de pagina
document.querySelectorAll('h1');
Selecteer een element met een bepaalde class
document.querySelectorAll('.pill-list__item--filter');
Selecteer een element met een bepaalde id
document.querySelectorAll('#alerts');
Selecteer een element met een bepaald attribuut
document.querySelectorAll('.pill-list__item--filter[title="Huis"]')[0];
innerText
Hiermee kun je de tekst van een bepaald element aanpassen.
Pas de tekst van een bepaald element aan
document.querySelectorAll('h1.heading-page-title')[0].innerText = 'Dit is een voorbeeld';
innerHTML
Hiermee kun je de HTML van een bepaald element aanpassen.
Pas de HTML van een bepaald element aan
document.querySelectorAll('h1')[0].innerHTML = 'Dit is een tekst met HTML';
setAttribute
Voeg een name toe aan een bepaald element op de pagina
document.querySelectorAll('.pill-list__item--filter[title="Huis"]')[0].setAttribute('name','test');
Pas de href van een bepaald a element aan
document.querySelectorAll('.btn.btn--primary.link--arrow-right')[0].setAttribute('href','http://www.omrekenen.nl');
Voeg een id toe aan een blokje
document.querySelectorAll('.strip-actualiteiten__item')[0].setAttribute('id','hulp');
Voeg een title toe aan een afbeelding
document.querySelectorAll('.content-block__image-img')[1].setAttribute('title','Dit is een test');
addEventListener
Luister op een klik en voer vervolgens een stuk code uit
document.querySelectorAll('.pill-list__item--filter[title="Huis"]')[0].addEventListener('click', function () { console.log('test'); alert('dit is een test'); });
Luister op een mouseover en voer vervolgens een stuk code uit
document.querySelectorAll('.pill-list__item--filter[title="Huis"]')[0].addEventListener('mouseover', function () { console.log('test'); });
insertAdjacentHTML
voeg een tekst toe na het eind van het geselecteerd element
document.querySelectorAll('.strip-etalage')[0].insertAdjacentHTML('afterend', 'Ik voeg tekst toe');
Als je veel HTML hebt, kun je het ook eerst in een variabele stoppen
var html = ''; document.querySelectorAll('.strip-etalage')[0].insertAdjacentHTML('beforebegin', html);
style.display
Een zichtbaar element onzichtbaar maken
document.querySelectorAll('h1')[0].style.display="none";
Een onzichtbaar gemaakt element zichtbaar maken
document.querySelectorAll('h1')[0].style.display="block";
element.length
Het element alerts bestaat op de pagina
var element = document.querySelectorAll('#alerts'); if (element.length !== 0){ console.log('bestaat'); } else { console.log('bestaat niet'); }
Het element alers bestaat niet op de pagina
var element = document.querySelectorAll('#alers'); if (element.length !== 0){ console.log('bestaat'); } else { console.log('bestaat niet'); }
string.indexOf
Zit JavaScript in de tekst?
var string = 'Dit is een variabele met tekst voor de JavaScript workshop'; if (string.indexOf('JavaScript') !== -1) { console.log('JavaScript zit in de string'); } else { console.log('JavaScript zit niet in de string'); }
Zit JavaScript in de tekst?
var string = 'Dit is een variabele met tekst voor de Javascript workshop'; if (string.indexOf('JavaScript') !== -1) { console.log('JavaScript zit in de string'); } else { console.log('JavaScript zit niet in de string'); }