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

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

DOM وAOM

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

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

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

DOM/ARIA

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

مثال على AOM.

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

الحرف الأوسط في DOM هو "كائن". تمامًا مثل مثال الكائن 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، الذي يوفر معلومات وطرقًا كعناصر تتعلق بشجرة نموذج العناصر في المستند. تتيح الواجهة 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() هي إحدى طرق العنصر من واجهة pyplot. هناك أيضًا واجهة 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.

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

الواجهة Window

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

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

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

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

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

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

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

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

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