Implementieren Sie die Zusammensetzung von JavaScript (detaillierte Interpretation von BOM und DOM).

Jetzt bringe ich Ihnen einen Artikel über die Implementierung von JavaScript (ausführliche Erklärung von BOM und DOM). Jetzt teile ich es mit Ihnen und gebe es als Referenz.

Wir wissen, dass eine vollständige JavaScript-Implementierung aus drei Teilen bestehen muss: ECMAScript (Kern), BOM (Browser Object Model) und DOM (Document Object Model).

BOM:

BOM stellt viele Objekte für den Zugriff auf Browserfunktionen bereit, die nichts mit dem Inhalt der Webseite zu tun haben (dies sind DOM). ), derzeit wurde BOM vom W3C in die HTML5-Spezifikation verschoben.

Fensterobjekt:

Der Kern von BOM stellt eine Instanz des Browsers dar. Es ist sowohl eine Schnittstelle für den Zugriff auf das Browserfenster über Javascript als auch ein durch ECMAScript spezifiziertes Global . Objekt, d. h. jedes auf der Webseite definierte Objekt, jede Variable und jede Funktion hat window als globales Objekt und hat daher Zugriff auf Methoden wie paresinInt(). (Auszug aus Höhe Drei). Wenn eine Webseite außerdem Frames enthält, verfügt jeder Frame über ein eigenes Fensterobjekt und wird in der Frames-Sammlung gespeichert (beginnend bei Index 0, ltr, ttb).

Erstens sind die Variablen und Funktionen in der globalen Ausführungsumgebung alle Attribute und Methoden des Fensterobjekts. Natürlich gibt es einen kleinen Unterschied zwischen globalen Variablen und dem direkt definierten Fenstereigenschaftstyp. Globale Variablen (genauer gesagt explizit deklarierte globale Variablen) können nicht gelöscht werden, die Fenstereigenschaft jedoch. Darüber hinaus ist noch ein weiteres Detail zu beachten. Der Versuch, auf nicht deklarierte Variablen zuzugreifen, führt zu einem Fehler, bei der Verwendung des Abfragefensterobjekts besteht jedoch kein Problem.

Was sind also die gemeinsamen Eigenschaften oder Methoden von Fenstern?

1.Name, jedes Fensterobjekt verfügt über ein Namensattribut, das den Namen des Rahmens enthält. Normalerweise zum Verständnis von Fensterbeziehungen und Rahmen.

2. Fensterpositionsmethode: moveTo (x-Koordinate der neuen Position, y-Koordinate der neuen Position), moveBy (x horizontal verschieben, y vertikal verschieben). Diese beiden Methoden sind auf das Framework nicht anwendbar.

3. Fenstergrößenattribute: innerWidth/Height (Größe des Ansichtsbereichs (abzüglich der Breite des Rahmens)/* IE, Safari, Firefox */), OuterWidth/Height (gibt die Größe des Browsers zurück window/* IE, Safari, Firefox */). In Chrome geben inner und external beide die Größe des Ansichtsbereichs zurück.

Natürlich können Sie die Fenstergröße durch resizeTo (neue Fensterbreite, neue Fensterhöhe) und resizeBy (x gegenüber ursprünglicher Breite vergrößern, y gegenüber ursprünglicher Höhe vergrößern) ändern. Diese Liebesliedmethode gilt nicht für Rahmenkonstruktionen.

4.window.open (URL, Fensterziel, Attributzeichenfolge, boolescher Wert, ob die neue Seite die aktuell geladene Seite im Browserverlauf ersetzt) ​​wird verwendet, um zu einer bestimmten URL zu navigieren oder ein neues Fenster zu öffnen. Wenn ein Fensterziel angegeben ist und das Fensterziel der Name eines vorhandenen Fensters oder Frames ist, wird die angegebene URL in das umbenannte Fenster oder Frame geladen. Andernfalls wird das neue Fenster, das geöffnet wird, als Zielfenster bezeichnet. Zu den Schlüsselwörtern, die für das Fensterziel angegeben werden können, gehören natürlich _self, _parent, _top und _blank.

<a href=http://www.jb51.net>click me</a>
  　　<script>
    var link=document.getElementsByTagName("a")[0];
      alert(link.nodeName);   
     window.onload=function(){
      
      link.onclick=function () {
        window.open(link.href,"good","width=400px,height=300px");
        return false;
    
      }  
    }
　　</script

Die spezifischen Einstellungen der charakteristischen Zeichenfolge werden hier nicht im Detail beschrieben

5. Als Single-Threaded-Sprache ermöglicht js weiterhin das Festlegen des Timeouts Wert (angegebener Code nach dem Ereignis ausführen) und Intervallzeitwert (Zyklus zu jedem angegebenen Zeitpunkt), um die Codeausführung zu einem bestimmten Zeitpunkt zu planen.

Timeout-Aufruf: setTimeout (JS-Codezeichenfolge, Millisekundenzeit) Wenn die Task-Warteschlange nach dem Satz leer ist, kann sie als Single-Thread-Sprache jeweils nur einen Code ausführen ZeitintervallFühren Sie dann die Codezeichenfolge aus. Andernfalls warten Sie, bis die vorherige Codeausführung abgeschlossen ist, bevor Sie sie ausführen.

var al=setTimeout(function () {
      alert("good");
    },5000);
    alert(al); //2

Hier habe ich eine anonyme Funktion aufgerufen, um nach 5 Sekunden „Gut“ auszugeben, und im Fenster wurde ein Warnfeld mit der Anzeige 2 angezeigt. Es ist ersichtlich, dass die Funktion „setTimeout()“ eine numerische ID zurückgibt, die ist eindeutig, dann können wir diese ID verwenden, um den Timeout-Aufruf zu löschen, und Sie können clearTimeout(ID) verwenden, um ihn zu löschen.

