API های HTML

در مقدمه این سری آمده است: "عناصر HTML گره هایی هستند که مدل شیء سند را می سازند." ما در مورد نوع گره های عنصر بحث کرده ایم. در این بخش، APIهای عنصری را مورد بحث قرار می‌دهیم که امکان پرس‌وجو از آن گره‌ها را فراهم می‌کنند.

DOM و AOM

DOM یک API برای دسترسی و دستکاری اسناد است. DOM درخت تمام گره های سند است. برخی از گره ها می توانند فرزند داشته باشند، برخی دیگر نمی توانند. درخت شامل عناصر به همراه ویژگی های آنها و گره های متنی است.

درخت گره MLW که عناصر و گره های متنی را نشان می دهد.

ابزارهای مرورگر تجسم درختی مانند تصویر بالا را ارائه نمی دهند، اما می توانید گره ها را در بازرس عنصر مشاهده کنید.

DOM/ARIA.

نمایش درختی که می تواند در ابزارهای توسعه دهنده مرورگر بررسی شود درخت دسترسی است. AOM بر اساس DOM است. به طور مشابه، درخت دسترسی شامل اشیایی است که تمام عناصر نشانه گذاری، ویژگی ها و گره های متن را نشان می دهد:

نمونه ای از AOM.

APIهای عناصر HTML

حرف وسط DOM "ابجکت" است. درست مانند مثال شی person یا car از بیشتر کلاس های برنامه نویسی مقدماتی تا شی گرا، هر گره در درخت سند یک شی است که می تواند با جاوا اسکریپت دستکاری شود.

این مرورگر API های متعددی را ارائه می دهد که روش ها، رویدادها و پرس و جو و به روز رسانی دارایی ها را پشتیبانی می کند. گره های عنصر حاوی اطلاعاتی در مورد تمام ویژگی های تنظیم شده روی عنصر هستند. شما می توانید از رابط های HTML برای دسترسی به اطلاعات مربوط به ویژگی های یک عنصر استفاده کنید. به عنوان مثال، می‌توانیم از HTMLImageElement.alt برای دریافت ویژگی‌های alt همه تصاویر استفاده کنیم:

let allImages = document.querySelectorAll('img');
allImages.forEach((imageInstance) => {
  console.log(imageInstance.alt);
});

رابط های HTML چیزی بیش از دسترسی به ویژگی های یک عنصر را فراهم می کنند. شما می توانید به اطلاعات بسیار بیشتری دسترسی داشته باشید. ما می‌توانیم HTMLElement.offsetHeight فقط خواندنی را پیدا کنیم تا ارتفاع هر بخش در صفحه خود را نسبت به طرح‌بندی به دست آوریم.

let allSections = document.querySelectorAll('section');
allSections.forEach((sectionInstance) => {
  console.log(sectionInstance.offsetHeight);
});

اگر کاربر جهت دستگاه خود را تغییر دهد یا عرض نمای پورت را تغییر دهد، ارتفاع هر <section> تغییر می کند و ویژگی های DOM به طور خودکار با آن به روز می شوند.

APIهای رابط HTML محدود به دسترسی به مقادیر ویژگی نیست. DOM بینشی از وضعیت فعلی UI ارائه می دهد. API های HTML می توانند به تمام آن اطلاعات دسترسی داشته باشند. می‌توانید به طول یک ویدیو دسترسی داشته باشید، جایی که یک نما در پخش فعلی است، و اگر پخش ویدیو (یا صدا) به ترتیب با HTMLMediaElement.duration ، HTMLMediaElement.currentTime و HTMLMediaElement.ended تمام شده باشد.

رابط های عناصر موجود

اکثر عناصر HTML که تاکنون در این مجموعه پوشش داده‌ایم و هنوز پوشش نداده‌ایم، به غیر از برخی عناصر بخش‌بندی ، یک رابط DOM مرتبط دارند. رابط پایه برای همه عناصر به درستی Element نام دارد. HTMLElement از Element و تمام واسط های خاص عنصر HTML از آن ارث می برند. برخی از رابط های خاص عنصر توسط چندین عنصر مشابه پیاده سازی می شوند.

رابط ها عبارتند از:

قرارداد نامگذاری "HTML" است که به دنبال یک عنصر یا گروه بندی عناصر در حروف شتر بالایی و به دنبال آن "Element" است، اما بخش عنصر یا گروه بندی عناصر از الگوی دقیقی پیروی نمی کند. نگران نباشید. نیازی به حفظ کردن اینها نیست. فقط مهم است که بدانید آنها وجود دارند تا بتوانید در صورت نیاز آنها را جستجو کنید.

اگر مجموعه ای از عناصر دارید، رابط های مجموعه ای نیز وجود دارد. به عنوان مثال، متد HTMLCollection.namedItem() اولین عنصر را در مجموعه که ویژگی id یا name آن با پارامتر مطابقت دارد، برمی‌گرداند یا اگر هیچ عنصری مطابقت نداشته باشد null را برمی‌گرداند.

بیش از 30 عنصر یک رابط DOM مرتبط غیر از HTMLElement از جمله <address> ، <article> ، <section> ، <nav> ، <header> ، <footer> ، <aside> و <hgroup> ندارند. بسیاری از عناصری که از هیچ ویژگی غیرمنسوخ و غیر جهانی پشتیبانی نمی‌کنند، دارای رابط‌های خاص عنصر هستند، مانند HTMLPElement (عنصر <p> ) و HTMLUnknownElement ( <😃> یا هر عنصر دیگری که تعریف نشده است)، اما این رابط‌ها فاقد آن هستند. هیچ ویژگی یا روش اضافی را در بالای ویژگی ها و روش های به ارث رسیده از HTMLElement پیاده سازی نکنید، و در بالا ذکر نشده اند.

