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 = '
Klantvriendelijkste verzekeraar van Nederland
';
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');
}