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>
HTMLMediaElement
bis<audio>
,<video>
HTMLMenuElement
–<menu>
HTMLMetaElement
–<meta>
HTMLMeterElement
–<meter>
HTMLModElement
bis<ins>
,<del>
HTMLObjectElement
–<object>
HTMLOListElement
–<ol>
HTMLOptGroupElement
bis<optgroup>
HTMLOptionElement
–<option>
HTMLOutputElement
–<output>
HTMLPictureElement
–<picture>
HTMLProgressElement
–<progress>
HTMLQuoteElement
–<q>
,<blockquote>
,<cite>
HTMLScriptElement
–<script>
HTMLSelectElement
–<select>
HTMLSlotElement
–<slot>
HTMLSourceElement
–<source>
HTMLStyleElement
–<style>
HTMLTableCellElement
bis<td>
,<th>
HTMLTableColElement
bis<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?