javascriptDOM attributes and propertiesویژگی‌های HTML در جاوااسکریپت
ویژگی HTML و property در جاوااسکریپت را با disabled، getAttribute و dataset بررسی کنید؛ چرا disabled="false" هم دکمه را غیرفعال می‌کند؟
مفهوم به زبان ساده
عنصر HTML هم ویژگی‌های متنی یا attribute دارد و هم propertyهایی که از طریق شیء DOM خوانده می‌شوند. این دو به هم مرتبط‌اند، اما همیشه معنای یکسان یا نوع دادهٔ یکسان ندارند. getAttribute مقدار متنی ویژگی را می‌خواند و در نبود آن null می‌دهد. setAttribute ویژگی را تنظیم می‌کند و removeAttribute آن را برمی‌دارد. برای بسیاری از وضعیت‌های جاری کنترل، property مناسب روشن‌تر است.
در مثال، disabled یک ویژگی بولی HTML است. حضور این ویژگی برای غیرفعال‌بودن کافی است؛ متن false آن را خاموش نمی‌کند. برای فعال‌کردن دوباره، ویژگی را حذف می‌کنیم یا property مربوط را false قرار می‌دهیم. این قاعده را به همهٔ ویژگی‌ها، مانند aria-expanded که مقدار متنی مشخص دارد، تعمیم ندهید. نوع ویژگی و قرارداد رابط را جدا بشناسید.
ویژگی‌های data-* راهی برای نگهداری دادهٔ کوچک وابسته به عنصرند. از dataset می‌توان آن‌ها را خواند، اما مقدارها متن هستند؛ تعداد ۳ پس از ثبت به شکل متن خوانده می‌شود. دادهٔ DOM منبع معتبر قیمت، مجوز یا مالکیت نیست و کاربر می‌تواند آن را تغییر دهد. در تمرین، یک شناسهٔ ردیف ذخیره کنید و تفاوت آن با دادهٔ کامل مدل برنامه را توضیح دهید.
کجا به کار می‌آید؟
- تنظیم وضعیت دکمه و خواندن اطلاعات وابسته به یک ردیف
- تفکیک ویژگی متنی HTML از مقدار جاری کنترل در DOM
از تعریف تا یک مثال واقعی
const button = document.createElement('button');
button.setAttribute('disabled', 'false');
console.log(button.disabled);
button.removeAttribute('disabled');
console.log(button.disabled);
button.dataset.count = '3';
console.log(typeof button.dataset.count);
console.log(button.getAttribute('data-count'));
console.log(button.getAttribute('title') === null);
true false string 3 true
این مثال چطور کار می‌کند؟
حضور disabled حتی با متن false، دکمه را غیرفعال می‌کند.
حذف ویژگی باعث می‌شود disabled برابر false شود.
dataset متن نگه می‌دارد؛ ویژگی title که تنظیم نشده، null است.
اشتباه رایج
disabled="false" راه فعال‌کردن دکمه نیست. همچنین مقدار dataset را عدد یا دادهٔ قابل اعتماد فرض نکنید؛ تبدیل و اعتبارسنجی باید صریح باشد.
این را به خاطر بسپارید
attribute و property را بر اساس معنای کنترل انتخاب کنید؛ ویژگی بولی HTML با رشتهٔ بولی یکسان نیست.