Am Anfang des Artikels möchte ich allgemein erwähnen, was DOM und was BOM ist , da sich dieser Artikel letztendlich an Freunde richtet, die über eine gewisse JavaScript-Grundlage verfügen, aber DOM und BOM nicht verstehen oder gar nichts davon wissen. .
Bevor wir jedoch darüber sprechen, was DOM und BOM ist , erlauben Sie mir bitte , Ihnen die gesamte Struktur von Javascript zu zeigen :
Im Bild oben können wir sehen, dass es vier Elemente gibt: JavaScript, ECMAScript, DOM und BOM . Welche Verbindung besteht also zwischen den vieren? Verwenden Sie eine Gleichung, um die Beziehung zwischen ihnen zusammenzufassen:
JavaScript = ECMAscript + BOM + DOM.
Lassen Sie uns nacheinander einen Überblick über sie geben :
ECMAscript:
ECMAScript ist eine Sprache, die von ECMA International (ehemals European Computer Manufacturers Association) durch ECMA-262 weitergegeben wird eine standardisierte Skript-Programmiersprache . Es ist der Standard für JavaScript (kurz JS), und Browser implementieren diesen Standard .
ECMAscript ist eher eine Vorschrift, die festlegt, wie jeder Browser die Syntax von JavaScript ausführt , denn wir wissen, dass JavaScript eine Skriptsprache ist, die auf dem Browser läuft! Es gibt Vorschriften, aber es fehlt uns immer noch die Möglichkeit, mit jedem Element auf der Seite zu interagieren . Zu diesem Zeitpunkt wurde das folgende DOM geboren!
DOM:
DOM ( Document Object Model ) ist eine sprachunabhängige Anwendungsprogrammierschnittstelle zum Betrieb von XML- und HTML-Dokumenten .
Für JavaScript: Um JavaScript den Betrieb von HTML zu ermöglichen , verfügt JavaScript über eine eigene DOM-Programmierschnittstelle .
In einem Satz: DOM bietet JavaScript eine „Methode“ für den Zugriff auf und den Betrieb von HTML-Elementen (der Grund, warum wir das Wort Schnittstelle nicht verwenden, liegt darin, dass wir befürchten, dass einige Freunde Angst haben, wenn sie die Schnittstelle sehen, aber tatsächlich Die genaueste Beschreibung erfolgt über die JavaScript-Schnittstelle .
Stückliste:
Stückliste ist Browserobjektmodell, Browserobjektmodell . BOM ist eine Schnittstelle, die scheinbar das Verhalten des Browsers steuert .
Für JavaScript: Damit JavaScript das Verhalten des Browsers steuern kann , verfügt JavaScript über eine eigene BOM-Schnittstelle .
In einem Satz: BOM bietet JavaScript eine „Methode“ zur Steuerung des Browserverhaltens.
Schließlich ist ECMscript unter den oben genannten drei Komponenten von JavaScript eine Spezifikation , während die verbleibenden beiden „Methoden“ bereitstellen, die HTML-Elementen bzw. Browsern entsprechen . Daher konzentrieren wir uns im Folgenden auf die beiden letztgenannten: DOM und BOM und geben eine systematische Erklärung . Da es sich um Anfänger handelt, werden meine folgenden Erklärungen so einfach und leicht verständlich wie möglich sein. Wenn Sie keine gute Grundlage haben, können Sie es bedenkenlos essen !
Lassen Sie uns zunächst das damit verbundene Wissen über DOM erklären . Ich habe es in zwei Teile unterteilt :
Okay, was ist ein DOM-Baum?
Einige Anfänger, die DOM gelernt haben, sind mit diesem Wort vielleicht etwas unbekannt, aber tatsächlich ist der DOM-Baum keine besonders fantasievolle Sache. Im Gegenteil, für Front-End-Mitarbeiter ist der DOM-Baum der HTML-Code der von Ihnen verarbeiteten Seiten Jeden Tag besteht der Baum aus Elementen:
Im Stücklistenbaum kann jeder Knoten zwei Identitäten haben: Er kann ein untergeordneter Knoten des übergeordneten Knotens sein oder der übergeordnete Knoten anderer untergeordneter Knoten. Schauen wir uns gemeinsam den folgenden Code an :
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<title>DOM_demo</title>
</head>
<Körper>
<p>
<a href="https://blog.csdn.net/qq_52736131">Krebse tanzen Tango</a>
</p>
</body>
</html> Für den obigen Code sollte der DOM-Baum wie folgt aussehen:
Zu diesem Zeitpunkt möchte jemand fragen: Glauben Sie, dass der DOM-Baum so lange etwas mit der Bedienung von HTML-Elementen zu tun hat ?
Die Antwort ist sehr relevant. Nur wenn wir die DOM-Baumstruktur des Dokuments verstehen, können wir DOM-Elemente genau und effektiv bedienen . Andernfalls treten verschiedene unerwartete Fehler auf. Bevor wir die HTML-Elemente einer Seite bedienen, müssen wir eine klare Darstellung des DOM der gesamten Seite haben . Auch wenn wir nicht tatsächlich zeichnen, müssen wir eine klare Kontextstruktur im Kopf haben.
Bezüglich einiger gängiger Methoden zum Betreiben von HTML-Elementen im DOM in JavaScript habe ich sie in mehrere Unterteile unterteilt , um sie Ihnen vorzustellen:
// 1. Pass Get den ID-Attributwert des Elements und gibt ein Elementobjekt zurück. var element = document.getElementById(id_content) //2. Holen Sie sich das Element über seinen Namensattributwert und geben Sie ein Array von Elementobjekten zurück. var element_list = document.getElementsByName(name_content) //3. Holen Sie sich das Element über den Klassenattributwert des Elements und geben Sie ein Array von Elementobjekten zurück. var element_list = document.getElementsByClassName(class_content) //4. Holen Sie sich das Element über den Tag-Namen und geben Sie ein Array von Elementobjekten zurück. var element_list = document.getElementsByTagName(tagName)
//1. Die übergebenen Parameter sind natürlich die Attributnamen, wie z. B. Klasse, ID, href var attr = element.getAttribute(attribute_name) //2. Legen Sie den Attributwert des Elements fest. Die übergebenen Parameter sind natürlich der Attributname des Elements und der entsprechende festzulegende Attributwert.
//1. Erstellen Sie ein HTML-Element, und der übergebene Parameter ist der Elementtyp, z. B. p, h1-5, a. Nehmen Sie p als Beispiel unten var element = document.createElement( "P") //2. Erstellen Sie einen Textknoten und übergeben Sie den entsprechenden Textinhalt (beachten Sie, dass es sich um einen Textknoten und nicht um ein HTML-Element handelt). var text_node = document.createTextNode(text) //3. Erstellen Sie einen Attributknoten und der übergebene Parameter ist der entsprechende Attributname var attr_node = document.createAttribute(attribute_name) element.setAttributeNode(attr_node)
Achten Sie besonders auf die dritte Methode zum Erstellen eines Attributknotens, die mit einem bestimmten Element übereinstimmt. Das heißt, Sie müssen zuerst ein bestimmtes Elementelement abrufen, einen Attributknoten erstellen und diesen schließlich hinzufügen Attributknoten zu diesem Element ( setAttributeNode) .
//1. Fügen Sie einen Knoten am Ende des Elements hinzu. Der übergebene Parameter ist der Knotentyp element.appendChild(Node).//2. Fügen Sie einen Knoten vor einem vorhandenen Knoten innerhalb des Elements
ein und
übergeben Sie dennoch einen Knotentypparameter element.insertBefore(new_Node, previous_Node).
Wählen Sie gleichzeitig das übergeordnete Knotenelement aus . Bei der zweiten Methode müssen Sie sogar die Geschwisterknoten hinter der Einfügeposition finden .
//Löschen eines Knotens innerhalb eines Elements. Der übergebene Parameter ist der Knotentypparameter element.removeChild(Node).
Beachten Sie , dass Sie beim Löschen das entsprechende übergeordnete Knotenelement finden müssen, um es reibungslos zu löschen .
Zum Schluss einige allgemeine DOM-Attribute :
//1 Den übergeordneten Knoten des aktuellen Elements abrufen var element_father = element.parentNode //2. Holen Sie sich den untergeordneten HTML-Elementtyp des aktuellen Elements var element_son = element.children //3. Alle Arten von untergeordneten Knoten des aktuellen Elements abrufen, einschließlich HTML-Elementen, Text und Attributen var element_son = element.childNodes //4. Holen Sie sich den ersten untergeordneten Knoten des aktuellen Elements var element_first = element.firstChild //5. Holen Sie sich das vorherige Geschwisterelement des aktuellen Elements var element_pre = element. previousSibling //6. Holen Sie sich das nächste Geschwisterelement des aktuellen Elements var element_next = element.nextSibling //7. Den gesamten Text des aktuellen Elements abrufen, einschließlich HTML-Quellcode und Text var element_innerHTML = element.innerHTML //8. Holen Sie sich den gesamten Text des aktuellen Elements, mit Ausnahme des HTML-Quellcodes var element_innerTEXT = element.innerText
Unter ihnen bedeutet der siebte , den HTML-Code und den Text im Element in Text umzuwandeln , und den ursprünglichen HTML-Code ausgeführt wird, ist die Umwandlung in Text gleichbedeutend mit der Umwandlung in eine gewöhnliche Zeichenfolge!
Als nächstes werden wir noch einmal über Stückliste sprechen. Aus Platzgründen wird die Stückliste nicht im Detail erläutert (die Praktikabilität ist in der Tat nicht so groß wie die der DOM). Sehen wir uns die Einführung zu BOM am Anfang an:
BOM bietet mehrere „Methoden“ für die Bedienung des Browsers.
Zuerst verwenden wir ein Bild, um die Struktur des gesamten BOM zu sortieren. Ähnlich wie DOM hat auch BOM eine Baumstruktur.
Aus dem Bild oben können wir sehen:
Das Fenster steht an der Spitze der gesamten Nahrungskette des Stücklistenbaums , sodass jedes neu geöffnete Fenster als Fensterobjekt betrachtet wird.
Das Fensterobjekt verfügt über die folgenden allgemeinen Eigenschaften und Methoden :
| Eigenschaft/Methode | Bedeutung |
| opener | Das übergeordnete Fenster des aktuellen Fensters |
| Länge | Die Anzahl der Frames im Fenster |
| Dokument | Das aktuell im Fenster angezeigte Dokumentobjekt |
| Alert(string) | Erstellt ein Warndialogfeld und zeigt eine Meldung |
| an close() | Schließt das Fenster |
| bestätigen() | Erstellen Sie ein Dialogfeld, das eine Benutzerbestätigung erfordert |
| open(url, name, [Optionen]) | Öffnen Sie ein neues Fenster und geben Sie das neue Fensterobjekt zurück |
| prompt(text, defaultInput) | Erstellen Sie ein Dialogfeld Dazu muss der Benutzer Informationen eingeben. |
| setInterval(expression, milliseconds) | berechnet einen Ausdruck nach dem angegebenen Zeitintervall. |
| setInterval(function, millis enconds, [arguments]) | ruft nach dem angegebenen Zeitintervall eine Funktion setTimeout(expression, milli seconds) auf |
| setTimeout(Ausdruck, | |
| Millisekunden | ) | berechnet nach Ablauf des Timers eine Funktion, nachdem der Timer abgelaufen ist. |
Darunter können Sie sehen , dass es oben eine Funktion gibt , denn wenn wir JavaScript lernen, sind die meisten davon Wir verwenden das Popup-Fenster der Funktion „alert()“ als Eingabe- und Ausgabestream. Wenn Sie dies sehen, fragen Sie sich vielleicht:
Als ich die Funktion „alert()“ verwendet habe, schien dieses Fenster nicht erwähnt zu werden . Ist die Funktion „alert()“ hier also die gleiche Funktion „alert()“, die ich zuvor gelernt habe ? Die Antwort lautet:
Diese beiden Warnungen () sind tatsächlich dieselben Funktionen . Der Grund, warum Fenster weggelassen werden können, liegt darin, dass alle Eigenschaften und Methoden von Fenstern auf zwei Arten ausgedrückt werden können :
(1) window.property/window Methode ().
(2) Der direkte Aufruf von attribute/method()
ist nicht nur alarm(), alle oben genannten Fensterattribute und -funktionen sind gültig, interessierte Freunde können es selbst ausprobieren.
Was ist ein Standortobjekt ?
Das Standortobjekt ist ein Attribut des Fensterobjekts, das Informationen über das im aktuellen Fenster geladene Dokument bereitstellt und außerdem einige Navigationsfunktionen bereitstellt.
Das Standortobjekt verfügt über die folgenden allgemeinen Attribute und Methoden:
| Attribut-/ | Methodeninhalt |
| Host | -Hostname: Portnummer |
| Hostname | Hostname |
| href | gesamte URL |
| Pfadname | Pfadname |
| Port- | Portnummer |
| Protokoll | Protokollteil |
| Suchabfragezeichenfolge | reload |
| () | lädt die aktuelle URL |
| mit | repalce() |
| Die neue URL ersetzt die aktuelle Seite. |
Wenn wir das obige Strukturdiagramm sorgfältig betrachten, werden wir feststellen, dass
das Standortobjekt nicht nur ein Attribut des Fensterobjekts, sondern auch ein Attribut des Dokumentobjekts ist.
Das bedeutet:
window.location = location = document.location
Was ist das History- Objekt?
Das History-Objekt ist ein Attribut des Fensterobjekts. Es speichert den Datensatz des Internetzugriffs des Benutzers. Der Zeitstempel dieses Datensatzes wird ab dem Zeitpunkt des Öffnens des Fensters berechnet.
Das Verlaufsobjekt verfügt über die folgenden allgemeinen Attribute und Methoden:
| Attribut-/ | Methodenbeschreibungslänge |
| Die | Anzahl der Datensätze im Verlaufsobjekt. |
| back() | geht zur vorherigen URL des Browser-Verlaufseintrags, ähnlich wie „going back |
| forward()“ | zur nächsten URL geht des Browser-Verlaufseintrags, ähnlich wie vorwärts |
| (num) | Der Browser bewegt sich im Verlaufsobjekt vorwärts oder rückwärts |
Abschließend stellen wir das Navigator- Objekt vor:
Das Navigator-Objekt ist ein Fensterattribut im BOM, das den Client-Browser identifiziert.
Einige allgemeine Attribute im Zusammenhang mit dem Navigator:
| Attributbeschreibung | appName |
| vollständiger | Browsername und Versionsinformationen |
| Plattformsystemplattform | , auf der sich der Browser |
| Plugins | Array von Plug-in-Informationen, die im Browser installiert sind |
| userAgent | User-Agent-Zeichenfolge des Browsers |
| userLanguage | Standardsprache des Betriebssystems |