واجهات برمجة تطبيقات HTML

تقول هذه السلسلة في مقدمة هذه السلسلة "عناصر HTML هي العُقد التي تشكل نموذج كائن المستند". لقد ناقشنا نوع عُقد العنصر. في هذا القسم، نناقش واجهات برمجة التطبيقات للعناصر التي تمكّن إجراء طلبات بحث عن تلك العُقد.

نموذج كائن المستند (DOM) وAOM

DOM عبارة عن واجهة برمجة تطبيقات للوصول إلى المستندات ومعالجتها. كائن DOM هو شجرة جميع العُقد في المستند. يمكن أن تحتوي بعض العُقد على توابع، بينما لا تحتوي عليها عُقد أخرى. تتضمن الشجرة العناصر إلى جانب سماتها والعُقد النصية.

شجرة عُقد MLW تعرض العناصر والعُقد النصية.

لا توفر أدوات المتصفح تصورات شجرة مثل تلك الموجودة أعلاه، ولكن يمكنك رؤية العُقد في عارض العناصر.

DOM/ARIA

التمثيل التدرّجي الذي يمكن فحصه في أدوات المطوّرين في المتصفّح هو شجرة تسهيل الاستخدام. يستند أمر AOM إلى DOM، وبالمثل، تحتوي شجرة تسهيل الاستخدام على كائنات تمثل جميع عناصر الترميز والسمات وعُقد النص:

مثال على AOM

واجهات برمجة التطبيقات لعناصر HTML

الحرف الأوسط في DOM هو "object". وتمامًا كما هو الحال في مثال الكائن person أو car من معظم فئات البرمجة الموجَّهة للكائنات، تُعد كل عقدة في شجرة المستند كائنًا يمكن معالجته باستخدام JavaScript.

ويوفّر المتصفّح العديد من واجهات برمجة التطبيقات التي توفّر طرقًا وأحداثًا وطلبات بحث عن الخصائص وتحديثها في الأصل. تحتوي عُقد العنصر على معلومات حول جميع السمات المعينة على العنصر. يمكنك استخدام واجهات 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 تلقائيًا وفقًا لذلك.

لا تقتصر واجهات برمجة التطبيقات لواجهة HTML على الوصول إلى قيم السمات. يوفر DOM معلومات عن الحالة الحالية لواجهة المستخدم. يمكن لواجهات برمجة تطبيقات HTML الوصول إلى جميع هذه المعلومات. يمكنك الاطّلاع على مدة الفيديو الذي تم تشغيله في الوقت الحالي، وما إذا كان قد انتهى تشغيل الفيديو (أو الصوت) مع HTMLMediaElement.duration وHTMLMediaElement.currentTime وHTMLMediaElement.ended على التوالي.

واجهات العناصر المتاحة

إنّ معظم عناصر HTML التي تناولناها حتى الآن في هذه السلسلة والتي لم نتناولها بعد، باستثناء بعض عناصر الأقسام، تحتوي على واجهة DOM مرتبطة. يُطلق على الواجهة الأساسية لجميع العناصر اسم Element بشكل مناسب. تكتسِب HTMLElement من العنصر وتكتسب منه جميع الواجهات الخاصة بعنصر HTML. يتم تنفيذ بعض الواجهات الخاصة بالعناصر بواسطة عناصر متعددة متشابهة.

وتشمل الواجهات ما يلي:

اصطلاح التسمية هو "HTML" متبوعًا بعنصر أو مجموعة من العناصر في حالة الجمل الكبيرة، متبوعًا بـ "عنصر"، لكن العنصر أو جزء العناصر لا يتبع أي نمط دقيق. لا داعي للقلق. ليست هناك حاجة لحفظها. من المهم فقط أن تعرف أنها موجودة لتتمكن من البحث عنها عندما تحتاج إلى ذلك.

إذا كانت لديك مجموعة من العناصر، فهناك أيضًا واجهات للمجموعات. على سبيل المثال، تعرض الطريقة HTMLCollection.namedItem() العنصر الأول في المجموعة الذي تتطابق سمته id أو name مع المعلمة، أو تعرض قيمة فارغة في حال عدم تطابق أي عناصر.

أكثر من 30 عنصرًا ليس لها واجهة DOM مرتبطة غير HTMLElement، بما في ذلك <address> و<article> <section> و<nav> و<header> و<footer> و<aside> و<hgroup>. تحتوي العديد من العناصر التي لا تتيح استخدام أي سمات غير متوقّفة أو غير شاملة على واجهات خاصة بتلك العناصر، مثل HTMLPElement (العنصر <p>) وHTMLUnknownElement( <😃> أو أي عناصر أخرى غير محدّدة)، ولكن لا تنفِّذ هذه الواجهات أي سمات أو طرق إضافية فوق السمات والطرق المكتسبة من HTMLElement، ولا يتم إدراجها أعلاه.

