Mi a különbség az attribútumok és a tulajdonságok között az HTML tagekben?

A tulajdonságok olyan név-érték párok, amelyeket közvetlenül az HTML nyitó tagjában írnak. Meghatározzák az elem kezdeti vagy aktuális jellemzőit, de nem mindig tükrözik közvetlenül az elem aktuális állapotát a DOM-ban.

A tulajdonságok értékek, amelyek a JavaScript objektumokhoz kapcsolódnak, amelyek a DOM elemeket képviselik. Ezek dinamikusak, és tükrözik az elem aktuális állapotát.

Íme a fő különbségek:

• Hely: A tulajdonságok a HTML-ben találhatók, a tulajdonságok a DOM objektumokban.
• Adattípusok: A tulajdonságok mindig stringek. A tulajdonságok különböző adattípusokkal rendelkezhetnek (stringek, számok, booleanok, objektumok).
• Dinamikuság: A tulajdonságok statikusak a oldal betöltése után (bár JavaScript segítségével módosíthatók). A tulajdonságok dinamikusan változhatnak a felhasználói interakció vagy a szkript logika hatására.
• Kapcsolat: Sok tulajdonságnak közvetlen megfelelése van a tulajdonságokkal (például az id attribútum és az id tulajdonság). De vannak attribútumok, amelyeknek nincs közvetlen tulajdonságuk (data-*), és tulajdonságok, amelyeknek nincs közvetlen attribútumuk (textContent, className).

Példa:

<input type="text" value="Kezdeti érték" readonly>

Itt:

• type="text", value="Kezdeti érték" és readonly attribútumok.

Az oldal betöltése után a JavaScriptben a megfelelő tulajdonságok a következők lesznek:

// Az input elem lekérése
const inputElement = document.querySelector('input');

// Az elem tulajdonságai
console.log(inputElement.type);     // "text"-et fog mutatni (a tulajdonság megfelel az attribútumnak)
console.log(inputElement.value);    // "Kezdeti érték"-et fog mutatni (kezdetben megfelel az attribútumnak)
console.log(inputElement.readOnly); // true-t fog mutatni (a tulajdonság megfelel az attribútumnak, de camelCase-ben)

Ha a felhasználó módosítja a szöveget a bemeneti mezőben, a value tulajdonság frissül, de az value attribútum a HTML-ben változatlan marad, csak a kezdeti értéket tükrözi.

// A felhasználó "Új érték"-et írt be
// az inputElement.value most "Új érték" lesz,
// de az inputElement.getAttribute('value') továbbra is "Kezdeti érték"-et fog visszaadni.