Wat is het verschil tussen attributen en eigenschappen in HTML-tags?

Attributen zijn naam-waardeparen die direct in het openings HTML-tag worden geschreven. Ze bepalen de initiële of huidige kenmerken van het element, maar weerspiegelen niet altijd direct de huidige staat ervan in de DOM.

Eigenschappen zijn waarden die gekoppeld zijn aan JavaScript-objecten die DOM-elementen vertegenwoordigen. Ze zijn dynamisch en weerspiegelen de huidige staat van het element.

Hier zijn de belangrijkste verschillen:

• Locatie: Attributen bevinden zich in HTML, eigenschappen in DOM-objecten.
• Gegevens types: Attributen zijn altijd strings. Eigenschappen kunnen verschillende gegevens types hebben (strings, nummers, booleans, objecten).
• Dynamiek: Attributen zijn statisch na het laden van de pagina (hoewel ze via JavaScript kunnen worden gewijzigd). Eigenschappen kunnen dynamisch veranderen als reactie op gebruikersinteractie of scriptlogica.
• Relatie: Veel attributen hebben directe overeenkomsten met eigenschappen (bijvoorbeeld, het id-attribuut en de id-eigenschap). Maar er zijn attributen zonder directe eigenschappen (data-*) en eigenschappen zonder directe attributen (textContent, className).

Voorbeeld:

<input type="text" value="Beginwaarde" readonly>

Hier:

• type="text", value="Beginwaarde" en readonly zijn attributen.

Na het laden van de pagina zullen de bijbehorende eigenschappen in JavaScript zijn:

// Het input-element ophalen
const inputElement = document.querySelector('input');

// Eigenschappen van het element
console.log(inputElement.type);     // Zal tonen: "text" (eigenschap komt overeen met attribuut)
console.log(inputElement.value);    // Zal tonen: "Beginwaarde" (komt aanvankelijk overeen met attribuut)
console.log(inputElement.readOnly); // Zal tonen: true (eigenschap komt overeen met attribuut, maar in camelCase)

Als de gebruiker de tekst in het invoerveld wijzigt, wordt de eigenschap value bijgewerkt, maar het value-attribuut in HTML blijft hetzelfde, en weerspiegelt alleen de initiële waarde.

// De gebruiker heeft "Nieuwe waarde" ingevoerd
// inputElement.value wordt nu "Nieuwe waarde",
// maar inputElement.getAttribute('value') blijft "Beginwaarde" retourneren.