في مقدمة هذه السلسلة، تشير الرسالة إلى "عناصر HTML هي العُقد التي تشكل نموذج كائن المستند". لقد ناقشنا نوع عُقد العناصر. في هذا القسم، نناقش واجهات برمجة تطبيقات العناصر التي تتيح إرسال طلبات بحث في هذه العُقد.
DOM وAOM
DOM عبارة عن واجهة برمجة تطبيقات للوصول إلى المستندات ومعالجتها. نموذج DOM هو شجرة تضم جميع العُقد في المستند. يمكن أن تحتوي بعض العُقد على أطفال، بينما لا يمكن للبعض الآخر أن يكون لها. تتضمن الشجرة عناصر، إلى جانب سماتها والعقد النصية.
لا توفر أدوات المتصفح تصورات متفرّعة مثل المثال أعلاه، ولكن يمكنك مشاهدة العُقد في عارض العناصر.
إنّ العرض التدرّجي الذي يمكن فحصه في أدوات مطوّري البرامج في المتصفّح هو شجرة تسهيل الاستخدام. يعتمد AOM على خارج DOM؛ وبالمثل، تحتوي شجرة تسهيل الاستخدام على كائنات تمثّل جميع عناصر الترميز والسمات والنصوص العُقد:
واجهات برمجة تطبيقات عناصر 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
تكتسب الواجهات منها. يتم تنفيذ بعض الواجهات الخاصة بالعناصر بواسطة عناصر متعددة متشابهة.
تشمل الواجهات ما يلي:
HTMLAnchorElement
-<a>
HTMLAreaElement
-<area>
HTMLAudioElement
-<audio>
HTMLBaseElement
-<base>
HTMLButtonElement
-<button>
HTMLCanvasElement
-<canvas>
HTMLDataElement
-<data>
HTMLDataListElement
-<datalist>
HTMLDetailsElement
-<details>
HTMLDialogElement
-<dialog>
HTMLEmbedElement
-<embed>
HTMLFieldSetElement
-<fieldset>
HTMLFormElement
-<form>
HTMLHtmlElement
-<html>
HTMLIFrameElement
-<iframe>
HTMLImageElement
-<img>
HTMLInputElement
-<input>
HTMLLabelElement
-<label>
HTMLLegendElement
-<legend>
HTMLLIElement
-<li>
HTMLLinkElement
-<link>
HTMLMapElement
-<map>
HTMLMediaElement
-<audio>
،<video>
HTMLMenuElement
-<menu>
HTMLMetaElement
-<meta>
HTMLMeterElement
-<meter>
HTMLModElement
-<ins>
،<del>
HTMLObjectElement
-<object>
HTMLOListElement
-<ol>
HTMLOptGroupElement
-<optgroup>
HTMLOptionElement
-<option>
HTMLOutputElement
-<output>
HTMLPictureElement
-<picture>
HTMLProgressElement
-<progress>
HTMLQuoteElement
-<q>
،<blockquote>
،<cite>
HTMLScriptElement
-<script>
HTMLSelectElement
-<select>
HTMLSlotElement
-<slot>
HTMLSourceElement
-<source>
HTMLStyleElement
-<style>
HTMLTableCellElement
-<td>
،<th>
HTMLTableColElement
-<col>
،<colgroup>
HTMLTableElement
-<table>
HTMLTableRowElement
-<tr>
HTMLTableSectionElement
-<thead>
،<tbody>
،<tfoot>
HTMLTemplateElement
-<template>
HTMLTextAreaElement
-<textarea>
HTMLTimeElement
-<time>
HTMLTitleElement
-<title>
HTMLTrackElement
-<track>
HTMLVideoElement
-<video>
اصطلاح التسمية هو "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؟
ما هي الواجهة التي يمكنها مساعدتك في العثور على معلومات حول علامة التبويب التي يتوفر فيها المحتوى؟