HTML тегдериндеги атрибуттар менен мүнөздөмөлөрдүн айырмасы эмнеде?

Атрибуттар — бул аталыш-баа жуптары, алар HTML ачуу теги түзөт. Алар элементтин баштапкы же учурдагы өзгөчөлүктөрүн аныктайт, бирок ар дайым анын азыркы абалын DOMдо түздөн-түз чагылдырбайт:

Мүнөздөр — бул JavaScript объектилери менен байланышкан маанилер, алар DOM элементтерин көрсөтөт. Алар динамикалуу жана азыркы абалды чагылдырат:

Мына негизги айырмачылыктар:

• Орду: Атрибуттар HTMLде, мүнөздөр — DOM объекттеринде:
• Маалымат түрлөрү: Атрибуттар дайыма жолдор. Мүнөздөр ар түрдүү маалымат түрлөрүн камтышы мүмкүн (жолдор, сандар, логикалык, объекттер):
• Динамикалуу: Атрибуттар бет жүктөлгөндөн кийин статикалык (жана JavaScript аркылуу өзгөртүлүшү мүмкүн). Мүнөздөр динамикалуу түрдө өзгөрүп турушу мүмкүн колдонуучу менен өз ара аракеттенүү же скрипт логикасына жараша:
• Байланыш: Көптөгөн атрибуттар мүнөздөр менен түз байланышта (мисалы, id атрибуту жана id мүнөзү). Бирок, түз байланышсыз атрибуттар (data-*) жана мүнөздөрдүн түз атрибуттары жок (textContent, className) бар:

Мисал:

<input type="text" value="Баштапкы мааниси" readonly>

Мында:

• type="text", value="Баштапкы мааниси" жана readonly — бул атрибуттар:

Бет жүктөлгөндөн кийин, JavaScriptте тиешелүү мүнөздөр:

// Input элементин алабыз
const inputElement = document.querySelector('input');

// Элементтин мүнөздөрү
console.log(inputElement.type);     // Көрсөтөт: "text" (мүнөз атрибутка туура келет)
console.log(inputElement.value);    // Көрсөтөт: "Баштапкы мааниси" (баштапкы атрибутка туура келет)
console.log(inputElement.readOnly); // Көрсөтөт: true (мүнөз атрибутка туура келет, бирок camelCase)

Колдонуучу текстти өзгөрткөндө, value мүнөзү жаңыланат, бирок HTMLдеги value атрибуту ошол бойдон калат, ал гана баштапкы маанини көрсөтөт:

// Колдонуучу "Жаңы маанини" киргизди
// inputElement.value азыр "Жаңы маанини" болот,
// бирок inputElement.getAttribute('value') дагы эле "Баштапкы мааниси" кайтарат.