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>
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
–<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?