Begrip: Attributen aanpassen

Elke HTMLElement heeft verschillende attributen waarmee extra informatie over het element meegegeven kan worden.

Bijna elk attribuut is beschikbaar als property of het HTMLElement. Dit betekent dat het mogelijk is om de waarde van een bestaand attribuut uit te lezen of een nieuwe waarde toe te kennen zoals we dat zouden doen voor elk ander object.

CSS-eigenschappen kunnen op dezelfde manier aangepast worden, let hier wel op, de CSS-eigenschappen staan nu in camelCase in plaats van kebab-case.

Sommige attributen heeft een bepaalde betekenis binnen JavaScript en kunnen daarom niet als propertynaam gebruikt worden. Zo wordt class gebruikt om een klasse aan te maken, maar ook om een CSS-klasse toe te voegen aan een HTMLElement, de property wordt daarom vervangen met className.

// Maak een nieuw hidden element aan.
const errorMessage = document.createElement('p')
errorMessage.hidden = true

// Pas de style van een element aan via een geneste property.
errorMessage.style.color = 'red'
errorMessage.style.border = '1px solid red'
errorMessage.style.borderRadius = '5px'

// Pas de style aan door een CSS-klasse toe te voegen.
errorMessage.className = 'error-message'

// Lees de waarde van een formulierelement uit. 
const nameInput = document.getElementById('name-input')
const name = nameInput.value

• element.hasAttribute(attributeName): Controleert of een element een opgegeven attribuut heeft.
• element.setAttribute(attributeName, attributeValue): Wijzigt de waarde van een attribuut.
• element.getAttribute(attributeName): Geeft de waarde van een attribuut terug.
• element.removeAttribute(attributeName): Verwijdert een attribuut van een element.
• element.toggleAttrivute(attributeName): Verandert de waarde van een boolean attribuut van true naar false of omgekeerd.