In der Einführung zu dieser Reihe heißt es: „HTML-Elemente sind die Knoten, aus denen das Document Object Model besteht.“ Wir haben über den Typ der Elementknoten gesprochen. In diesem Abschnitt werden Element-APIs erläutert, mit denen diese Knoten abgefragt werden können.
DOM und AOM
Das DOM ist eine API für den Zugriff auf und die Bearbeitung von Dokumenten. Das DOM ist die Baumstruktur aller Knoten im Dokument. Einige Knoten können untergeordnete Knoten haben, andere nicht. Die Baumstruktur enthält Elemente mit ihren Attributen und Textknoten.
Browsertools bieten keine Baumvisualisierung wie oben, aber Sie können die Knoten im Element Inspector sehen.
Die Baumdarstellung, die in den Entwicklertools des Browsers überprüft werden kann, ist der Baum für Barrierefreiheit. Die AOM basiert auf dem DOM. Ebenso enthält die Baumstruktur für Barrierefreiheit Objekte, die alle Markup-Elemente, Attribute und Textknoten darstellen:
HTML Element-APIs
Der mittlere Buchstabe des DOM ist „object“. Genau wie das person- oder car-Objektbeispiel von den meisten Einführungen bis zu den objektorientierten Programmierklassen ist jeder Knoten im Dokumentbaum ein Objekt, das mit JavaScript bearbeitet werden kann.
Der Browser bietet zahlreiche APIs mit nativ unterstützten Methoden, Ereignissen sowie das Abfragen und Aktualisieren von Attributen.
Elementknoten enthalten Informationen zu allen für das Element festgelegten Attributen. Sie können HTML-Schnittstellen verwenden, um auf Informationen zu den Attributen eines Elements zuzugreifen. Mit HTMLImageElement.alt können Sie beispielsweise die alt-Attribute aller Bilder abrufen:
let allImages = document.querySelectorAll('img');
allImages.forEach((imageInstance) => {
console.log(imageInstance.alt);
});
HTML-Schnittstellen bieten mehr als nur den Zugriff auf die Attribute eines Elements; Sie können auf viel mehr Informationen zugreifen. Wir können das schreibgeschützte HTMLElement.offsetHeight-Objekt finden, um die Höhe jedes Abschnitts auf unserer Seite im Verhältnis zum Layout zu erhalten.
let allSections = document.querySelectorAll('section');
allSections.forEach((sectionInstance) => {
console.log(sectionInstance.offsetHeight);
});
Wenn der Nutzer die Geräteausrichtung oder die Breite des Darstellungsbereichs ändert, ändert sich die Höhe jedes <section>-Elements und die DOM-Eigenschaften werden automatisch aktualisiert.
Die HTML-Schnittstellen-APIs sind nicht auf den Zugriff auf Attributwerte beschränkt. Das DOM bietet einen Einblick in den aktuellen Status der Benutzeroberfläche.
HTML-APIs können auf alle diese Informationen zugreifen. Sie können auf die Länge eines Videos, zu dem ein Aufruf in der aktuellen Wiedergabe gehört, und mit HTMLMediaElement.duration, HTMLMediaElement.currentTime bzw. HTMLMediaElement.ended zugreifen, ob das Video (oder Audio) fertig abgespielt wurde.
Verfügbare Elementoberflächen
Die meisten HTML-Elemente, die wir bisher in dieser Reihe behandelt haben und die noch nicht behandelt wurden, haben außer einigen Abschnittselementen eine zugehörige DOM-Schnittstelle. Die Basisschnittstelle für alle Elemente hat den passenden Namen Element.
Der HTMLElement übernimmt das Element und alle HTML-Element-spezifischen Oberflächen davon. Einige elementspezifische Schnittstellen werden durch mehrere ähnliche Elemente implementiert.
Zu den Oberflächen 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>HTMLMediaElementbis<audio>,<video>HTMLMenuElement–<menu>HTMLMetaElement–<meta>HTMLMeterElement–<meter>HTMLModElementbis<ins>,<del>HTMLObjectElement–<object>HTMLOListElement–<ol>HTMLOptGroupElementbis<optgroup>HTMLOptionElement–<option>HTMLOutputElement–<output>HTMLPictureElement–<picture>HTMLProgressElement–<progress>HTMLQuoteElement–<q>,<blockquote>,<cite>HTMLScriptElement–<script>HTMLSelectElement–<select>HTMLSlotElement–<slot>HTMLSourceElement–<source>HTMLStyleElement–<style>HTMLTableCellElementbis<td>,<th>HTMLTableColElementbis<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 Gruppierung von Elementen in Camel-Case-Schreibweise, gefolgt von "Element". Das Element bzw. die Gruppierung der Elemente folgt jedoch keinem genauen Muster. Mach dir keine Sorgen. Sie müssen sich diese nicht merken. Es ist nur wichtig zu wissen, dass es sie gibt, damit Sie sie bei Bedarf aufrufen können.
Wenn Sie eine Sammlung von Elementen haben, gibt es auch Sammlungsoberflächen. Die Methode HTMLCollection.namedItem() gibt beispielsweise das erste Element in der Sammlung zurück, dessen Attribut id oder name mit dem Parameter übereinstimmt, oder null, wenn kein Element übereinstimmt.
Über 30 Elemente sind mit keiner anderen DOM-Schnittstelle als HTMLElement verknüpft, darunter <address>, <article>, <section>, <nav>, <header>, <footer>, <aside> und <hgroup>. Viele Elemente, die keine nicht verworfenen, nicht globalen Attribute unterstützen, haben elementspezifische Schnittstellen, wie HTMLPElement (das Element <p>) 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 -Attribute
Wenn eine Schnittstelle den gleichen Methoden- oder Eigenschaftsnamen wie die übernommene Schnittstelle hat, überschreibt die Übernahmemethode oder Eigenschaft die übernommene Methode oder Eigenschaft. Beim Zugriff auf die Attribute alt und offsetHeight oben mit imageInstance.alt bzw. sectionInstance.offsetHeight wurde nicht festgestellt, auf welche API zugegriffen wurde.
Im Allgemeinen stellt dies wie in diesen beiden Beispielen kein Problem dar. Aber es kann sein. Beispielsweise ist HTMLCollection.length schreibgeschützt, während die Längeneigenschaft der HTMLOptionsCollection-Schnittstelle, die nur vom options-Attribut von <select> zurückgegeben wird, ebenfalls zum Festlegen der Sammlungsgröße verwendet werden kann.
Andere Schnittstellen
Es gibt zusätzliche Schnittstellen, mit denen die Zweigstellen von DOM-Knoten bearbeitet werden können. Die EventTarget-Schnittstelle, auf der addEventListener() und removeEventListener() bereitgestellt werden, wird von den Oberflächen Node und Window übernommen. Für die Oberflächen "Element", "Document" und "DocumentFragment", die wir in benutzerdefinierte Elemente gesehen haben, werden hingegen die Elemente "Node" übernommen. Für die HTMLElement-Oberfläche wird "Element" übernommen.
Die node-Schnittstelle
Jeder Typ von DOM-Knoten wird durch eine auf Node basierende Schnittstelle dargestellt, die Informationen und Methoden für Elemente im Zusammenhang mit dem DOM-Baum bereitstellt. Die Schnittstelle Node ermöglicht das Abfragen und Hinzufügen von Knoten zum Knotenbaum.
Für die berühmte Funktion „Walk the DOM“ von Douglas Crockford werden die Node-Attribute firstChild und nextSibling verwendet.
const walk_the_DOM = function walk(node, callback) {
callback(node);
node = node.firstChild;
while (node) {
walk(node, callback);
node = node.nextSibling;
}
};
Wir haben die Node-Methoden appendChild() und cloneNode() zum Definieren von benutzerdefinierten Elementen verwendet.
Die Node-Schnittstelle bietet viele nützliche Eigenschaften und Methoden zum Abfragen und Bearbeiten 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 Elementschnittstelle. Es gibt auch eine shadowRoot-Schnittstelle für die Shadow DOM API, die getrennt von der DOM-Hauptstruktur eines Dokuments gerendert wird.
Die Document- und HTMLDocument-Schnittstellen
Die Schnittstelle Document übernimmt von Node. Sie stellt die im Browser geladene Webseite dar, unabhängig davon, ob das Dokument HTML, SVG, XML, MathML oder ein anderes Dokument ist. Die Document-Schnittstelle übernimmt auch die Einstellungen der HTMLDocument-Schnittstelle.
Das document ermöglicht den schnellen Zugriff auf Knotentypen und die Möglichkeit, Sammlungen bestimmter Elementtypen wie document.body und document.styleSheets zu erstellen. Das HTMLDocument ermöglicht den Zugriff auf Informationen, die für das Dokument relevant sind und die in HTML-Knoten wie Document.location, Document.lastModified und Document.Cookie nicht gefunden wurden.
Basierend auf Funktionen, die über die Dokumentoberfläche angezeigt werden, sind mehrere APIs verfügbar, darunter die Drag-and-Drop-API und die FullScreen API. Beide übernehmen von Element.
Die Window-Schnittstelle
Die Fensteroberfläche enthält neben dem DOM auch global verfügbare Elemente, mit denen das DOM bearbeitet werden kann. Window bietet Funktionen, Namespaces, Objekte und Konstruktoren, die in den JavaScript und DOM-Referenzen von MDN 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 Skript ausgeführt wird. Jeder Browsertab enthält ein eigenes Fensterobjekt. Über die Fensteroberfläche können der Inhalt des Tabs sowie das gesamte Fenster und Gerät abgefragt werden. Sie können beispielsweise die Methode resizeTo() verwenden, um die Größe des Browserfensters zu ändern. Die Eigenschaft devicePixelRatio bietet Zugriff auf die Anzeigepixel des Geräts. Wenn Sie auf Informationen über den Tab zugreifen, in dem sich der Inhalt befindet, und nicht auf den DOM-Baum, der auf dem Tab angezeigt wird, ist das Fenster wahrscheinlich die gesuchte Schnittstelle.
Basierend auf Funktionen, die über die Window-Schnittstelle angezeigt werden, sind verschiedene APIs verfügbar, darunter die Web Workers und die IndexedDB APIs.
Wissen testen
Testen Sie Ihr Wissen über HTML APIs.
Wofür steht das O im DOM?
Auf welcher Oberfläche findest du Informationen zum Tab, in dem sich der Inhalt befindet?