JavaScript BOM erklärt

JavaScript BOM erklärt

1. BOM-Einführung

1. JavaScript besteht aus drei Teilen

  • ECMAScript-Kernsyntax ES
  • DOM-Dokumentobjektmodell, das Kernobjekt ist das Dokument, das zum Bedienen von Seitendokumenten verwendet wird
  • BOM-Browserobjektmodell, das Kernobjekt ist das Fenster, das zum Bedienen des Browsers verwendet wird

Bildbeschreibung hier einfügen

2.Fensterobjekt

Name Bedeutung
Geschichte Informationen über vom Client besuchte URLs
Standort Informationen zur aktuellen URL, Child-DOM-Objekten
dokumentieren Stellt das HTML-Dokument des Browserfensters dar, ein DOM-Objekt auf Wortebene

Gängige Methoden:

Methodenname Bedeutung
Alarm (Text) Zeigt ein Warnfeld mit einer Eingabeaufforderung und einer OK-Schaltfläche an.
Eingabeaufforderung (Text) Zeigt ein Eingabefeld mit einer Eingabeaufforderung, einem Texteingabefeld sowie den Schaltflächen „OK“ und „Abbrechen“ an.
bestätigen(Text) Zeigt ein Bestätigungsfeld mit Eingabeaufforderungsinformationen sowie den Schaltflächen „OK“ und „Abbrechen“ an. „Bestätigung“ gibt „true“ zurück, „Abbrechen“ gibt „false“ zurück.
öffnen(URL,Name,Optionen) Öffnet ein neues Fenster mit dem angegebenen Namen und lädt das durch die angegebene URL angegebene Dokument.
setTimeout(fn,Verzögerung) Stellen Sie einen einmaligen Timer ein, um eine Funktion nach einer bestimmten Anzahl von Millisekunden auszuführen
setzeIntervall(fn,Verzögerung) Stellen Sie einen periodischen Timer ein, um eine Funktion regelmäßig auszuführen
cleatTimeout(Zeitgeber) Einmal-Timer löschen
cleanInterval(Zeitgeber) Einmal-Timer löschen
scrollTo(xpos,ypos) Scrollen Sie den Inhalt zu den angegebenen Koordinaten, d. h. legen Sie die Versatzposition der Bildlaufleiste fest
scrollBy(xnum,ynum) Scrollen Sie den Inhalt um die angegebene Anzahl von Pixeln, d. h. legen Sie den Versatz der Bildlaufleiste fest

open Öffnet das angegebene Fenster

<Skript>
        Funktion f1() {
            //Dies ist kein CSS-Stil, die Größe des geöffneten Fensters kann angepasst werden open('test.html', 'user', 'width=500px,height=500px')
        }
    </Skript>
</Kopf>
<Text>
    <button onclick="f1()">Neues Fenster öffnen</button>
</body>

setTimeout(fn,delay)

  <Skript>
        Funktion f1() {
            //Dies ist kein CSS-Stil, die Größe des geöffneten Fensters kann angepasst werden open('test.html', 'user', 'width=500px,height=500px')
        }
        Funktion f2() {
            setTimeout(f1, 2000)
        }
    </Skript>
</Kopf>
<Text>
    <button onclick="f2()">Einmaliger Timer</button>
</body>

cleatTimeout(timer)

Schalten Sie einen einmaligen Timer innerhalb des Zeitrahmens aus, der nicht ausgeführt wurde

