سری آموزش جاوا اسکریپت: ویژگی های HTML و ویژگی های شی DOM.

در این پست ما درباره نحوه ارتباط ویژگی های شی DOM با ویژگی های HTML بحث خواهیم کرد.

خواص و صفات.

مرورگر ابتدا HTML را قبل از ایجاد اشیاء DOM از آن هنگام بارگیری صفحه تجزیه می کند. اکثر ویژگی های رایج HTML برای گره های عنصر به طور خودکار به ویژگی های شی DOM تبدیل می شوند.
مثلا:

<div id="container"></div>

تبدیل می شود:

div.id="container";

روش های ویژگی

مجموعه ای زنده از ویژگی هایی که در حال حاضر برای یک عنصر معین در دسترس هستند توسط element.attributes ویژگی.

<div id ="container"></div>

const container = document.getElementById("container");


container_attributes = container.attributes;

console.log(container.attributes);

for(let att of container_attributes) {
  console.log(att.name, att.value);
}

را element.getAttribute(name) ویژگی به شما امکان می دهد مقدار ویژگی را بدست آورید.
را element.setAttribute(name, value) ویژگی به شما امکان می دهد مقدار مشخصه را تعیین کنید
را element.hasAttribute(name) ویژگی به شما امکان می دهد وجود یک ویژگی را بررسی کنید
را element.removeAttribute(name) ویژگی به شما امکان حذف ویژگی را می دهد

همگام سازی ویژگی های مناسب

به استثنای برخی موارد، هر زمان که یک ویژگی استاندارد به روز شود، ویژگی مربوطه نیز به طور خودکار به روز می شود.

<input type="email" id="email" tabindex="1">

let input = document.getElementById('email');

input.setAttribute('tabindex', 2);
console.log(input.tabIndex);  // 2

input.tabIndex = 3;
console.log(input.getAttribute('tabIndex')); // 3

با این حال، استثناهایی وجود دارد. به عنوان مثال، input.value فقط از یک ویژگی به ویژگی همگام می شود، نه برعکس.

<input type="email" id="email">

let input = document.getElementById('email');

input.setAttribute('value', 'text');
// the value was updated to text
console.log(input.value); //text
input.value = 'newValue';

//the value was not updated to newValue
console.log(input.getAttribute('value'));//text

مقدار یک ویژگی همیشه یک رشته است. با این حال، مقدار ویژگی می تواند یک رشته، یک بولی، یک شی و غیره باشد، زمانی که ویژگی به یک ویژگی یک شی DOM تبدیل می شود.

بیایید به یک مثال نگاه کنیم

<input type="checkbox" id="check" checked> True

let input = document.getElementById('check');

console.log(input.getAttribute('checked')); //empty string
console.log(input.checked);//true

ویژگی checked در عنصر چک باکس وجود دارد. ویژگی checked زمانی که به ویژگی تبدیل می شود به یک مقدار بولی تبدیل می شود.

ویژگی های سفارشی

امکان ایجاد ویژگی های سفارشی وجود دارد. اگر می خواهید یک ویژگی سفارشی به یک عنصر اضافه کنید، ویژگی شما باید با پیشوند باشد data-[your-custom-attribute-name] از آنجایی که ویژگی های داده برای استفاده های توسعه دهنده محفوظ است.

از ویژگی های سفارشی می توان برای “علامت گذاری” عناصر HTML برای جاوا اسکریپت یا انتقال داده های خاص از HTML به جاوا اسکریپت استفاده کرد.

<div id="order" class="order" data-product-order="new">
  A new product order.
</div>

استفاده از ویژگی داده برای استایل دادن به div ما

  .order[data-product-order="new"] {
    color: green;
  }

  .order[data-product-order="pending"] {
    color: blue;
  }

  .order[data-product-order="canceled"] {
    color: red;
  }

چه می شود اگر مقدار ویژگی داده خود را به حالت در انتظار تغییر دهیم

  order.dataset.productOrder = "pending";