طرق وخصائص واجهة برمجة التطبيقات المتكررة

إذا كانت هناك واجهة تحتوي على الطريقة أو اسم الموقع نفسهما كما في الواجهة التي يتم اكتسابها، ستحلّ طريقة التوريث أو الموقع محل الطريقة المكتسَبة. عندما وصلنا إلى الخاصيتَين alt وoffsetHeight أعلاه باستخدام imageInstance.alt وsectionInstance.offsetHeight، لم يحدّد الرمز واجهة برمجة التطبيقات التي كان يتم الوصول إليها.

بوجه عام، كما هو الحال مع هذين المثالين، لا يمثل هذا مشكلةً. لكنها يمكن أن تكون كذلك. على سبيل المثال، تكون السمة HTMLCollection.length للقراءة فقط، بينما يمكن أيضًا استخدام خاصية طول الواجهة HTMLOptionsCollection (التي يتم عرضها فقط من خلال السمة options في <select>) لضبط حجم المجموعة.

الواجهات الأخرى

هناك واجهات إضافية تتيح معالجة المواقع الفرعية لعُقد DOM. واجهة EventTarget، التي تزودنا بـ addEventListener() وremoveEventListener()، مكتسَبة من الواجهتين Node وWindow. في المقابل، تكتسب واجهات Element وDocument وDocumentFragment (التي رأيناها في العناصر المخصصة) من "العقدة"، وتكتسب واجهة HTMLElement من العنصر.

واجهة node

يتم تمثيل كل نوع من أنواع عُقد DOM بواجهة تستند إلى Node، التي توفِّر معلومات وطرقًا كعناصر مرتبطة بشجرة نموذج العناصر في المستند (DOM). تتيح واجهة Node تنفيذ طلبات البحث وإضافة العُقد إلى شجرة العُقد.

تستخدم دالة "دوغلاس كروكفورد " الشهيرة"Walk the DOM" السمة firstChild في العُقدة وnextSibling.

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

استخدمنا طريقتين appendChild() وcloneNode() في تحديد العناصر المخصصة. توفر واجهة العقدة العديد من الخصائص والطرق المفيدة للاستعلام عن 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() هي طريقة لواجهة العنصر. هناك أيضًا واجهة 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.

تتوفر العديد من واجهات برمجة التطبيقات استنادًا إلى الميزات التي يتم عرضها من خلال واجهة المستند، بما في ذلك واجهة برمجة تطبيقات السحب والإفلات وواجهة برمجة التطبيقات بملء الشاشة. يتم توريث كلاهما من Element.

واجهة Window

تتضمن واجهة Window العناصر المتاحة عالميًا خارج إطار DOM والتي يمكن استخدامها لمعالجة DOM. النافذة هي الدوالّ ومساحات الاسم والكائنات وعوامل الإنشاء الموثقة في JavaScript ومراجع DOM في MDN.

واجهة Window هي واجهة برمجة التطبيقات للكائن الذي يحتوي على المستند. الكائن window العام هو النافذة التي يتم تشغيل النص فيها. تحتوي كل علامة تبويب في المتصفح على عنصر نافذة خاص بها. يمكن لواجهة النافذة الاستعلام عن محتويات علامة التبويب بالإضافة إلى النافذة العامة والجهاز بالكامل. على سبيل المثال، يمكن استخدام الطريقة resizeTo() لتغيير حجم نافذة المتصفّح، وتوفّر السمة devicePixelRatio إمكانية الوصول إلى وحدات بكسل عرض الجهاز. عند الوصول إلى معلومات حول علامة التبويب التي يوجد فيها المحتوى بدلاً من شجرة DOM التي تعرضها علامة التبويب، من المرجح أن تكون النافذة هي الواجهة التي تبحث عنها.

تتوفّر عدة واجهات برمجة تطبيقات استنادًا إلى الميزات التي تظهر من خلال واجهة Window، بما في ذلك واجهات برمجة تطبيقات Web Workers وIndexedDB.

التحقق من فهمك

اختبر معلوماتك حول واجهات برمجة تطبيقات HTML.

إلى ماذا يشير الاختصار O في DOM؟

موجّهة
يُرجى إعادة المحاولة.
كائن.
إجابة صحيحة
خارجي.
يُرجى إعادة المحاولة.

ما هي الواجهة التي يمكن أن تساعدك في معرفة معلومات حول علامة التبويب التي يتوفر فيها المحتوى؟

نافذة
إجابة صحيحة
مستند
يُرجى إعادة المحاولة.
العُقدة
يُرجى إعادة المحاولة.