In der Einführung zu dieser Reihe steht: „HTML-Elemente sind die Knoten, aus denen das Document Object Model besteht. Wir haben den Typ der Elementknoten besprochen. In diesem Abschnitt werden Element-APIs erläutert, die die Abfrage dieser Knoten ermöglichen.
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 zusammen mit ihren Attributen und Textknoten.
Browsertools bieten keine Baumvisualisierungen wie oben dargestellt, aber Sie können die Knoten im Element Inspector sehen.
Die Baumdarstellung, die Sie in den Entwicklertools des Browsers überprüfen können, ist die Baumstruktur für Barrierefreiheit. Das AOM basiert auf aus dem DOM; Entsprechend enthält die Baumstruktur für Barrierefreiheit Objekte, die alle Markup-Elemente, Attribute und Textelemente Knoten:
HTML-Element-APIs
Der mittlere Buchstabe des DOM ist "object". Genau wie das Beispiel zum person- oder car-Objekt aus der meisten Einführung in die objektorientierte Programmierung
ist jeder Knoten in der Dokumentstruktur ein Objekt, das mit JavaScript bearbeitet werden kann.
Der Browser bietet zahlreiche
APIs, die nativ unterstützte Methoden, Ereignisse sowie die Abfrage und Aktualisierung von Eigenschaften bereitstellen
Elementknoten enthalten Informationen zu allen für das Element festgelegten Attributen. Sie können HTML-Oberflächen verwenden, um auf
Informationen zu den Attributen eines Elements. Beispielsweise können wir HTMLImageElement.alt verwenden.
Rufen Sie die alt-Attribute aller Bilder ab:
let allImages = document.querySelectorAll('img');
allImages.forEach((imageInstance) => {
console.log(imageInstance.alt);
});
HTML-Oberflächen bieten mehr als nur Zugriff auf die Attribute eines Elements. können Sie auf viele weitere Informationen zugreifen. Wir können
suchen Sie im schreibgeschützten HTMLElement.offsetHeight nach der Höhe jedes Bereichs auf unserer Seite relativ zum Layout.
let allSections = document.querySelectorAll('section');
allSections.forEach((sectionInstance) => {
console.log(sectionInstance.offsetHeight);
});
Wenn der Nutzer die Ausrichtung seines Geräts oder die Breite des Darstellungsbereichs ändert, wird die Höhe jedes <section>-Elements
ändert sich und die DOM-Eigenschaften werden automatisch aktualisiert.
Die HTML-Schnittstellen-APIs sind nicht auf den Zugriff auf Attributwerte beschränkt. Das DOM gibt 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 zugreifen,
und wenn die Video- oder Audiowiedergabe mit HTMLMediaElement.duration beendet ist,
HTMLMediaElement.currentTime und
HTMLMediaElement.ended.
Verfügbare Oberflächen für Elemente
Die meisten HTML-Elemente, die wir bisher in dieser Reihe behandelt haben und die noch nicht behandelt wurden, haben mit Ausnahme einiger Abschnittselemente
eine zugehörige DOM-Schnittstelle. Die Basisschnittstelle für alle Elemente heißt Element.
Das HTMLElement-Objekt wird vom Element und allen spezifischen HTML-Elementen übernommen.
erben. Einige elementspezifische Oberflächen 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–<audio>,<video>HTMLMenuElement–<menu>HTMLMetaElement–<meta>HTMLMeterElement–<meter>HTMLModElement–<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>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 Gruppierung von Elementen in Camel-Case-Schreibweise, gefolgt von „Element“. aber das Element oder die Gruppierung von Elementen folgt keinem exakten Muster. Mach dir keine Sorgen. Sie müssen sich diese nicht merken. Es ist nur wichtig zu wissen, dass sie vorhanden sind, damit Sie sie bei Bedarf aufrufen können.
Wenn Sie eine Sammlung von Elementen haben, gibt es auch Sammlungsschnittstellen. Beispiel: Der Parameter
Die Methode HTMLCollection.namedItem() gibt das erste
-Element in der Sammlung, dessen Attribut id oder name mit dem Parameter übereinstimmt, oder null, wenn kein Element übereinstimmt.
Über 30 Elemente haben keine zugehörige DOM-Schnittstelle außer HTMLElement, einschließlich <address>, <article>,
<section>, <nav>, <header>, <footer>, <aside> und <hgroup>. Viele Elemente, die noch nicht verworfene Elemente unterstützen,
Nicht globale Attribute haben elementspezifische Oberflächen wie HTMLPElement (das <p>-Element) und HTMLUnknownElement
( <😃> oder andere Elemente, die nicht definiert sind), aber diese Schnittstellen implementieren 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 denselben Methoden- oder Eigenschaftsnamen hat wie eine übernommene Schnittstelle, wird die Übernahmemethode oder -eigenschaft überschrieben.
übernommenen wird. Beim Zugriff auf die obigen Eigenschaften alt und offsetHeight mit imageInstance.alt und sectionInstance.offsetHeight
konnte nicht festgestellt werden, auf welche API zugegriffen wurde.
Wie in diesen beiden Beispielen ist dies im Allgemeinen kein Problem. Aber es ist möglich. Beispiel: Der HTMLCollection.length
ist schreibgeschützt, während die übernehmende HTMLOptionsCollection-Schnittstelle
Längeneigenschaft (nur von der Eigenschaft options von <select> zurückgegeben) kann auch zum Festlegen der Sammlungsgröße verwendet werden.
Andere Schnittstellen
Es gibt zusätzliche Schnittstellen, mit denen sich die Zweigstellen von DOM-Knoten bearbeiten lassen. EventTarget-Oberfläche mit
mit addEventListener() und removeEventListener() wird von den Oberflächen Node und Window übernommen. Die Oberflächenelement "Element", "Document" und "DocumentFragment", die wir in benutzerdefinierten Elementen gesehen haben, übernehmen wiederum die von Node und die HTMLElement-Schnittstelle übernimmt die von "Element".
Die node-Schnittstelle
Jeder Typ von DOM-Knoten wird durch eine Schnittstelle dargestellt, die auf Node basiert.
Hier finden Sie Informationen und Methoden zu Elementen in Bezug auf den DOM-Baum. Die Schnittstelle Node ermöglicht das Abfragen und Hinzufügen von Knoten zur Knotenstruktur.
Douglas Crockfords berühmter „Walk the DOM“ nutzt die Methode firstChild von Node.js
und nextSibling-Properties.
const walk_the_DOM = function walk(node, callback) {
callback(node);
node = node.firstChild;
while (node) {
walk(node, callback);
node = node.nextSibling;
}
};
Wir haben appendChild() und
cloneNode()-Methoden zum Definieren von benutzerdefinierten Elementen.
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 des Elements
. Es gibt auch eine shadowRoot-Schnittstelle für die
Shadow DOM API, die getrennt von einem
DOM-Hauptbaum des Dokuments.
Die Schnittstellen Document und HTMLDocument
Die Document-Oberfläche übernimmt die Einstellungen von Node. Sie repräsentiert die
Webseite, die im Browser geladen wird, unabhängig davon, ob es sich um ein HTML-, SVG-, XML-, MathML- oder ein anderes Dokument handelt. Die Document-Schnittstelle
wird aus der HTMLDocument-Oberfläche übernommen.
Das document ermöglicht schnellen Zugriff auf Knotentypen und die Möglichkeit, Sammlungen bestimmter Elementtypen zu erstellen, z. B.
document.body und document.styleSheets. Das HTML-Dokument ermöglicht den Zugriff auf Informationen, die für das Dokument relevant sind,
nicht in HTML-Knoten wie Document.location,
Document.lastModified und Document.Cookie
Die Verfügbarkeit einiger APIs basiert auf den Funktionen der Dokumentoberfläche, darunter die Drag-and-drop-API.
und der FullScreen API. Beide übernehmen die Einstellungen von Element.
Die Window-Schnittstelle
Die Window-Oberfläche umfasst global verfügbare Elemente über das DOM hinaus, die zur Manipulation des DOMs verwendet werden können. Fenster bietet Funktionen, Namespaces, Objekte und Konstruktoren, die in JavaScript von MDN dokumentiert sind und DOM-Referenzen.
Die Window-Schnittstelle ist die API für das Objekt, das das Dokument enthält. Das globale window-Objekt ist das Fenster, in dem die
Skript wird ausgeführt. Jeder Browsertab enthält ein eigenes Window-Objekt. Die Window-Oberfläche kann den Inhalt des Tabs abfragen
sowie das gesamte Fenster und das Gerät. Beispiel: Der resizeTo()
kann verwendet werden, um die Größe des Browserfensters anzupassen, den devicePixelRatio.
gewährt Zugriff auf die Pixel des Geräts. Wenn Sie auf Informationen über den Tab zugreifen,
und nicht in der DOM-Struktur, die der Tab anzeigt, handelt es sich bei dem Fenster wahrscheinlich um die Benutzeroberfläche, nach der Sie suchen.
Die Verfügbarkeit einiger APIs basiert auf Funktionen, die in der Window-Oberfläche angezeigt werden, darunter die Web Worker und IndexedDB APIs.
Wissen testen
Testen Sie Ihr Wissen über HTML-APIs.
Wofür steht das O in DOM?
Über welche Benutzeroberfläche findest du Informationen zu dem Tab, auf dem sich der Inhalt befindet?