```Javascript
<Skript>
        Funktion f1() {
            //Dies ist kein CSS-Stil, die Größe des geöffneten Fensters kann angepasst werden open('test.html', 'user', 'width=500px,height=500px')
        }
    </Skript>
</Kopf>
<Text>
    <button onclick="f1()">Neues Fenster öffnen</button>
</body>

setTimeout(fn,delay)

  <Skript>
        Funktion f1() {
            //Dies ist kein CSS-Stil, die Größe des geöffneten Fensters kann angepasst werden open('test.html', 'user', 'width=500px,height=500px')
        }
        Var-Zeitgeber
        Funktion f2() {
            Timer = setzeTimeout(f1, 2000)
        }
        Funktion f3(){
		Zeitgeber löschen(Zeitgeber)
}
    </Skript>
</Kopf>
<Text>
    <button onclick="f2()">Einmaliger Timer</button>
    <button onclick="f3()">Deaktiviere den One-Shot-Timer</button>
</body>

scrollTo(xpos,ypos)

Zur angegebenen Position bewegen

<Skript>
        Funktion f1() {
            scrollTo(0, 100) //Einheit ist px
        }
    </Skript>

Häufige Ereignisse

Uhrzeit Name Bedeutung
beim Klicken Mausklicks
laden Seite wurde geladen
weiterscrollen Schieberegler für die Fenster-Bildlaufleiste

Hinweis: Da das Fensterobjekt das oberste Objekt der BOM-Struktur ist, kann das Fenster beim Aufruf von Fenstereigenschaften und -methoden weggelassen werden.

<Skript>
//Nach dem Klicken auf das Fenster ausführen window.onclick = function() {
            konsole.log(111)
        }
    </Skript>

3.Standortobjekt

Gemeinsame Eigenschaften

href setzt oder gibt die URL in der Adressleiste zurück

Die allgemeine Methode reload() lädt die aktuelle Seite neu

    <Skript>
        Funktion getUrl() {
            // Holen Sie sich die URL in der Adressleiste
            konsole.log(Standort.href)
                //Legen Sie die URL in der Adressleiste fest, um die Seite weiterzuleiten. //Standort = 'https://www.baidu.com'
            location.href = "https://www.baidu.com"
            //Seite neu laden location.reload();
        }
    </Skript>
</Kopf>
<Text>
    <button onclick="getUrl()">URL abrufen</button>
</body>

4.History-Objekt

Methodenname Bedeutung
zurück() Gehen Sie zurück und laden Sie die vorherige URL in der Verlaufsliste
Vorwort() Gehen Sie weiter und laden Sie die nächste URL in der Verlaufsliste
gehe(Zahl) Der Browser verschiebt die angegebene Anzahl Seiten
  <Skript>
        Funktion goBack() {
            Geschichte.zurück()
        }
        Funktion gehe vorwärts() {
            Geschichte.vorwärts()
        }
        Funktion goGo() {
            history.go(1) //Gehe einen Schritt vorwärts }
    </Skript>
</Kopf>
<Text>
    <button onclick="goBack()">Zurück</button>
    <button onclick="goforward()">Weiter</button>
</body>

Zusammenfassen

Dieser Artikel endet hier. Ich hoffe, er kann Ihnen helfen. Ich hoffe auch, dass Sie mehr Inhalt auf 123WORDPRESS.COM lesen können!

Das könnte Sie auch interessieren:
  • Detaillierte Erläuterung gängiger Betriebsbeispiele für die JS-Browser-BOM
  • Drei BOM-Objekte in JavaScript
  • Detaillierte Erklärung von BOM und DOM in JavaScript
  • BOM-Anwendung in JS
  • Lernen wir BOM-Operationen in JavaScript

<<:  Empfehlen Sie eine coole interaktive Website, die von einem Front-End-Ingenieur erstellt wurde

>>:  MySQL-Datenbankoperationen und Datentypen

Artikel empfehlen

CSS-Implementierungscode zum Zeichnen von Dreiecken (Rahmenmethode)

1. Implementieren Sie ein einfaches Dreieck Mithi...

Vue integriert Tencent TIM Instant Messaging

In diesem Artikel wird hauptsächlich die Integrat...

Eine Codezeile löst verschiedene IE-Kompatibilitätsprobleme (IE6-IE10)

x-ua-compatible wird verwendet, um das Modell für...

So legen Sie die Umgebungsvariable PATH im Linux-System fest (3 Methoden)

1. In Windows-Systemen erfordern viele Softwarein...

Problem beim Testen des nicht autorisierten Zugriffs auf Zookeeper

Inhaltsverzeichnis Vorwort Erkennen des geöffnete...

Lösung zum Erstellen mehrerer Datenbanken, wenn Docker PostgreSQL startet

1 Einleitung Im Artikel „PostgreSQL mit Docker st...

Lokale Vue-Komponentendatenfreigabe Vue.observable()-Nutzung

Wenn Komponenten detaillierter werden, treten Sit...

Der gesamte Prozessbericht der Vue-Exportfunktion für Excel

Inhaltsverzeichnis 1. Front-End-Führungsprozess: ...

JavaScript verwendet setTimeout, um einen Countdown-Effekt zu erzielen

Um die Fähigkeit zum Schreiben von nativem JavaSc...

Häufig verwendete JavaScript-Array-Methoden

Inhaltsverzeichnis 1. filter() 2. fürJedes() 3. e...