Wie sieht ein vollständiges HTML-Objekt aus und wie generiert man es?

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;
};

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 aus

HTMLElement.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

-Objekte erstellen oder ändern; sie erbt die Methoden und Eigenschaften der HTMLElement-Schnittstelle.
Die HTMLAnchorElement-Schnittstelle stellt Hyperlink-Elemente dar und stellt einige spezielle Eigenschaften und Methoden (zusätzlich zu denen, die von der gewöhnlichen HTMLElement-Objektschnittstelle geerbt wurden) zur Verfügung, um das Layout und die Anzeige dieser Elemente zu manipulieren.
......

Beantworten Sie die vorherige Frage

Durch das obige Wissen verstehen wir:

HTMLpElement (andere Elementschnittstelle) erbt die Schnittstellen HTMLElement und GlobalEventHandlers.

HTMLElement erbt die Element-Schnittstelle.
Element erbt die Node-Schnittstelle.
Knoten erbt die EventTarget-Schnittstelle.

Warum können das p-Element oder sogar alle HTML-Elemente addEventListener verwenden, um Ereignisse hinzuzufügen?
Antwort: Von der EventTarget-Schnittstelle geerbt. Warum hat jeder DOM-Knoten Attribute wie parentNode, firstChild, nodeType usw.?
Antwort: Von der Node-Schnittstelle geerbt.
Warum hat jedes DOM-Element Attribute wie className, classList, innerHTML usw.?
Antwort: Von der Element-Schnittstelle geerbt.
Warum haben einige DOM-Elemente Attribute wie accessKey, contentEditable, isContentEditable usw.?
Antwort: Von der HTMLElement-Schnittstelle geerbt.
Warum hat jedes DOM-Element die Attribute onclick, ondblclick, ondrag und andere?
Antwort: Von der GlobalEventHandlers-Schnittstelle geerbt.

Das ist der Punkt!
Ende:

Nur ​​durch die obige Vererbungsbeziehung ist das DOM-Element, das wir erhalten, ein vollständiges HTML-Objekt, und wir können Eigenschaften festlegen/abrufen, Ereignisse binden, Stilklassen hinzufügen usw andere Operationen. Verwandte Artikel:

So ermitteln Sie, ob ein JS-Objekt ein Dom-Objekt ist

Was ist das Konzept der Datenbankintegrität?

Ähnliche Videos:

HTML5-Vollversionshandbuch

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!