Тафовут байни хусусиятҳо ва хусусиятҳо дар тегҳои 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 нав карда мешавад, аммо хусусияти value дар HTML боқӣ мемонад ва танҳо арзиши ибтидоиро инъикос мекунад.

// Корбар "Арзиши нав" ворид кард
// inputElement.value ҳоло "Арзиши нав" хоҳад буд,
// аммо inputElement.getAttribute('value') ҳоло ҳам "Арзиши ибтидоӣ" хоҳад буд.