روش ها و ویژگی های اضافی API

اگر یک رابط دارای روش یا نام خاصیت مشابه با رابطی باشد که به ارث می‌برد، متد یا ویژگی ارث بری، روش ارثی را بازنویسی می‌کند. به عبارت دیگر، روش‌ها و ویژگی‌های والدین بر فرزندان غلبه می‌کنند. وقتی به ویژگی‌های alt و offsetHeight در APIهای عنصر HTML با imageInstance.alt و sectionInstance.offsetHeight به ترتیب دسترسی پیدا کردیم، کد مشخص نمی‌کرد به کدام API دسترسی داشت. به طور کلی، مانند این دو مثال، این یک مسئله نیست.

با این حال، مواردی وجود دارد که افزونگی می تواند مشکل ایجاد کند. به عنوان مثال، HTMLCollection.length فقط خواندنی است، در حالی که رابط ارث بری، HTMLOptionsCollection ، دارای یک ویژگی طولی است (که فقط با ویژگی options های <select> برگردانده می شود) با دسترسی خواندن و نوشتن. برای تنظیم اندازه مجموعه می توان از HTMLOptionsCollection استفاده کرد.

سایر رابط ها

اینترفیس های اضافی وجود دارد که امکان دستکاری مکان های شاخه گره های DOM را فراهم می کند. رابط EventTarget که به ما با addEventListener() و removeEventListener() ارائه می کند، توسط رابط های Node و Window به ارث می رسد. به نوبه خود، رابط های Element، Document و DocumentFragment (که در عناصر سفارشی دیدیم) از Node و رابط HTMLElement از Element ارث می برند.

رابط node

هر نوع گره DOM توسط یک رابط مبتنی بر Node نشان داده می شود که اطلاعات و روش هایی را به عنوان عناصر مربوط به درخت DOM ارائه می دهد. رابط Node امکان پرس و جو و افزودن گره ها به درخت گره را فراهم می کند.

تابع معروف داگلاس کراکفورد "walk the DOM" از ویژگی های firstChild و nextSibling Node استفاده می کند.

const walk_the_DOM = function walk(node, callback) {
  callback(node);
  node = node.firstChild;
  while (node) {
    walk(node, callback);
    node = node.nextSibling;
  }
};

ما از متدهای appendChild() و cloneNode() Node در تعریف عناصر سفارشی استفاده کردیم. رابط Node ویژگی ها و روش های مفید بسیاری را برای پرس و جو و دستکاری DOM ارائه می دهد.

customElements.define('star-rating',
  class extends HTMLElement {
    constructor() {
      super(); // Always call super first in constructor
      const starRating = document.getElementById('star-rating-template').content;
      const shadowRoot = this.attachShadow({
        mode: 'open'
      });
      shadowRoot.appendChild(starRating.cloneNode(true));
    }
  });

متد attachShadow() متدی از رابط Element است. همچنین یک رابط shadowRoot برای Shadow DOM API وجود دارد که جدا از درخت DOM اصلی سند ارائه شده است.

رابط های Document و HTMLDocument

رابط Document از Node به ارث می رسد. این نشان دهنده صفحه وب بارگذاری شده در مرورگر است، خواه سند HTML، SVG، XML، MathML یا موارد دیگر باشد. رابط Document نیز از رابط HTMLDocument به ارث می رسد.

این document دسترسی سریع به انواع گره ها و توانایی ایجاد مجموعه هایی از انواع عناصر خاص، مانند document.body و document.styleSheets را امکان پذیر می کند. HTMLDocument دسترسی به اطلاعات مربوط به سند را که در گره‌های HTML یافت نمی‌شوند، مانند Document.location ، Document.lastModified ، و Document.Cookie را امکان‌پذیر می‌سازد.

چندین API بر اساس ویژگی‌هایی که از طریق رابط سند ظاهر می‌شوند، از جمله Drag and Drop API و FullScreen API در دسترس هستند. هر دو از Element ارث می برند.

رابط Window

رابط Window شامل موارد در دسترس جهانی فراتر از DOM است که می تواند برای دستکاری DOM استفاده شود. Window توابع، فضاهای نام، اشیاء و سازنده های مستند شده در منابع جاوا اسکریپت و DOM MDN را ارائه می دهد.

رابط Window API برای شی حاوی سند است. شی window جهانی پنجره ای است که اسکریپت در آن اجرا می شود. هر برگه مرورگر حاوی شی پنجره مخصوص به خود است. رابط Window می تواند محتویات برگه و همچنین پنجره کلی و دستگاه را پرس و جو کند. به عنوان مثال، از متد resizeTo() می توان برای تغییر اندازه پنجره مرورگر استفاده کرد، ویژگی devicePixelRatio دسترسی به پیکسل های نمایشگر دستگاه را فراهم می کند. هنگام دسترسی به اطلاعات مربوط به برگه ای که محتوا در آن قرار دارد به جای درخت DOM که برگه نمایش داده می شود، پنجره احتمالاً رابطی است که به دنبال آن هستید.

چندین API بر اساس ویژگی های ظاهر شده از طریق رابط Window در دسترس هستند، از جمله Web Workers و IndexedDB API.

درک خود را بررسی کنید

دانش خود را از API های HTML تست کنید.

O در DOM مخفف چیست؟

جهت گیری.
دوباره امتحان کنید.
شیء
درسته!
بیرونی.
دوباره امتحان کنید.

کدام رابط می تواند به شما کمک کند تا اطلاعات مربوط به برگه ای که محتوا در آن قرار دارد را بیابید؟

پنجره
درسته!
سند
دوباره امتحان کنید.
گره
دوباره امتحان کنید.