JS -Komposition
Wir alle wissen, dass javascript drei Teile hat: ECMAScript , DOM und BOM . Abhängig vom Host (Browser) sind auch die spezifischen Manifestationen unterschiedlich, und der IE und andere Browser haben sehr unterschiedliche Stile.
1. Dom ist der W3C -Standard; [Der Standard, den alle Browser öffentlich konform sind]
2. BOM basiert auf dem DOM von verschiedenen Browserherstellern
Implementierung in jedem Browser; [Es manifestiert sich als unterschiedliche Definitionen verschiedener Browser, und die Implementierungsmethoden sind unterschiedlich]
3. Fenster ist ein Bom -Objekt, kein JS -Objekt;
DOM (Dokumentobjektmodell) ist eine Anwendungsprogrammschnittstelle ( API ) für HTML und XML .
BOM befasst sich hauptsächlich mit Browserfenstern und Frameworks, aber Browser-spezifische JavaScript Erweiterungen werden normalerweise als Teil der BOM angesehen. Diese Erweiterungen umfassen:
Neues Browserfenster Popup Move, schließen Sie das Browserfenster und die Größe der Größe der Fenster. Positionierung von Objekten, die Webbrowserdetails bereitstellen. Bildschirmobjekte, die Details der Bildschirmauflösung des Benutzers angeben. Unterstützung für Cookies. IE hat die BOM erweitert und die ActiveXObject -Klasse hinzugefügt. ActiveX -Objekte können über JavaScript instanziiert werden.
javacsript Zugriff auf, steuert und modifiziert den Client (Browser), indem Sie auf BOM -Objekt (Browser -Objektmodell) zugreifen. Da BOM window der BOM document enthält, können die Eigenschaften und Methoden des Fensterobjekts direkt verwendet und wahrgenommen werden. Daher kann document Dokumentattribut des window direkt verwendet werden, und der Inhalt und die Struktur des XHTML -Dokuments können über document zugegriffen, abgerufen und geändert werden. Da document Dokumentobjekt der Stammknoten des DOM -Modells (Dokumentobjektmodell) ist. Es kann gesagt werden, dass BOM DOM (Objekt) enthält und der Browser Zugriff auf das BOM -Objekt bietet, das dann auf DOM -Objekt zugreift, damit JS den Browser und die vom Browser gelesenen Dokumente bedienen kann. In
DOM enthält: window
Das Fensterobjekt enthält Eigenschaften: Dokument, Speicherort, Navigation, Bildschirm, Verlauf, FramesDocument Root -Knoten enthält untergeordnete Knoten: Formulare, Ort, Anker, Bilder, Links
Aus window.document ist zu sehen. Dokument, dass das grundlegendste Objekt von DOM das untergeordnete Objekt des Fensterobjekts von BOM ist.
Differenz: DOM beschreibt Methoden und Schnittstellen für die Verarbeitung von Webseiteninhalten und BOM beschreibt Methoden und Schnittstellen für die Interaktion mit dem Browser.
Treffen Sie Dom
Schauen wir uns den folgenden Code an:
<! DocType html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transsitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title>DOM</title> </head> <body> <h2><a href = "http://www.baidu.com"> JavaScript Dom </a> </h2> <p> HTML -Elemente bedienen, CSS -Stile usw. usw. </p> <ul> <li> JavaScript </li> </htm </li> <li> </li> </li> </li> </li> </ul> </ul> </body> </htm </li> </li> </ul> </body> </li> </li> </ul>;
Dekorieren Sie den HTML -Code in das DOM -Knoten -Hierarchie -Diagramm:
** HTML -Dokumente können als eine Sammlung von Knoten bezeichnet werden. Die Dom -Knoten umfassen: ** 1. Elementknoten: In der obigen Abbildung sind <html>, <body>, <p> usw. alle Elementknoten, dh Tags. 2. Textknoten: Inhalte für Benutzer wie JavaScript, DOM, CSS und andere Text in <li> ... </li>. 3. Attributknoten: Elementattribute wie das Link -Attribut href = "http://www.baidu.com" des <a> Tags.
Knotenattribut -Knoten -Attribut NODename gibt einen Zeichenfolge zurück, dessen Inhalt der Name des Knoten -Nodetyps ist, gibt eine Ganzzahl zurück. Dieser Wert repräsentiert den Typ des angegebenen Knotens NodeValue gibt den aktuellen Wert des angegebenen Knotens zurück.
TRAVERSAL NODE TREE TRAVERSAL NODE TREE TREEL CILDNODES RETURESS EIN ARRAY, dieses Array besteht aus Kindern des angegebenen Elements, das FirstChild den ersten untergeordneten Knoten Lastchild zurückgibt.
DOM -Operation DOM -Operation erstellenElement (Element) Erstellen Sie ein neues Elementknoten createTextNode () Erstellen Sie einen neuen Textknoten, der den angegebenen Text appendChild () Fügen Sie einen neuen untergeordneten Abschnitt hinzu, nachdem die letzte Knotenliste des angegebenen Knotens einfügen () ein gegebenes Knoten ein gegebenen Knoten einfügen.
DOM repräsentiert Dokumente, indem sie einen Baum erstellen und Methoden und Schnittstellen für die Verarbeitung von Webinhalten beschreiben, damit Entwickler die beispiellose Kontrolle über den Inhalt und die Struktur von Dokumenten haben. Mit der DOM -API können Knoten leicht gelöscht, hinzugefügt und ersetzt werden.
1. Zugangsknoten
`var ohtml = document.documentElement;` // Gibt den in XML- und HTML -Dokumenten vorhandenen Dokument -Root -Knoten zurück. OHTML enthält ein Htmlelement -Objekt `document.body`, das <html/> // eine spezielle Erweiterung der HTML -Seiten darstellt und direkten Zugriff auf <body> tags </span> <pan> </span> </span>` document.getelementByid ("id") `//. Geben Sie das Element mit dem Namen als angegebene ID `document.getElementByName (" Name ")` mit dem Namen als angegebene ID // alle Elemente mit Namensattributen entspricht dem angegebenen Wert ab. Auf IE6 und Opera7.5 wird jedoch auch Elemente mit ID als angegebener Name zurückgegeben und nur <Eingabe/> und <img/> `var x = document.2. Eigenschaften und Methoden von Knotenknoten
FirstChild // Knoten, auf den ersten Knoten in der Childnodes -Liste LastChild // Knoten, auf den letzten Knoten in der Childnodes -Liste der ParentNodes -Liste übergeordnetes // Knoten, auf den übergeordneten Knoten in Owndocument // auf die Dokument auf die Dokument -Last -Last -Last -Last -Last -Last -Last -Last -Last -Last -Last -Last -Last -Dokument aufzeigen. childnodes listen übergeordnete nodes list childnodes // node, verweisen auf den übergeordneten noden childnodes // nodelist, list aller childchen vor dem Sibling /knoten, auf den vorherigen Geschwisterknoten: Wenn dieser Knoten der erste Knoten ist, dann ist der Wert null `Nextsibling `HaSchildnodes ()` // boolean, wenn Childnodes einen oder mehrere Knoten enthält, wird der wahre Wert zurückgegeben.
3.Dom Ereignisse
DOM hat zwei Ereignismodelle gleichzeitig: Bubble Event und Capture Event Bubble Ereignis: Ereignisse werden in der Reihenfolge vom spezifischsten Ereignisziel bis zum am wenigsten spezifischen Ereignisziel <Body Onclick = "HandleClick ()"> <divclick = "Handleclick ()"> Klicken Sie auf mich </division. 1.0). Ereignis erfasst: Im gegenüberliegenden Prozess zum Bubble -Ereignis beginnen die Ereignisse vom ungenauen Objekt und dann bis zur genauesten Reihenfolge der Auslösen des obigen Beispiels: Dokument, Div. Die einzigartigste Eigenschaft des DOM -Ereignismodells ist, dass Textknoten auch Ereignisse auslösen (nicht in IE).
4. Ereignishandhabungsfunktion/Hörfunktion
** Ereignishandlerfunktion/Hörerfunktion ** in JavaScript: var odiv = document.getElementById ("div1"); odiv.onclick = function () {// Onclick kann nur in Kleinbuchstaben verwendet werden. Standard ist die Blasenereignis -Warnung ("Klickte!"); } In html: <div onclick = "JavaScript: alert (" Klick! ")"> </Div> // Onclick ist in den Fällen willkürlichDh Event -Handler attackEvent () und detaachEvent ()
In IE hat jedes Element und jedes Fensterobjekt zwei Methoden: attachEvent()和detachEvent() , die zwei identische Parameter akzeptieren: Ereignis -Handler -Name und Ereignishandlerfunktion, wie z. B.:
[Objekt] .attachEvent ("name_of_event_handler", "function_to_attach") [Objekt] .DetACHEvent ("name_of_event_handler", "function_to_remove") var fnclick = function () {alert ("Klick!"); } odiv.attachEvent ("Onclick", fnclick); // Ereignisbearbeitungsfunktion ODIV.AttACHEvent ("Onclick", fnclickanother); // Sie können mehrere Ereignisbearbeitungsfunktionen hinzufügen. // Ereignisbeschaffungsfunktion odiv.detacheAvent ("Onclick", fnclick) entfernen; // Ereignisbeschaffungsfunktion odiv.detacheAvent ("Onclick", fnclick) entfernen; // Ereignisbearbeitungsfunktion ODIV.attacheAvent ("Onclick", fnclick); // Ereignisbearbeitungsfunktion ODIV.attacheAvent ("Onclick", fnclick); // Ereignisbeschaffungsfunktion odiv.detacheAvent ("Onclick", fnclick) entfernen; // Ereignisbearbeitungsfunktion ODIV.attacheAvent ("Onclick", fnclick); // Ereignisbearbeitungsfunktion ODIV.attacheAvent ("Onclick", fnclick); // Ereignishandhabungsfunktion entfernen Mit attachEvent() läuft der Event -Handler im globalen Bereich, so dass dies gleich Fenster ist.
Cross-Browser-Event-Handler
addHandler()和removeHandler() addHandler() -Methode gehört zu einem Objekt namens EventUntil (). Beide Methoden akzeptieren drei identische Parameter, das zu bedienende Element, den Ereignisnamen und die Ereignishandlerfunktion.
Ereignisart
** Ereignistyp ** Mausereignis: Klicken, DBClick, Mousedown, MouseUp, Mouseover, Mausout, Mousemove -Tastaturereignis: Tastaturdown, Tastaturpress, Taste -HTML
Event -Handler
Das Programm, das den JavaScript -Code ausführt, reagiert auf Ereignisse, wenn Ereignisse auftreten. Als Reaktion auf ein bestimmtes Ereignis
Der ausgeführte Code wird als Ereignisprozessor bezeichnet.
Die Syntax für die Verwendung von Ereignishandlern in HTML -Tags lautet:
<HTML标签事件处理器="JavaScript代码''>Event -Handler
Ein Ereignis ist eine bestimmte Aktion, die vom Benutzer oder Browser selbst ausgeführt wird. Zum Beispiel sind click,mouseup,keydown,mouseover usw. alle Namen von Ereignissen. Die Funktion, die auf ein bestimmtes Ereignis reagiert, wird als Ereignishandler (Ereignishörer) bezeichnet. Der Event -Handler beginnt mit onclick click on
DOM Level 0 Ereignishandler
DOM Level 0 Ereignishandler: Weisen Sie den Handlerattributen eines Ereignisses eine Funktion zu
<input type = "button" value = "button 2" id = "ben2"/> var btn2 = document.getElementById ('btn2'); BTN2 -Tastenobjekt btn2.onclick // BTN2 -Attribut zu BTN2 hinzufügenWie stoppt ich Blasen?
Es gibt die folgenden Möglichkeiten, um zu verhindern: Sprudeln:
e.cancelBubble=true;e.stopPropagation();return false;InnerText, Innerhtml, äußere, äußeretext
InnerText, Innerhtml, Oterhtml, Outertext InnerText: Zeigt den Text zwischen dem Start -Tag und dem End -Tag Innerhtml an: HTML -Code, der alle Elemente und Text des Elements darstellt, wie: <div> <b> Hallo </b> world. ersetzt, und das Problem gibt den gleichen Inhalt wie Innertext oterHtml zurück: Der Unterschied zu ersteren besteht darin, dass der gesamte Zielknoten ersetzt wird und der vollständige HTML -Code des Elements zurückgegeben wird, einschließlich des Elements selbst
DOM Level 2 Event -Handler
DOM Level 2 -Ereignisse definieren zwei Methoden zum Angeben und Löschen des Betriebs des Ereignishandlers. addEventListener() und removeEventListener()
AddEventListener () und REMEDEVENTLISTENER ()
In der DOM werden AddEventListener () und REMEDEVENTLISTENER () verwendet, um Ereignishandler zuzuordnen und zu entfernen. Im Gegensatz zu IE erfordern diese Methoden drei Parameter: Ereignisname, unabhängig davon, ob die Funktion zugewiesen wird und die Verarbeitungsfunktion für die Blasenstufe (Falsch) oder die Erfassungsstufe (TRUE) verwendet wird. Die Standardeinstellung ist die Bubble -Stufe Falsch [Objekt] .AdDeVentListener ("name_of_event", fnhander, bcapture) [Objekt] .RemoventListener ("name_of_event", fnhander, bcapture) var fnclick = function () {ALERT ("Clicked!"); } odiv.addeventListener ("onclick", fnclick, false); // Ereignisbearbeitungsfunktion adiv.addeventListener ("Onclick", fnclickanother, false); // Wie dh können mehrere Ereignisbearbeitungsfunktionen hinzugefügt werden. // Ereignishandhabungsfunktion entfernen Wenn Sie addEventListener () verwenden, um die Ereignishandhabungsfunktion zur Erfassungsstufe hinzuzufügen, müssen Sie in REMEDEVENTLISTENER () als Erfassungsstufe angeben, um diese Ereignisbehandlungsfunktion Odiv.onclick = FNCLICK korrekt zu löschen; odiv.onclick = fnclick; // Verwenden Sie die direkte Zuordnung, nachfolgende Funktionen zur Ereignisbehandlung überschreiben die vorherige Verarbeitungsfunktion odiv.onclick = fnclick; odiv.addeventListener ("Onclick", fnclickanother, falsch); // Anruf wird in Ordnung gerufen und nicht überschriebenEin Bild, um Outhtml, InnerText, Innerhtml zu verstehen:
DOM Basic Operation Mind Map
Detailliertere XML -DOM - für Eigenschaften und Methoden von Elementobjekten finden Sie in W3CSHOOL
Bom Teil
Der Kern der BOM ist window , und window spielt eine doppelte Rolle. Es ist sowohl eine Schnittstelle zum Zugriff auf das Browserfenster über JS als auch ein Global Objekt. Dies bedeutet, dass jedes in einer Webseite definierte Objekt, Variable und Funktion als global Objekt das Fenster nimmt.
Fenster.CLOSE (); // das Fenster schließen. // Packen Sie ein Systemmeldungsfeld mit OK -Schaltflächen auf, wobei das angegebene Textfenster angezeigt wird. Konfirm ("Sind Sie sicher?"); // Geben Sie ein Abfrage -Dialogfeld mit OK- und Abbrechen -Schaltflächen auf und senden Sie ein booleanes Wertfenster. // fordern Sie den Benutzer auf, Informationen einzugeben und zwei Parameter zu akzeptieren, nämlich den Text, der dem Benutzer angezeigt wird, und den Standardwert im Textfeld, geben Sie den Wert im Textfeld als Funktionswert zurück. // Sie können den Text des Statusleistenfensters vorübergehend ändern. DefaultStatus // Die Standard -Statusleisteninformationen können den Text ändern, bevor der Benutzer das aktuelle Seitenfenster verlässt. // Setzen Sie den angegebenen Code nach der angegebenen Anzahl von Millisekunden, Akzeptieren Sie 2 Parameter, den zu ausgeführten Code und die Anzahl der Millisekunden, die auf das Fenster warten können. // Die Pause, die nicht ausgeführt wurde, abbrechen und die Pause -ID an IT -Fenster weitergeben. SetInterval (Funktion, 1000); // Wiederholen Sie den angegebenen Code Infinitisch in jedem angegebenen Zeitraum, die Parameter sind mit setTimeout () Fenster. // das Zeitintervall abbrechen und die Intervall-ID an das Fenster übergeben.history.go (-1); // Zugriff auf die Geschichte des Browserfensters. Die negative Zahl ist rückwärts und die positive Zahl ist Vorwärtsfenster.history.back (); // gleich wie oben Windows.history.forward (); // Gleich wie oben Windows.history.length // Sie können die Anzahl der Seiten im Verlauf anzeigenDokumentobjekt
Dokumentobjekt: Es ist tatsächlich eine Eigenschaft des Fensterobjekts. document == window.document ist wahr, es ist das einzige Objekt, das sowohl zum BOM- als auch zum Dom -Dokument gehört. Anchors in der Seite document.Forms [0] oder document.forms ["Formname"] // Zugriff auf alle Formulare document.images [0] oder document.images ["Imgname"] // Zugriff auf alle Bilder document.links [0] oder document.links ["linkname"] // Zugriff auf alle Links -Dokument. oder document.embeds ["Emkettenname"] // Zugriff auf alle eingebetteten Objekte document.write (); oder document.WriteLn (); // Saiten dort einfügen, wo sie genannt werden
Standortobjekt
Standortobjekt: Repräsentiert die URL des Ladungsfensters und kann auch durch window.location location.href // Die vollständige URL der aktuell geladenen Seite wie http://www.somewhere.com/pictes/index.htm locum.portocol // Der Protokoll, der in der Zuscheide, wie in dem, wie der Teil des Doppelschleibs, verwendet wurde, in der in den Bereitstellungen, in den Voraussetzungen, in den Bereichen der in der Handhöhe, in den Bereichen der in den Voraussetzungen, referenziert. wie z. Standardmäßig haben die meisten URLs keine Portinformationen wie 8080 Standort.PathName // Der Teil nach dem Hostnamen in der URL, wie z. location.assign ("http: www.baidu.com"); // Der gleiche Standort.HREF wird die neue Adresse dem Browser -History Stack Location.Replace ("http: www.baidu.com") hinzugefügt; // Die gleiche Zuordnung (), aber die neue Adresse wird nicht zum Geschichte des Browsers und dem Ort hinzugefügt. // Die aktuelle Seite neu laden, wenn sie falsch ist, wird sie vom Browser -Cache überladen, und wenn sie wahr ist, wird sie von der Serverseite überlastet, und der Standard ist falschNavigatorobjekt
"Navigator" Objekt: Enthält viele Informationen zu Webbrowsern, was sehr nützlich ist, um Browser und Betriebssysteme zu erkennen. Es kann auch von window.navigator `navigator.appcodename` // Die Zeichenfolge des Browser -Code -Namens referenziert werden. aktiviert, true zurückgeben, ansonsten return false navigator.platform // Die Zeichenfolge der Computerplattform, in der sich der Browser befindet
Bildschirmobjekt
Bildschirmobjekt: Wird verwendet, um einige Informationen über den Bildschirm des Benutzers zu erhalten. Sie können es auch mit windows.screen.width/Höhe // Die Breite und Höhe des Bildschirms, in Pixel, Bildschirm, auf dem Bildschirm verweisen. window.Resizeto (screen.availwidth, screen.availHeight); // Füllen Sie den Bildschirm des Benutzers aus
Fensterobjektmethode
Schematisches Diagramm der strukturellen Beziehung zwischen BOM und DOM
Windows -Objekt -Mind -Karte