Vertiefte Kenntnisse von DOM und BOM in JavaScript-js-Tutorial-php.cn

Dieser Artikel bringt Ihnen relevantes Wissen über Javascript. Er stellt hauptsächlich den Unterschied und die Verwendung zwischen DOM und BOM vor und enthält auch einige verwandte Vorgänge. Ich hoffe, dass er für alle hilfreich ist.

Vertiefte Kenntnisse von DOM und BOM in JavaScript

【Verwandte Empfehlungen: Javascript-Video-Tutorial, Web-Frontend】

I Kurzbeschreibung: Was ist DOM und was ist BOM?

Am Anfang des Artikels möchte ich allgemein erwähnen, was ist DOM und was ist BOM, da sich dieser Artikel letztendlich an diejenigen richtet, die über eine gewisse JavaScript-Grundlage verfügen, aber kein Verständnis dafür haben von DOM und BOM Freunde, die es nicht verstehen oder gar nicht wissen .

Bevor ich jedoch darüber spreche, was DOM und was BOM ist, möchte ich Ihnen bitte die Struktur des gesamten Javascript zeigen:

Im Bild oben sehen wir

Vier Elemente: JavaScript , ECMAScript, DOM und BOM, was ist also die Verbindung zwischen den vieren? Fassen Sie die Beziehung zwischen ihnen mit einer Gleichung zusammen.

ECMA International (ehemals European Computer Manufacturers Association) über ECMA-262

, 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
, die zum Betrieb von XML- und HTML-Dokumenten verwendet wird. Für JavaScript: Um JavaScript den Betrieb von HTML zu ermöglichen
,

JavaScript verfügt über eine eigene DOM-Programmierschnittstelle

. In einem Satz: DOM bietet eine „Methode“ für JavaScript, um auf HTML-Elemente zuzugreifen und diese zu bedienen.

