HTML ტეგებში ატრიბუტებსა და თვისებებს შორის რა განსხვავებაა?

Attributes — ეს არის სახელ-ღირებულების წყვილები, რომლებიც პირდაპირ წერია HTML-ის ღია ტეგში. ისინი განსაზღვრავენ ელემენტის საწყის ან მიმდინარე თვისებებს, მაგრამ ყოველთვის არ ასახავენ პირდაპირ მისი მიმდინარე მდგომარეობას DOM-ში:

მახასიათებლები — ეს არის მნიშვნელობები, რომლებიც დაკავშირებულია JavaScript ობიექტებთან და წარმოადგენს DOM ელემენტებს. ისინი დინამიურია და ასახავენ მიმდინარე მდგომარეობას:

აქ არის ძირითადი განსხვავებები:

• ადგილმდებარეობა: მახასიათებლები მდებარეობს HTML-ში, მახასიათებლები — DOM ობიექტებში:
• მონაცემთა ტიპები: მახასიათებლები ყოველთვის სტრიქონებია. მახასიათებლებს შეიძლება ჰქონდეთ სხვადასხვა მონაცემთა ტიპები (სტრიქონები, რიცხვები, ბულიანები, ობიექტები):
• დინამიურობა: მახასიათებლები სტატიკურია გვერდის ჩატვირთვის შემდეგ (თუმცა მათ შეიძლება შეცვალოს JavaScript-ის საშუალებით). მახასიათებლები შეიძლება დინამიურად შეიცვალოს მომხმარებლის ინტერაქციის ან სკრიპტის ლოგიკის პასუხად:
• კავშირი: ბევრი მახასიათებელი პირდაპირი შესაბამისობა აქვს მახასიათებელს (მაგალითად, id მახასიათებელი და id მახასიათებელი). მაგრამ არსებობს მახასიათებლები უშუალო მახასიათებლების გარეშე (data-*) და მახასიათებლები უშუალო მახასიათებლების გარეშე (textContent, className).

მაგალითი:

<input type="text" value="საწყისი მნიშვნელობა" readonly>

აქ:

• type="text", value="საწყისი მნიშვნელობა" და readonly — ეს მახასიათებლებია:

გვერდის ჩატვირთვის შემდეგ, შესაბამისი მახასიათებლები JavaScript-ში:

// ელემენტის მიღება
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') ისევ დააბრუნებს "საწყისი მნიშვნელობა".