ממשקי API של HTML

במבוא לסדרה זו, כתוב "רכיבי HTML הם הצמתים שמרכיבים את מודל אובייקטי המסמך". דיברנו על סוג הצמתים של הרכיבים. בקטע הזה נדון בממשקי API של רכיבים שמאפשרים שליחת שאילתות לצמתים האלה.

ה-DOM ו-AOM

ה-DOM הוא ממשק API לגישה למסמכים ולביצוע מניפולציות עליהם. ה-DOM הוא העץ של כל הצמתים במסמך. לחלק מהצמתים יכולים להיות צאצאים, ולצמתים אחרים לא יכולים להיות צאצאים. העץ כולל רכיבים לצד המאפיינים שלהם וצמתים של טקסט.

עץ צומת של MLW עם אלמנטים וצמתים של טקסט.

כלי הדפדפן לא מספקים תצוגות חזותיות של עצים כמו זה שלמעלה, אבל אפשר לראות את הצמתים בבודק הרכיבים.

ה-DOM/ARIA.

ייצוג העץ שניתן לבדוק בכלים למפתחים של דפדפנים הוא עץ הנגישות. ה-AOM מבוסס על ה-DOM. באופן דומה, עץ הנגישות מכיל אובייקטים שמייצגים את כל רכיבי הסימון, המאפיינים וצומתי הטקסט:

דוגמה של AOM.

ממשקי 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 יורשים ממנו. חלק מהממשקים הספציפיים לרכיבים מוטמעים על ידי מספר רכיבים דומים.

הממשקים כוללים:

המוסכמה למתן שמות היא "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?

בכיוון.
אפשר לנסות שוב.
אובייקט.
נכון!
חיצוני.
אפשר לנסות שוב.

איזה ממשק יכול לעזור לכם לגלות מידע על הכרטיסייה שבה נמצא התוכן?

חלון
נכון!
מסמך
אפשר לנסות שוב.
צומת
אפשר לנסות שוב.