במבוא לסדרה זו כתוב "רכיבי HTML הם הצמתים שמרכיבים את מודל האובייקטים של המסמך". דנו בסוג של צמתים ברכיבים. בחלק הזה נדון ב-Element APIs שמאפשרים לשלוח שאילתות על הצמתים האלה.
ה-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
יורש מהרכיב ומכל הרכיבים שספציפיים לרכיבי 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" ואחריו רכיב או קבוצה של אלמנטים באותיות גדולות בקאמל, ואחריו "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?
באיזה ממשק תוכלו למצוא מידע על הכרטיסייה שבה נמצא התוכן?