(Der Grund, warum wir das Wort „Schnittstelle“ nicht verwenden, liegt darin, dass wir befürchten, dass einige Freunde Angst haben, wenn sie das sehen Schnittstelle, aber in der Tat ist die genaueste Beschreibung die Bereitstellung einer Schnittstelle für JavaScript.

BOM ist eine Schnittstelle, die scheinbar das Verhalten des Browsers steuert

. Für JavaScript: Damit

JavaScript das Verhalten des Browsers steuern kann

,
JavaScript verfügt über eine eigene BOM-Schnittstelle. In einem Satz: BOM stellt JavaScript eine „Methode“ zur Steuerung des Browserverhaltens zur Verfügung.

Schließlich ist unter den drei oben genannten Komponenten von JavaScript ECMscript eine Spezifikation, während die anderen beiden „Methoden“ bereitstellen, die jeweils HTML-Elementen und Browsern entsprechen , daher
Im Folgenden

Für die letzten beiden: DOM und BOM, ich werde eine systematische Erklärung geben. Da es sich um Anfänger handelt, werde ich die folgenden Erklärungen so einfach und leicht verständlich wie möglich gestalten. Wenn Sie keine gute Grundlage haben, können Sie mit Zuversicht essen.

II. DOM und die damit verbundenen Operationen

Erklären wir zunächst das relevante Wissen über DOM

. Ich habe es in zwei Teile unterteilt:

II.I DOM-BaumOkay , Was ist dann ein DOM-Baum?

Vielleicht sind einige Anfänger, die DOM gelernt haben, mit diesem Wort nicht vertraut, aber tatsächlich ist der DOM-Baum keine besonders fantasievolle Sache. Im Gegenteil, für Front-End-Mitarbeiter ist der DOM-Baum genau das Richtige für Sie jeden Tag beschäftigen Der Baum, der aus den HTML-Elementen der Seite besteht:

Stücklistenbaum kann jeder Knoten zwei Identitäten haben: Er kann ein untergeordneter Knoten des übergeordneten Knotens sein oder er kann der übergeordnete Knoten anderer untergeordneter Knoten sein :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM_demo</title>
</head>
<body>
    <p>
        <a href="https://blog.csdn.net/qq_52736131">跳探戈的小龙虾</a>
    </p>
</body>
</html>

Nach dem Login kopieren

Das Obige Code, sein DOM-Baum sollte so aussehen:

Zu diesem Zeitpunkt möchte jemand fragen: Sagen Sie, dass der DOM-Baum so lange etwas mit der Bedienung von HTML-Elementen zu tun hat?

Die Antwort ist

sehr relevant, und 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.
II.II Einige gängige Methoden zum Bedienen von Elementen in DOM

In Bezug auf Einige gängige Methoden zum Bedienen von HTML-Elementen in DOM in JavaScript

habe ich es für alle in mehrere Unterteile unterteilt

Einführung in die Klasse: DOM-Methode zum Abrufen des Knotens

//1.通过元素的id属性值来获取元素，返回的是一个元素对象
var element = document.getElementById(id_content)

//2.通过元素的name属性值来获取元素，返回的是一个元素对象的数组
var element_list = document.getElementsByName(name_content)

//3.通过元素的class属性值来获取元素，返回的是一个元素对象的数组
var element_list = document.getElementsByClassName(class_content)

//4.通过标签名获取元素，返回的是一个元素对象数组
var element_list = document.getElementsByTagName(tagName)

Nach dem Login kopieren

DOM-Methode zum Abrufen/Festlegen des Attributwerts des Elements

//1.获取元素的属性值，传参自然地是属性名，例如class、id、href
var attr = element.getAttribute(attribute_name)

//2.设置元素的属性值，传参自然地是元素的属性名及要设置的对应的属性值
element.setAttribute(attribute_name,attribute_value)

Nach dem Login kopieren

DOM-Methode zum Erstellen des Knotens (Node)

//1.创建一个html的元素，传参是元素类型，例如p、h1-5、a，下以p为例
var element = document.createElement("p")

//2.创建一个文本节点，传参的是对应的文本内容(注意是文本节点，不是某个html元素)
var text_node = document.createTextNode(text)

//3.创建一个属性节点，传参是对应的属性名
var attr_node = document.createAttribute(attribute_name)
element.setAttributeNode(attr_node)

Nach dem Login kopieren

Besondere Aufmerksamkeit Drittens muss die Methode zum Erstellen von Attributknoten mit bestimmten Elementen übereinstimmen, das heißt, Sie müssen zuerst ein bestimmtes Element abrufen, einen Attributknoten erstellen und schließlich den Attributknoten (setAttributeNode) zu diesem Element hinzufügen. „DOM-Methode zum Hinzufügen von Knoten“ Knoten hinter der Einfügeposition.

Die DOM-Methode zum Löschen eines Knotens

//1.向element内部的最后面添加一个节点，传入的参数是节点类型
element.appendChild(Node)

//2.向element内部某个已存在的节点的前面插入一个节点，仍然传入一个节点类型的参数
element.insertBefore(new_Node,existed_Node)

Nach dem Login kopieren

Beachten Sie, dass Sie beim

Löschen das entsprechende übergeordnete Knotenelement finden müssen, bevor Sie es reibungslos löschen können

.

Einige gemeinsame Attribute von DOM Schließlich gibt es einige gemeinsame DOM-Attribute :

//删除element内的某个节点，传参是节点类型参数
element.removeChild(Node)

Nach dem Login kopieren

Unter diesen bedeutet das siebte, dass der HTML-Code und der Text innerhalb des -Elements in Text umgewandelt werden

, der ursprüngliche HTML-Code wird ausgeführt und die Konvertierung in Text entspricht der Umwandlung in eine gewöhnliche Zeichenfolge!

... Nicht so groß wie das DOM). Sehen wir uns die Einführung in Stücklisten am Anfang an:

BOM stellt JavaScript mehrere „Methoden“ zum Bedienen des Browsers zur Verfügung

Also

verwenden wir zunächst ein Bild, um die Struktur der gesamten Stückliste anzuzeigen und sie zu sortieren Ähnlich wie DOM hat auch BOM eine Baumstruktur:

III.II Einführung in gängige StücklistenobjekteFensterobjekt

Aus dem Bild oben können wir sehen:

Fenster steht an der Spitze der gesamten Nahrungskette des Stücklistenbaums , sodass jedes neu geöffnete Fenster als Fensterobjekt betrachtet wird.

window-Objekt hat die folgenden allgemeinen Eigenschaften und Methoden:

