Für HTML-Objekte müssen wir zunächst erwähnen, dass der Node-Knoten eine Schnittstelle ist, die von dieser Schnittstelle erbt und es ermöglicht, dass diese verschiedenen Typen auf ähnliche Weise verarbeitet (oder getestet) werden. Gibt es Schnittstellen, die Node von seinen Methoden und Eigenschaften erbt? Lesen wir zuerst diesen Artikel. Apache PHP MySQL
Warum diesen Artikel schreiben?
Vielleicht beschäftigen Sie sich schon seit einiger Zeit mit der Webentwicklung. Haben Sie schon einmal über die folgenden Fragen nachgedacht?
Warum können das p-Element oder sogar alle HTML-Elemente addEventListener verwenden, um Ereignisse hinzuzufügen?
Warum hat jeder DOM-Knoten Attribute wie parentNode, firstChild, nodeType usw.?
Warum hat jedes DOM-Element Attribute wie className, classList, innerHTML usw.?
Warum haben einige DOM-Elemente Attribute wie accessKey, contentEditable, isContentEditable usw.?
Warum hat jedes DOM-Element die Attribute onclick, ondblclick, ondrag und andere?
Dieser Artikel soll diese einfachen, aber nicht „einfachen“ Fragen beantworten.
EventTarget
Definition
EventTarget ist eine von Objekten implementierte Schnittstelle, die Ereignisse empfangen kann und für die Listener erstellt werden können.
Rolle
Element, Dokument und Fenster sind die häufigsten Ereignisziele, aber auch andere Objekte können Ereignisziele sein, z. B. XMLHttpRequest, AudioNode, AudioContext usw.
Viele Ereignisziele (einschließlich Elemente, Dokumente und Fenster) unterstützen auch das Festlegen von Ereignishandlern über onXXX-Attribute (z. B. onclick) und Attribute.
Die Methoden dieser Schnittstelle
EventTarget.addEventListener()
Registrieren Sie einen Event-Handler für einen bestimmten Event-Typ auf dem EventTarget.
EventTarget.removeEventListener()
Entfernen Sie den Ereignis-Listener aus EventTarget.
EventTarget.dispatchEvent()
Versendet Ereignisse an dieses EventTarget.
Wir implementieren EventTarget selbst
var EventTarget = function() {
this.listeners = {};
};
EventTarget.prototype.listeners = null;
EventTarget.prototype.addEventListener = function(type, callback) {
if (!(type in this.listeners)) {
this.listeners[type] = [];
}
this.listeners[type].push(callback);
};
EventTarget.prototype.removeEventListener = function(type, callback) {
if (!(type in this.listeners)) {
return;
}
var stack = this.listeners[type];
for (var i = 0, l = stack.length; i < l; i++) {
if (stack[i] === callback){
stack.splice(i, 1);
return;
}
}
};
EventTarget.prototype.dispatchEvent = function(event) {
if (!(event.type in this.listeners)) {
return true;
}
var stack = this.listeners[event.type].slice();
for (var i = 0, l = stack.length; i < l; i++) {
stack[i].call(this, event);
}
return !event.defaultPrevented;
};Nach dem Login kopieren
Node
Definition
Node ist eine Schnittstelle, von der viele DOM-Typen erben und die eine ähnliche Handhabung (oder Prüfung) ermöglicht ) diese verschiedenen Typen. Node ist eine Schnittstelle, von der viele DOM-Typen erben und die es ermöglicht, diese verschiedenen Typen auf ähnliche Weise zu behandeln (oder zu testen).
Gibt es Schnittstellen, die Node von seinen Methoden und Eigenschaften erbt?
Document, Element, CharacterData (die Text, Comment und CDATASection erben), ProcessingInstruction, DocumentFragment, DocumentType, Notation, Entity, EntityReference
PS: In bestimmten Fällen, in denen Methoden und Eigenschaften nicht miteinander verbunden sind, diese Die Schnittstelle gibt möglicherweise null zurück. Sie können Ausnahmen auslösen – beispielsweise beim Hinzufügen eines untergeordneten Knotens zu einem Knoten, der die Existenz untergeordneter Knoten nicht zulässt.
Schnittstellenbezogene Attribute und Methoden
Attribute
Node.baseURI
Gibt einen DOMString zurück, der die Basis-URL darstellt. Das Konzept der Basis-URL ist in verschiedenen Sprachen unterschiedlich. In HTML stellt die Basis-URL das Protokoll und den Domänennamen sowie das Dateiverzeichnis bis zum letzten „/“ dar.
Node.childNodes
Gibt eine Echtzeit-NodeList zurück, die alle untergeordneten Knoten dieses Knotens enthält. NodeList ist „in Echtzeit“, was bedeutet, dass das NodeList-Objekt automatisch aktualisiert wird, wenn sich die untergeordneten Knoten des Knotens ändern.
Node.firstChild
Gibt den ersten untergeordneten Knoten dieses Knotens zurück oder null, wenn der Knoten keine untergeordneten Knoten hat.
Node.lastChild
Gibt den letzten untergeordneten Knoten dieses Knotens zurück oder null, wenn der Knoten keine untergeordneten Knoten hat.
Einige Knotenschnittstellenattribute werden hier weggelassen, weitere Attribute finden Sie hier.
Methode
Hier kommt der Punkt!
Wichtige Punkte: Es erbt die Methoden „addEventListener“, „removeEventListener“, „dispatchEvent“ und andere von seiner übergeordneten Klasse „EventTarget“.
Node.appendChild()
Fügt einen Knoten am Ende der Liste der untergeordneten Knoten des angegebenen übergeordneten Knotens hinzu.
Node.contains()
gibt einen booleschen Wert zurück, um anzugeben, ob der eingehende Knoten ein Nachkomme des Knotens ist.
Node.cloneNode()
Gibt eine Kopie des Knotens zurück, auf dem diese Methode aufgerufen wurde.
Einige Knotenschnittstellenmethoden werden hier weggelassen, weitere Methoden finden Sie hier.
Element
Beschreibung
Element ist eine sehr allgemeine Basisklasse und alle Objekte unter dem Document-Objekt erben sie. Diese Schnittstelle beschreibt Methoden und Eigenschaften, die allen Elementen derselben Art gemeinsam sind. Diese Schnittstellen erben von Element und fügen einige zusätzliche Funktionen zur Beschreibung spezifischer Verhaltensweisen hinzu.
PS: Die HTMLElement-Schnittstelle ist die Basisschnittstelle für alle HTML-Elemente, und die SVGElement-Schnittstelle ist die Basisschnittstelle für alle SVG-Elemente.
In anderen Sprachen als dem Web, wie XUL, können Sie es auch über die API von XULElement implementieren.
Attribute
Alle Attribute erben von der Vorgängerschnittstelle Node und der von ihr erweiterten Schnittstelle EventTarget und erben Attribute von ParentNode, ChildNode, NonDocumentTypeChildNode und Animatable.
Element. zugewiesenerSlot
Gibt die HTMLSlotElement-Schnittstelle zurück, die dem Element entspricht
Element.attributes
Gibt eine Sammlung aller Attribute zurück, die sich auf das Element NamedNodeMap beziehen
Element.classList
Das von diesem Element zurückgegebene Klassenattribut ist eine DOMTokenList.
Element.className
Es ist ein DOMString, der die Klasse dieses Elements darstellt.
Hier lassen Sie einige Elemente weg Weitere Methoden finden Sie hier.
Methode
Hier kommt der Punkt!
Erbt Methoden von seiner übergeordneten Klasse (Node) und der übergeordneten Klasse seiner übergeordneten Klasse (EventTarget) und implementiert parentNode, ChildNode, NonDocumentTypeChildNode und Animatable.
Einige Element-Schnittstellenmethoden werden hier weggelassen, weitere Methoden finden Sie hier. Die Methode
Element.closest()
wird verwendet, um das Vorgängerelement abzurufen, das einem bestimmten Selektor entspricht und dem aktuellen Element am nächsten liegt (es kann auch das aktuelle Element selbst sein). Wenn keine Übereinstimmung gefunden wird, wird null zurückgegeben.
Element.getAttribute()
Gibt den zuletzt angegebenen Attributwert für das Element zurück. Wenn die angegebene Eigenschaft nicht vorhanden ist, wird null oder „“ (leerer String) zurückgegeben.
Element.getElementsByClassName()
Die Liste der Klassen wird im Parameter angegeben und eine dynamische HTMLCollection wird zurückgegeben, die alle Nachkommenelemente enthält, die diese Klassen enthalten.
Einige Element-Schnittstellenmethoden werden hier weggelassen, weitere Methoden finden Sie hier.
HTMLElement
Funktion
HTMLElement-Schnittstelle repräsentiert alle HTML-Elemente. Einige HTML-Elemente implementieren die HTMLElement-Schnittstelle direkt, andere implementieren die HTMLElement-Schnittstelle indirekt.
Attribute
Dann kommt hier der wichtige Punkt!
Eigenschaften, die von der übergeordneten Schnittstelle Element und GlobalEventHandlers geerbt wurden.
HTMLElement.accessKey DOMString Ruft die Tastenkombination für den Elementzugriff ab oder legt diese fest.
HTMLElement.accessKeyLabel DOMString Gibt eine Zeichenfolge zurück, die die Tastenkombination für den Elementzugriff enthält (schreibgeschützt).
HTMLElement.contentEditable DOMString Ruft die Tastenkombination des Elements ab bzw. legt diese fest Zugriffsschlüssel Bearbeitungsstatus
HTMLElement.isContentEditable Boolean Gibt an, ob der Inhalt des Elements bearbeitbar (schreibgeschützt) ist.
Mehrere HTMLElement-Schnittstellenattribute werden hier weggelassen. Weitere Methoden finden Sie hier.
Event Handler
htmlelement.ontouchStart htmlelement.ontouchend
htmlelement.ontouchmove
htmlelement.ontouch> TouchLeave
htmleice.ontouchCancel
Methoden
HTMLElement.blur() void Das Element verliert den Fokus
HTMLElement.click() void Löst das Klickereignis des Elements ausHTMLElement.focus() void Das Element erhält den Fokus
HTMLElement. forceSpellCheck() void
GlobalEventHandlers
Definition
GlobalEventHandlers-Schnittstelle beschreibt mehrere gängige Schnittstellen für Ereignishandler wie HTMLElement, Datei, Fenster oder WorkerGlobalScope Web Worker. Diese Schnittstellen können weitere Event-Handler implementieren.
Eigenschaften
GlobalEventHandlers.onabort
Ereignisse unterbrechen.
GlobalEventHandlers.onblur
Fokus verlorenes Ereignis.
GlobalEventHandlers.onfocus
Holen Sie sich das Fokusereignis.
Einige GlobalEventHandlers-Schnittstelleneigenschaften werden hier weggelassen. Weitere Methoden finden Sie hier.
Elementschnittstelle
Diese Schnittstelle dient zur Erstellung entsprechender Elemente.
Zum Beispiel: Die HTMLpElement-Schnittstelle stellt einige spezielle Attribute bereit (sie erbt auch die übliche HTMLElement-Schnittstelle), um das p-Element zu bearbeiten.
Die HTMLFormElement-Schnittstelle kann
Das obige ist der detaillierte Inhalt vonWie sieht ein vollständiges HTML-Objekt aus und wie generiert man es?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
