Eigenschaften
Das window Objekt hat viele Eigenschaften. Es erbt Eigenschaften von der EventTarget-Schnittstelle und implementiert Eigenschaften von den WindowOrWorkerGlobalScope– und WindowEventHandlers-Mixins.
window.closed
Die closed-Eigenschaft ist eine schreibgeschützte Eigenschaft, die angibt, ob das referenzierte Browserfenster geschlossen ist oder nicht. Sie ist true, wenn das Fenster geschlossen ist und false andernfalls. Wenn Sie zum Beispiel:
console.log(window.closed)
auf das aktuell geöffnete Fenster ausführen, sollte es false protokollieren, da das Browserfenster offensichtlich geöffnet ist.
window.console
Die console-Eigenschaft ist ein Objekt mit vielen Eigenschaften, die für die Protokollierung von Informationen auf der Browserkonsole nützlich sind. Es ist ein Nur-Lese-Objekt. Die console-Methoden sind für die Fehlersuche nützlich und sollten nicht für die Darstellung von Informationen für Endbenutzer verwendet werden. Das Objekt console hat die folgenden Methoden:
-
console.assert()– protokolliert eine Meldung und den Stack-Trace auf der Konsole, wenn das erste Argumentfalse -
console.clear()– löscht die Konsole -
console.count()– protokolliert die Anzahl der Aufrufe dieser Methode mit dem angegebene Bezeichnung -
console.countReset()– setzt den Wert des Zählers für die angegebene Bezeichnung zurück -
console.debug()– protokolliert eine Meldung auf der Konsole mit dem Loglevel ‚debug‘ -
console.dir()– listet die Eigenschaften des angegebenen JavaScript-Objekts auf. -
console.dirxml()– zeigt eine HTML- oder XML-Darstellung des Objekts an, wenn möglich -
console.error()– protokolliert eine Fehlermeldung auf der Konsole. Mit Hilfe von Zeichenkettenersetzungen und zusätzlichen Argumenten kann die Protokollmeldung formatiert werden. -
console.group()– erstellt eine Gruppe von Konsolenmeldungen, die nach Ebenen eingerückt sind. Eine Ebene kann mitgroupEnd()verlassen werden. -
console.groupCollapsed()– erzeugt eine Gruppe von Konsolenmeldungen, die nach Ebenen eingerückt sind, wobei die Elemente zusammengeklappt werden. Wir können eine Ebene mitgroupEnd(). -
console.groupEnd()verlassen – verlässt die aktuelle Inline-Gruppe -
console.info()– protokolliert Informationsmeldungen. Wir können String-Substitution und zusätzliche Argumente verwenden, um die Log-Meldung zu formatieren. -
console.log()– wird für die allgemeine Protokollierung von Informationen verwendet. Die Protokollnachricht kann mit Hilfe von Stringsubstitution und zusätzlichen Argumenten formatiert werden. -
console.table()– protokolliert und zeigt Daten in einem Tabellenformat an -
console.time()– startet einen Timer mit dem im Parameter angegebenen Namen. Auf einer bestimmten Seite können 10000 Timer gleichzeitig laufen. -
console.timeEnd()– stoppt den angegebenen Timer und protokolliert die seit dem Start verstrichene Zeit in Sekunden. -
console.timeLog()– protokolliert den Wert des angegebenen Timers auf der Konsole -
console.trace()– protokolliert einen Stack-Trace -
console.warn()– protokolliert eine Warnmeldung auf der Konsole. Wir können String-Substitution und zusätzliche Argumente verwenden, um die Log-Meldung zu formatieren.
window.customElements
Die customElements-Eigenschaft ist eine schreibgeschützte Eigenschaft, die einen Verweis auf das CustomElementRegistry-Objekt zurückgibt, das verwendet werden kann, um neue benutzerdefinierte Elemente zu registrieren und Informationen über zuvor registrierte benutzerdefinierte Elemente zu erhalten. Benutzerdefinierte Elemente werden auch als Web Components bezeichnet.
Web Components ist ein Standard, mit dem wir benutzerdefinierte Elemente erstellen können, die andere HTML-Elemente kapseln. Wir brauchen dies, damit wir Gruppen von HTML-Elementen an verschiedenen Stellen wiederverwenden können. Ohne diesen Standard müssten wir dieselbe Gruppe von HTML-Elementen an verschiedenen Stellen wiederholen, wenn wir sie wiederverwenden wollen. Definierte benutzerdefinierte Elemente werden im CustomElementRegistry gespeichert, damit die Browser wissen, dass das definierte benutzerdefinierte Element tatsächlich ein gültiges Element ist.
Um ein benutzerdefiniertes Element zu definieren, können wir die customElements-Eigenschaft wie im folgenden Code verwenden:
const customElementRegistry = window.customElements;
customElementRegistry.define('hello-element',
class extends HTMLElement {
constructor() {
super();
const shadow = this.attachShadow({
mode: 'open'
});
const span = document.createElement('span');
span.setAttribute('class', 'wrapper');
span.innerHTML = 'Hello';
shadow.appendChild(span);
}
});
Dann fügen wir in der HTML-Datei hinzu:
<hello-element></hello-element>
Im obigen Code haben wir die define-Methode des window.customElements-Objekts verwendet. Im ersten Argument der Methode define geben wir den Namen des Elements an. Im zweiten Element geben wir eine HTMLElement-Klasse ein, die in JavaScript ein Objekt ist. In der constructor-Methode der class wird ein span-Element mit dem innerHTML-Wert 'Hello' erstellt und an die Schattenwurzel angehängt, die die Wurzel der Webkomponente ist. Wenn wir den obigen Code ausführen, sollte das Wort Hello auf dem Bildschirm angezeigt werden.
Die Methode define nimmt drei Argumente entgegen. Das erste ist name, eine Zeichenfolge, die den Namen des benutzerdefinierten Elements enthält. Das zweite Argument ist ein HTMLElement-Konstruktor, in dem wir in der Konstruktorklasse die HTML-Elemente erstellen, die wir an die Schattenwurzel anhängen und die erstellten Elemente anzeigen wollen. Das dritte Argument ist ein optionales Argument, das steuert, wie Elemente definiert werden. Die einzige Eigenschaft, die unterstützt wird, ist die extends-Eigenschaft, eine Zeichenkette, mit der wir das zu erweiternde eingebaute Element angeben können. Sie ist nützlich, um ein benutzerdefiniertes Element zu erstellen, das ein eingebautes Element wie div , span oder p anpasst.