setTimeout(expression, milli seconds) Berechnen Sie einen Ausdruck, nachdem der Timer abgelaufen istsetTimeout(expression, milli seconds,[arguments])Berechnen Sie eine Funktion, nachdem der Timer abgelaufen istUnter anderem , können Sie sehen Die obige Funktion „alert()“ JavaScript lernt, verwenden die meisten von ihnen das Popup-Fenster der Funktion „alert()“ als erste DemoAls ich damals die Funktion „alert()“ benutzte, schien es, dass das Fenster nicht erwähnt wurde Ist die Funktion „alert()“ also dieselbe, die ich zuvor gelernt habe? Die Antwort lautet: zwei alarm() sind tatsächlich die gleiche Funktion Der Grund, warum window weggelassen werden kann, liegt darin, dass alle Eigenschaften und Methoden von window auf zwei Arten ausgedrückt werden können:

Eigenschaften/Methoden	Bedeutung
Öffner	Das übergeordnete Fenster des aktuellen Fensters
Länge	Die Anzahl der Frames im Fenster
Dokument	aktuell wird im Fenster angezeigt Dokumentobjekt
alert(string)	Erstellen Sie ein Alarmdialogfeld, das eine Meldung anzeigt
close()	Schließen Sie das Fenster
confirm()	Erstellen Sie ein Dialogfeld das erfordert eine Benutzerbestätigung
open(url,name,[options])	Öffne ein neues Fenster und gib das neue Fensterobjekt zurück
prompt(text,defaultInput)	Erstelle ein Dialogfeld, in dem der Benutzer dazu aufgefordert wird Geben Sie Informationen ein


, denn wenn jeder	, wenn es um Eingabe- und Ausgabestreams geht, also wann Wenn Sie das sehen, fragen Sie sich vielleicht:
	Diese

(1 ) window.property/window.method()(2) direkter Aufruf von property/method()

Nicht nur Alert(), alle oben genannten Fenstereigenschaften und -funktionen sind wahr, interessierte Freunde können es ausprobieren ihre eigenen.

StandortobjektWas 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.
Standortobjekt hat die folgenden allgemeinen Eigenschaften und Methoden:

Eigenschaften/Methoden

Inhalt

Host
Hostname: Port
Hostname

Host Name

hrefPfadnamePortPortnummerProtokollProtokollteilSucheAbfragezeichenfolge reload()Aktuelle URL neu ladenrepalce()Aktuelle Seite durch eine neue URL ersetzen

Wenn wir uns das obige Strukturdiagramm genau ansehen, werden wir feststellen:

Das Standortobjekt ist nicht nur ein Attribut des Fensterobjekts, sondern auch ein Attribut des Dokumentobjekts.

Das bedeutet:

window.location = location = document.location

history-Objekt

Was ist ein history-Objekt?

Das Verlaufsobjekt ist ein Attribut des Fensterobjekts. Es speichert den Internetzugriffsdatensatz des Benutzers. Der Zeitstempel dieses Datensatzes wird ab dem Zeitpunkt berechnet, an dem das Fenster geöffnet wurde.

History-Objekt hat die folgenden gemeinsamen Eigenschaften und Methoden:

Die gesamte URL	Pfadname

Der Browser bewegt sich im Verlaufsobjekt vorwärts oder rückwärts Führen Sie schließlich das ein: Navigatorobjekt ist ein Fensterattribut in der Stückliste, das den Client-Browser identifiziert.

Eigenschaften/Methoden	Beschreibung
Länge	Die Anzahl der Datensätze im History-Objekt
zurück( ).
	Navigatorobjekt
Navigatorobjekt

Einige allgemeine Eigenschaften im Zusammenhang mit dem Navigator:

Eigenschaften

Beschreibung

AppNameVollständiger Browsername und VersionsinformationenPlattformPluginsEine Reihe von Plug-in-Informationen, die im Browser installiert sinduserAgentDie User-Agent-Zeichenfolge des BrowsersuserLanguageDie Standardsprache des BetriebssystemsJavascript-Video-TutorialWeb-Frontend]

.	Browser-Standort Die Systemplattform



[Verwandte Empfehlungen:	,

Das obige ist der detaillierte Inhalt vonVertiefte Kenntnisse von DOM und BOM in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!