במבוא לסדרה זו, כתוב "רכיבי HTML הם הצמתים שמרכיבים את מודל אובייקטי המסמך". דיברנו על סוג הצמתים של הרכיבים. בקטע הזה נדון בממשקי API של רכיבים שמאפשרים שליחת שאילתות לצמתים האלה.
ה-DOM ו-AOM
ה-DOM הוא ממשק API לגישה למסמכים ולביצוע מניפולציות עליהם. ה-DOM הוא העץ של כל הצמתים במסמך. לחלק מהצמתים יכולים להיות צאצאים, ולצמתים אחרים לא יכולים להיות צאצאים. העץ כולל רכיבים לצד המאפיינים שלהם וצמתים של טקסט.
כלי הדפדפן לא מספקים תצוגות חזותיות של עצים כמו זה שלמעלה, אבל אפשר לראות את הצמתים בבודק הרכיבים.
ייצוג העץ שניתן לבדוק בכלים למפתחים של דפדפנים הוא עץ הנגישות. ה-AOM מבוסס על ה-DOM. באופן דומה, עץ הנגישות מכיל אובייקטים שמייצגים את כל רכיבי הסימון, המאפיינים וצומתי הטקסט:
ממשקי API של רכיבי HTML
האות האמצעית של DOM היא "object". בדיוק כמו הדוגמה של האובייקט person
או car
מרוב מחלקות התכנות מבוא למחלקות תכנות מוכווני אובייקטים, כל צומת בעץ המסמכים הוא אובייקט שאפשר לשנות באמצעות JavaScript.
בדפדפן יש אינספור ממשקי 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 מספק תובנות לגבי המצב הנוכחי של ממשק המשתמש.
ממשקי API של HTML יכולים לגשת לכל המידע הזה. ניתן לך לגשת לאורך של סרטון שבו מוצגת צפייה באותו רגע, ואם הסרטון (או האודיו) הסתיים עם HTMLMediaElement.duration
, עם HTMLMediaElement.currentTime
ו-HTMLMediaElement.ended
, בהתאמה.
ממשקי רכיבים זמינים
למרבית רכיבי ה-HTML שטיפלנו בהם עד כה בסדרה זו, ועדיין לא עסקנו בהם, מלבד כמה רכיבי חלוקה, משויך ממשק DOM. הממשק הבסיסי של כל הרכיבים נקרא Element (אלמנט).
השדה HTMLElement
יורש מהרכיב Element, וכל הממשקים הספציפיים לרכיב 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
שלו תואם לפרמטר, או null אם אין התאמה לרכיב.
ליותר מ-30 רכיבים אין ממשק DOM משויך מלבד HTMLElement
כולל <address>
, <article>
, <section>
, <nav>
, <header>
, <footer>
, <aside>
ו-<hgroup>
. לרכיבים רבים שלא תומכים במאפיינים שלא הוצאו משימוש או שלא הוצאו משימוש יש ממשקים ספציפיים לאלמנטים, כמו HTMLPElement
(האלמנט <p>
) ו-HTMLUnknownElement
(<😃>
או כל רכיב אחר שלא מוגדר), אבל בממשקים האלה לא מוטמע אף מאפיין או שיטות נוספים מלבד המאפיינים והשיטות מ-HTMLElement
, והם לא רשומים למעלה.
שיטות ומאפיינים של API יתירים
אם לממשק יש אותו שם או שיטה כמו והממשק שאליו הוא יורש, שיטת הירושה תחליף את השיטה שעברה בירושה. כשניגשנו לנכסים alt
ו-offsetHeight
שלמעלה באמצעות imageInstance.alt
ו-sectionInstance.offsetHeight
, הקוד לא זיהה לאיזה API מתבצעת גישה.
באופן כללי, כמו בשתי הדוגמאות שלמעלה, אין בעיה. אבל הוא יכול להיות. לדוגמה, המאפיין HTMLCollection.length
מוגדר לקריאה בלבד, בעוד שמאפיין האורך של ממשק HTMLOptionsCollection
העובר בירושה (מוחזר רק על ידי המאפיין options
של <select>
) יכול לשמש גם להגדרת גודל האוסף.
ממשקים אחרים
יש ממשקים נוספים שמאפשרים לבצע מניפולציה על מיקומי ההסתעפות של צומתי DOM. הממשק EventTarget
, שמספק לנו addEventListener()
ו-removeEventListener()
, עובר בירושה לממשק Node
ו-Window
. הממשקים Element, Document ו-DocumentFragment (שראינו ברכיבים מותאמים אישית) יורשים מ-Node, והממשק HTMLElement יורש מ-Element.
הממשק של node
כל סוג של צומת DOM מיוצג על ידי ממשק שמבוסס על Node
, שמספק מידע ושיטות כרכיבים שקשורים לעץ ה-DOM. הממשק Node
מאפשר שליחת שאילתות והוספת צמתים לעץ הצמתים.
בפונקציה 'הליכה ב-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()
של 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
ממשק החלון כולל פריטים שזמינים בכל העולם מעבר ל-DOM, שניתן להשתמש בהם כדי לשנות את ה-DOM. החלון מספק פונקציות, מרחבי שמות, אובייקטים ומבנים שתועדו ב-JavaScript וב-DOM References של MDN.
ממשק window הוא ה-API של האובייקט שמכיל את המסמך. האובייקט window
הגלובלי הוא החלון שבו הסקריפט פועל. כל כרטיסיית דפדפן מכילה אובייקט חלון משלה. בממשק של Windows אפשר להריץ שאילתות על תוכן הכרטיסייה, וגם על החלון ועל המכשיר. לדוגמה, אפשר להשתמש בשיטה resizeTo()
כדי לשנות את הגודל של חלון הדפדפן, המאפיין devicePixelRatio
מספק גישה לפיקסלים של התצוגה במכשיר. כשניגשים למידע על הכרטיסייה שבה נמצא התוכן ולא על עץ ה-DOM שמוצג בכרטיסייה, החלון הוא כנראה הממשק שאתם מחפשים.
חלק מממשקי ה-API זמינים על סמך תכונות שמוצגות בממשק window, כולל ה-API Web Workers ו-IndexedDB.
בחינת ההבנה
בוחנים את הידע שלכם בממשקי API של HTML.
מה פירוש ראשי התיבות O ב-DOM?
איזה ממשק יכול לעזור לכם לגלות מידע על הכרטיסייה שבה נמצא התוכן?