In der Einführung in diese Reihe heißt es: „HTML-Elemente sind die Knoten, aus denen das Document Object Model besteht.“ Wir haben bereits die verschiedenen Arten von Elementknoten besprochen. In diesem Abschnitt werden Element-APIs beschrieben, mit denen diese Knoten abgefragt werden können.
DOM und AOM
Das DOM ist eine API zum Zugriff auf und zur Manipulation von Dokumenten. Das DOM ist der Baum aller Knoten im Dokument. Einige Knoten können untergeordnete Knoten haben, andere nicht. Der Baum enthält Elemente mit ihren Attributen und Textknoten.
Browsertools bieten keine Baumansichten wie die oben, aber Sie können die Knoten im Elementinspektor sehen.
Die Baumstruktur, die in den Entwicklertools des Browsers geprüft werden kann, ist der Bedienungshilfen-Baum. Das AOM basiert auf dem DOM. Ähnlich enthält der Baum für Barrierefreiheit Objekte, die alle Markup-Elemente, Attribute und Textknoten darstellen:
HTML-Element-APIs
Der mittlere Buchstabe von DOM ist „object“. Ähnlich wie das person- oder car-Objektbeispiel aus den meisten Einführungskursen in die objektorientierte Programmierung ist jeder Knoten im Dokumentbaum ein Objekt, das mit JavaScript manipuliert werden kann.
Der Browser bietet zahlreiche APIs mit nativ unterstützten Methoden, Ereignissen sowie Abfragen und Aktualisierungen von Properties.
Elementknoten enthalten Informationen zu allen Attributen, die für das Element festgelegt sind. Über HTML-Benutzeroberflächen können Sie auf Informationen zu den Attributen eines Elements zugreifen. Mit HTMLImageElement.alt können wir beispielsweise die alt-Attribute aller Bilder abrufen:
let allImages = document.querySelectorAll('img');
allImages.forEach((imageInstance) => {
console.log(imageInstance.alt);
});
HTML-Benutzeroberflächen bieten nicht nur Zugriff auf die Attribute eines Elements, sondern auch auf viele weitere Informationen. Wir können die schreibgeschützte HTMLElement.offsetHeight finden, um die Höhe der einzelnen Abschnitte auf unserer Seite relativ zum Layout zu erhalten.
let allSections = document.querySelectorAll('section');
allSections.forEach((sectionInstance) => {
console.log(sectionInstance.offsetHeight);
});
Wenn der Nutzer die Geräteausrichtung ändert oder die Breite des Darstellungsbereichs anderweitig ändert, ändert sich die Höhe der einzelnen <section> und die DOM-Eigenschaften werden automatisch aktualisiert.
Die APIs der HTML-Benutzeroberfläche sind nicht auf den Zugriff auf Attributwerte beschränkt. Das DOM bietet Einblick in den aktuellen Status der Benutzeroberfläche.
HTML-APIs können auf alle diese Informationen zugreifen. Mit HTMLMediaElement.duration, HTMLMediaElement.currentTime und HTMLMediaElement.ended können Sie auf die Länge eines Videos zugreifen, sehen, wo sich eine Wiedergabe gerade befindet und ob das Video (oder Audio) zu Ende ist.
Verfügbare Elementoberflächen
Die meisten HTML-Elemente, die wir bisher in dieser Reihe behandelt haben und noch behandeln werden, haben mit Ausnahme einiger Abschnittselemente eine zugehörige DOM-Schnittstelle. Die Basisoberfläche für alle Elemente heißt Element.
Das HTMLElement wird von Element abgeleitet und alle HTML-elementspezifischen Schnittstellen werden von ihm abgeleitet. Einige elementspezifische Schnittstellen werden von mehreren ähnlichen Elementen implementiert.
Zu den Schnittstellen gehören:
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>
Die Namenskonvention lautet „HTML“, gefolgt von einem Element oder einer Gruppe von Elementen in Upper Camel Case, gefolgt von „Element“. Der Teil mit dem Element oder der Gruppe von Elementen folgt jedoch keinem genauen Muster. Keine Sorge, Sie müssen sich diese nicht merken. Es ist nur wichtig zu wissen, dass sie existieren, damit Sie sie bei Bedarf nachschlagen können.
Wenn Sie eine Sammlung von Elementen haben, gibt es auch einige Sammlungsoberflächen. Die Methode HTMLCollection.namedItem() gibt beispielsweise das erste Element in der Sammlung zurück, dessen id- oder name-Attribut mit dem Parameter übereinstimmt. Andernfalls wird „null“ zurückgegeben.
Über 30 Elemente haben keine andere DOM-Benutzeroberfläche als HTMLElement, darunter <address>, <article>, <section>, <nav>, <header>, <footer>, <aside> und <hgroup>. Viele Elemente, die keine nicht eingestellten, nicht globalen Attribute unterstützen, haben elementspezifische Schnittstellen, z. B. HTMLPElement (das <p>-Element) und HTMLUnknownElement (<😃> oder andere nicht definierte Elemente). Diese Schnittstellen implementieren jedoch keine zusätzlichen Eigenschaften oder Methoden zusätzlich zu den von HTMLElement übernommenen Eigenschaften und Methoden und sind oben nicht aufgeführt.
Redundante API-Methoden und ‑Eigenschaften
Wenn eine Schnittstelle denselben Methoden- oder Attributnamen wie eine abgeleitete Schnittstelle hat, wird die abgeleitete Methode oder das abgeleitete Attribut überschrieben. Mit anderen Worten: Übergeordnete Methoden und Eigenschaften überschreiben untergeordnete. Beim Zugriff auf die alt- und offsetHeight-Properties in HTML-Element-APIs mit imageInstance.alt bzw. sectionInstance.offsetHeight wurde im Code nicht angegeben, auf welche API zugegriffen wurde. Wie in diesen beiden Beispielen ist das in der Regel kein Problem.
Es gibt jedoch Fälle, in denen Redundanz ein Problem darstellen kann. Beispiel: HTMLCollection.length ist nur lesbar, während die übergeordnete Benutzeroberfläche HTMLOptionsCollection eine Längeneigenschaft hat (nur von der options-Eigenschaft von <select> zurückgegeben), die Lese- und Schreibzugriff bietet. Mit HTMLOptionsCollection lässt sich die Sammlungsgröße festlegen.
Andere Schnittstellen
Es gibt zusätzliche Schnittstellen, mit denen sich die Verzweigungsstandorte von DOM-Knoten manipulieren lassen. Die Schnittstelle EventTarget, die addEventListener() und removeEventListener() bereitstellt, wird von den Schnittstellen Node und Window übernommen. Die Schnittstellen „Element“, „Document“ und „DocumentFragment“ (die wir in benutzerdefinierten Elementen kennengelernt haben) werden wiederum von „Node“ und die Schnittstelle „HTMLElement“ von „Element“ abgeleitet.
Die node-Oberfläche
Jeder DOM-Knotentyp wird durch eine auf Node basierende Schnittstelle dargestellt, die Informationen und Methoden für Elemente im Zusammenhang mit dem DOM-Baum bereitstellt. Über die Node-Benutzeroberfläche können Sie Knoten abfragen und dem Knotenbaum hinzufügen.
Die berühmte „walk the DOM“-Funktion von Douglas Crockford nutzt die Eigenschaften firstChild und nextSibling von Node.
const walk_the_DOM = function walk(node, callback) {
callback(node);
node = node.firstChild;
while (node) {
walk(node, callback);
node = node.nextSibling;
}
};
Wir haben die Methoden appendChild() und cloneNode() von Node verwendet, um benutzerdefinierte Elemente zu definieren.
Die Node-Schnittstelle bietet viele nützliche Eigenschaften und Methoden zum Abfragen und Manipulieren des 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));
}
});
Die Methode attachShadow() ist eine Methode der Element-Schnittstelle. Es gibt auch eine shadowRoot-Oberfläche für die Shadow DOM API, die getrennt vom Haupt-DOM-Baum eines Dokuments gerendert wird.
Die Document- und HTMLDocument-Schnittstellen
Die Schnittstelle Document wird von Node übernommen. Sie stellt die im Browser geladene Webseite dar, unabhängig davon, ob das Dokument HTML, SVG, XML, MathML oder ein anderes Format hat. Die Document-Schnittstelle wird auch von der HTMLDocument-Schnittstelle übernommen.
Über die document können Sie schnell auf Knotentypen zugreifen und Sammlungen bestimmter Elementtypen wie document.body und document.styleSheets erstellen. Über das HTMLDocument können Sie auf für das Dokument relevante Informationen zugreifen, die nicht in HTML-Knoten gefunden werden, z. B. Document.location, Document.lastModified und Document.Cookie.
Es gibt mehrere APIs, die auf Funktionen basieren, die über die Dokumentoberfläche angezeigt werden, darunter die Drag-and-drop API und die FullScreen API. Beide übernehmen die Einstellungen von Element.
Die Window-Oberfläche
Die Window-Benutzeroberfläche enthält zusätzlich zum DOM global verfügbare Elemente, mit denen das DOM manipuliert werden kann. Window bietet Funktionen, Namespaces, Objekte und Konstruktoren, die in den MDN-Referenzen JavaScript und DOM dokumentiert sind.
Die Window-Schnittstelle ist die API für das Objekt, das das Dokument enthält. Das globale window-Objekt ist das Fenster, in dem das Script ausgeführt wird. Jeder Browsertab enthält ein eigenes Window-Objekt. Über die Fensteroberfläche können der Inhalt des Tabs sowie das gesamte Fenster und Gerät abgefragt werden. Mit der Methode resizeTo() können Sie beispielsweise die Größe des Browserfensters ändern. Das Attribut devicePixelRatio bietet Zugriff auf die Pixel des Displays des Geräts. Wenn Sie auf Informationen zum Tab zugreifen, auf dem sich die Inhalte befinden, und nicht auf den DOM-Baum, der auf dem Tab angezeigt wird, ist das Fenster wahrscheinlich die gesuchte Benutzeroberfläche.
Es gibt mehrere APIs, die auf Funktionen basieren, die über die Window-Benutzeroberfläche angezeigt werden, darunter die Web Workers- und die IndexedDB-APIs.
Wissen testen
Testen Sie Ihr Wissen zu HTML-APIs.
Wofür steht das O in DOM?
Über welche Benutzeroberfläche können Sie Informationen zum Tab abrufen, auf dem sich die Inhalte befinden?