Ի՞նչ է 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') դեռ կվերադարձնի "Սկզբնական արժեք"։