ממשקי API של HTML

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

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

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

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

אם יש לכם אוסף של אלמנטים, מגיעים גם ממשקי אוספים. לדוגמה, השיטה 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 ניתן להשתמש במאפיין length (המוחזר רק על ידי המאפיין 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() של Node 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() היא שיטה של הרכיב גרפי. יש גם ממשק 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 של MDN. והפניות DOM.

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

יש ממשקי API שזמינים על סמך תכונות שמוצגות בממשק window, כולל Web Workers. ו-IndexedDB API.

בדיקת ההבנה

לבחון את הידע שלכם בממשקי API של HTML.

מה פירוש ראשי התיבות O ב-DOM?

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

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

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