Indirekter Aufruf: setInterval(), es akzeptiert die gleichen Parameter wie setTimeout() und gibt außerdem eine numerische ID zurück, die mit clearTimeout() gelöscht werden kann.

6. Methoden des Systemdialogfelds: Alert(), Confirm(), Prompt() usw. sind in meinem vorherigen Blog beschrieben, klicken Sie hier

Standortobjekt

Anstelle eines Objekts in der Stückliste ist es besser zu sagen, dass der Standort ein Attribut im Fensterobjekt ist. Natürlich ist es auch ein Attribut des Dokumentobjekts im DOM, das später besprochen wird. Das heißt, window.location und document location beziehen sich auf dasselbe Objekt.

Durch Ändern dieser Attribute kann eine neue Seite geladen und ein neuer Datensatz im Verlauf generiert werden. Durch die Verwendung von location.replace() werden keine neuen Datensätze im Verlauf generiert.

hash	"#contents"	返回url中的hash，没有为“”
host	"www.google.com"	返回服务器名和端口号（如果有）
hostname	"www.google.com"	返回不带端口号的服务器名称
href	"www.google.com"	返回当前页面的完整url,调用了assign()
pathname	''/wileyCDA/'	返回目录名称
port	"8080"	返回端口号，没有则返回空字符串
protocol	"http:"	返回页面使用的协议
search	"?=javascript"	返回查询字符串，以问号开头

Navigatorobjekt: Der De-facto-Standard zur Identifizierung von Browsern. Seine Eigenschaften und Methoden werden hauptsächlich zur Erkennung des Browsertyps verwendet.

Der Rest, wie das Verlaufsobjekt (historische Aufzeichnungen speichern) und das Bildschirmobjekt (zeigt die Fähigkeiten des Clients an), sind bei der Programmierung in js nicht sehr nützlich und werden daher nicht im Detail beschrieben.

---------------- ------ ----------------------------------

DOM:

DOM ist eine auf XML basierende und für HTML erweiterte API, die auf der Knotenbaumerweiterung basiert.

Zunächst muss klargestellt werden, dass der Dokumentknoten der Wurzelknoten jedes Knotens ist. Der Dokumentknoten hat und hat nur einen untergeordneten Knoten, nämlich das Element html (Dokumentelement).

Knotentyp:

Eine Schnittstelle in DOM1, die von allen DOM-Knotentypen (Textknoten, Attributknoten, Elementknoten) implementiert wird. Diese Schnittstelle wird in js als verwendet Implementierung des Knotentyps.

nodeType-Attribut, das jedem Knoten gehört. Dargestellt durch 12 numerische Werte, element--1, attribute--2, text--3...

nodeName-Attribut Für Elementknoten ist der Wert von nodeName der Labelname.

nodeValue-Attribut, für Elementknoten ist der Wert von nodeValue null.

Knotenbeziehung: Jeder Knoten hat ein childNodes-Attribut und speichert ein NodeList-Objekt (wie ein Array-Objekt). Jeder Knoten verfügt über ein parentNode-Attribut, das auf den übergeordneten Knoten verweist. Die Knoten in childNodes haben denselben parentNode. Auf Geschwisterknoten kann über die Eigenschaften previousSibling und nextSibling zugegriffen werden. Gleichzeitig sind childNodes[0]==firstChild, childNodes[childNodes.length-1]==lastChild.

Operation node: appendChild(), einen Knoten an das Ende von NodeList schieben und zurückgeben neu hinzugefügter Knoten. insertBefore() löst die Verschiebung eines Knotens an den Kopf von NodeList auf und gibt den neu hinzugefügten Knoten zurück. replaceChild(newChild,targetChild) ersetzt den Zielknoten. Der ursprüngliche Knoten befindet sich noch im Dokument, hat aber keine Position. RemoveChild(tragetChild), entfernt Knoten, hat einen ähnlichen Effekt wie replaceChild(). cloneChild(boolean), true bedeutet vollständige Kopie (gesamter Knoten und untergeordnete Knoten), false bedeutet einfache Kopie.

Dokumenttyp:

stellt ein Dokument dar. Das Dokumentobjekt ist eine Instanz von HTMLDDocument (geerbt vom Dokumenttyp) und repräsentiert die gesamte HTML-Seite. Gleichzeitig ist das Dokumentobjekt auch eine Eigenschaft des Fensterobjekts, sodass auf es als globales Objekt zugegriffen werden kann. document.firstChild==html. document.body==body document.doctype--->Referenz auf . document.title--->title document.url--->location.url.

Elemente suchen: getElementById(),getElementsByTagName(),getElementsByClassName().

Dokument schreiben Eingabe: write(), writeln(), open(), close()

Elementtyp:

getAttribute(), um Attribute für die Klasse abzurufen, verwenden Sie „ class“ anstelle von className können Sie das Klassenattribut erhalten, wenn Sie element.className verwenden.

setAttribute() legt das Attribut fest und ersetzt es, falls vorhanden. Ansonsten erstellen.

removeAttribute(), entfernt Elementattribute vollständig.

createElement(), erstellt ein neues Element.

Texttyp:

createTextNode(), erstellt einen Textknoten. Wenn zwei Textknoten benachbarte Geschwisterknoten sind, werden die beiden Texte verbunden.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Grundlegende Spezifikationen von JavaScript

Grundlegende Verwendung von Javascript

Beispielcode zum Erstellen von Feuerwerks-Spezialeffekten mit p5.js_JavascriptTipps

Das obige ist der detaillierte Inhalt vonImplementieren Sie die Zusammensetzung von JavaScript (detaillierte Interpretation von BOM und DOM).. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!