Die Implementierung von JavaScript umfasst die folgenden 3 Teile:
1) Kern (ECMAScript): Beschreibt dasJS 🎜 >Syntax und Basisobjekte.
2) Document Object Model (DOM): Methoden und Schnittstellen zur Verarbeitung von Webinhalten
3) Browser-Objektmodell (BOM): Methoden und Schnittstellen für die Interaktion mit dem Browser
ECMAScriptErweiterte Kenntnisse:
①ECMAScript ist ein Standard,JS ist nur eine Implementierung davon, andere Implementierungen umfassen ActionScript.
② „ECMAScript kann zentrale Skriptfunktionen für verschiedene Arten von Hostumgebungen bereitstellen ...“, also ECMAScript ist nicht an eine bestimmte Hostumgebung gebunden. Beispielsweise ist die Hostumgebung von JS der Browser und die Hostumgebung von AS ist Flash.
③ECMAScript beschreibt Folgendes: Syntax, Typen, Anweisungen, Schlüsselwörter, reservierte Wörter, Operatoren, Objekte.
Javascript aus drei Teilen besteht: ECMAScript, DOM und BOM , je nach Host (Browser) unterscheidet sich auch die spezifische Ausdrucksform dh stark von anderen Browsern.
1. DOM ist ein Standard von W3C; [ wird öffentlich befolgt alle Browser Standard ]2. BOM
ist die Implementierung jedes Browserherstellers auf seinen jeweiligen Browsern basierend auf DOM ;[
zeigt, dass verschiedene Browser unterschiedliche Definitionen haben,Implementierungsmethoden sind unterschiedlich]3. Fenster ist ein
BOM-Objekt, kein js-Objekt; DOM (Document Object Model) ist eine Anwendung Programmierschnittstellen (APIs) für HTML und XML. Die
BOM befasst sich hauptsächlich mit Browserfenstern und Frames, aber normalerweise werden browserspezifische JavaScript-Erweiterungen als Teil der
BOMbetrachtet. Zu diesen Erweiterungen gehören: Ein neues Browserfenster öffnen
Das Browserfenster verschieben, schließen und seine Größe ändern
Bereitstellen
WebAnkerobjekt für BrowserdetailsBildschirmobjekt, das Details zur Bildschirmauflösung des Benutzers bereitstellt
Unterstützung für
Cookies IE 扩展了 BOM，加入了ActiveXObject类，可以通过JavaScript实例化ActiveX对象 javacsript是通过访问BOM（Browser Object Model）对象来访问、控制、修改客户端(浏览器)，由于BOM的window包含了document，window对象的属性和方法是直接可以使用而且被感知的，因此可以直接使用window对象的document属性，通过document属性就可以访问、检索、修改XHTML文档内容与结构。因为document对象又是DOM（Document
Object Model）模型的根节点。可以说，BOM包含了DOM(对象)，浏览器提供出来给予访问的是BOM对象，从BOM对象再访问到DOM对象，从而js可以操作浏览器以及浏览器读取到的文档。其中 Window对象包含属性：document、location、navigator、screen、history、frames Document根节点包含子节点：forms、location、anchors、images、links 从window.document已然可以看出，DOM的最根本的对象是BOM的window对象的子对象。 区别：DOM描述了处理网页内容的方法和接口，BOM描述了与浏览器进行交互的方法和接口 DOM 全称是 Document Object Model，也就是文档对象模型。是针对XML的基于树的API。描述了处理网页内容的方法和接口，是HTML和XML的API，DOM把整个页面规划成由节点层级构成的文档。针对XHTML和HTML的DOM。这个DOM定义了一个HTMLDocument和HTMLElement做为这种实现的基础,就是说为了能以编程的方法操作这个 HTML 的内容（比如添加某些元素、修改元素的内容、删除某些元素），我们把这个 HTML 看做一个对象树（DOM树），它本身和里面的所有东西比如
DOM包含：window1.1 DOM, DOCUMENT, BOM, WINDOW 区别
Was ist der Nutzen von DOM? Es geht darum, Elemente in HTML zu bedienen. Wenn wir beispielsweise den Titel dieser Webseite über JS ändern möchten, gehen Sie einfach wie folgt vor:
document.title = 'how to make love';
Diese API ermöglicht es, den Inhalt einer Webseite zu ändern, nachdem sie in den Browser heruntergeladen wurde.
Dokument
Wenn der Browser eine Webseite herunterlädt, normalerweise HTML, wird dieser HTML-Code als Dokument bezeichnet (dies ist natürlich auch ein Knoten im DOM-Baum). Von Wie Sie der obigen Abbildung entnehmen können, ist das Dokument normalerweise der Stammknoten des gesamten DOM-Baums. Dieses Dokument enthält Attribute wie Titel (document.title) und URL (document.URL), auf die direkt in JS zugegriffen werden kann.
In einem Browserfenster können sich mehrere Dokumente befinden, beispielsweise eine über einen Iframe geladene Seite, von denen jedes ein Dokument ist.
In JS kann über das Dokument auf die untergeordneten Knoten zugegriffen werden (tatsächlich kann jeder Knoten verwendet werden), z. B.
document.body;document.getElementById('xxx');
BOM
BOM ist das Browser-Objektmodell, Browser-Objektmodell.
Ich habe gerade gesagt, dass DOM eine Schnittstelle ist, die scheinbar Dokumente verwaltet, BOM also, wie der Name schon sagt, tatsächlich eine Schnittstelle ist, die scheinbar das Browserverhalten steuert.
Was kann der Browser? Um beispielsweise zu einer anderen Seite zu springen, vorwärts, rückwärts usw. zu gehen, muss das Programm möglicherweise auch Parameter wie die Größe des Bildschirms abrufen.
BOM ist also die Schnittstelle, die diese Probleme zu lösen scheint. Wenn wir beispielsweise möchten, dass der Browser zu einer anderen Seite springt, benötigen wir nur
location.href = "http://www.xxxx.com";
Diesen Standort Ist die Stückliste ein Objekt in ?
Fenster
Fenster ist auch ein Objekt der Stückliste. Zusätzlich zum „Backup-Objekt“ im Programmiersinn kann dieses Objekt zum Abrufen des Fensters verwendet werden Position, Bestimmung der Fenstergröße, Popup-Dialogfelder usw. Zum Beispiel möchte ich das aktuelle Fenster schließen:
window.close();
Um die Frage zusammenzufassen:
DOM ist für Die API wird zum Betreiben des Dokuments verwendet, und document ist eines seiner Objekte.
BOM ist die API, die zum Betreiben des Browsers verwendet wird, und window ist eines seiner Objekte.
kehrte zu DOM zurück, verwaltet von:
E Bereich (das haben Sie gesagt Dokument. Von Web Entwickler A Mit mühevoller Mühe geschriebener Ordner, der index.html, CSS und JS Was zum Teufel, es wird auf dem Server bereitgestellt. Wir können URL über die Adressleiste des Browsers eingeben und dann die Eingabetaste drücken, um dieses DokumentLokal laden, durchsuchen, mit der rechten Maustaste klicken, um Quellcode anzuzeigen usw.
Registriert inBOM: <.>
ABereich (Browser-Registerkarten, Adressleiste, Suchleiste, Lesezeichenleiste, Schaltfläche zum Wiederherstellen der Fenstervergrößerung, Menüleiste usw.)
B
Bereich (Rechtsklick-Menü des Browsers)
C
Bereich (
DokumentStatusleiste beim Laden, Anzeige des http-Statuscodes usw.)
DBereich (Bildlaufleiste
Bildlaufleiste)BOM ist das Browser-Objektmodell, DOM ist das
Dokumentobjektmodell, ersteres ist Der Browser selbst arbeitet, und letzteres arbeitet mit dem Inhalt innerhalb des Browsers (kann als Container angesehen werden) BOM
undDOM Schematische Darstellung der Strukturbeziehung
DOM Knotenbaummodell (nehmen Sie den HTML DOM-Baum als Beispiel). )
DOM-Modell kombiniert das gesamte Dokument (XML Dokument und HTML Dokument) wird als Baumstruktur,
in DOM, HTML betrachtet Dokument Die hierarchische Struktur wird als Baumstruktur dargestellt. und verwenden Sie das document-Objekt, um das Dokument darzustellen , und jeder untergeordnete Knoten des Baums stellt einen anderen Inhalt im HTML-Dokument dar.
Jedes HTML--Dokument, das in den Browser geladen wird, wird zu einem Dokumentt-Objekt. Dokument ist der Eingang zum ErkundenDOM,Verwendung globaler VariablenDokumentKann auf DokumentObjekt
zugreifen
Sehen Sie sich zunächst den folgenden Code an
Zerlegen Sie den HTML-Code in ein DOM-Knotenhierarchiediagramm:
DOM stellt Dokumente durch die Erstellung von Bäumen dar und beschreibt Methoden und Schnittstellen zur Verarbeitung von Webinhalten, wodurch Entwickler eine beispiellose Kontrolle über den Inhalt und die Struktur von Dokumenten erhalten. Knoten einfach hinzufügen und ersetzen.
DOM gibt an, dass jede Komponente im Dokument ein Knoten ist (Knoten ) , HTML Dokument kann als eine Sammlung von Knoten bezeichnet werden, DOM Knoten haben :
1. Elementknoten (Element): im obigen Bild , < ;body>, usw. sind alles Elementknoten, also Beschriftungen.
2. Textknoten (Text):Der dem Benutzer angezeigte Inhalt , Wie zum Beispiel
3. Attributknoten (Attr) : Elementattribut, nur das Element hat das Attribut , wie zum Beispiel Linkattribut href="http://www.baidu.com".
1)nodeName: Elementknoten, Attributknoten und Textknoten geben jeweils den Namen des Elements, den Namen des Attributs und zurück #text Zeichenfolge.
2)nodeType: nodeType von Elementknoten, Attributknoten und Text Knoten Die Werte sind 1, 2, 3.,
3)nodeValue: Die Rückgabewerte von Elementknoten, Attributknoten und Textknoten sind null bzw. Attributwerte und Textknoteninhalte.
Knoten ist die übergeordnete Schnittstelle aller Knoten, die eine Reihe gemeinsamer Attribute definiert und Methoden wie folgt:
① Elementknoten abrufen: bis Drei Methoden des Dokumentszu erhaltendes Objekt
document.getElementById("ID")
document.getElementByName("name")
document.getElementsByTagName("p");
② Holen Sie sich den Attributknoten: Der Attributknoten wird an den Elementknoten angehängt. Sie können den Attributknoten über getAttributeNode(attrName)-Methode des Elementknotens, oder Sie können den Attributwert direkt über getAttribute(attrName) abrufen. (Im Gegensatz dazu ist das setAttribute(attrName.) der Element-Schnittstelle , attrValue)Methode, wenn das Attribut nicht vorhanden ist, wird es direkt zum Elementknoten hinzugefügt)
③ Holen Sie sich den Textknoten: Der Textknoten ist ein untergeordneter Knoten von Der Elementknoten und kann durch das Element geleitet werden. Erhalten von der vom Knoten bereitgestellten Methodechildnodes()[index] (Schnittstelle Element) .
childNodes //NodeList, eine Liste aller untergeordneten Knoten firstChild //Node, zeigt auf den ersten Knoten in der childNodes-Liste lastChild //Node , zeigt auf den letzten Knoten in der childNodes-Liste parentNode //Node, zeigt auf den übergeordneten Knoten previousSibling /Node, / zeigt auf den vorherigen Geschwisterknoten: wenn dieser Knoten der erste ist Knoten, dann ist der Wert nullnextSibling //Knoten, der auf den nächsten Geschwisterknoten zeigt: Wenn dieser Knoten der letzte Knoten ist, dann ist der Wert nullhasChildNodes()` // Boolescher Wert, wenn wenn childNodes einen oder mehrere Knoten enthält, den wahren Wert zurückgeben
nodeValue des Attributknotens oder über den Elementknoten ändern Die Methode setAttribute() ändert sich.
② Ändern Sie den Wert des Textknotens: Ändern Sie ihn direkt über dennodeValue des Textknotens.
ImHTML-DOM besteht der einfachste Weg, den Inhalt eines Elements abzurufen und zu ändern, darin, das innerHTML des Elements zu verwenden -Attribut ( Das innerText-Attribut gibt innerHTML zurück, wobei das Tag entfernt wurde)
Erweitern:
innerText, innerHTML, äußereHTML, äußereTextinnerText: 表示起始标签和结束标签之间的文本
innerHTML: 表示元素的所有元素和文本的HTML代码
如：
outerText: Der Unterschied zum ersteren besteht darin, dass der gesamte Zielknoten ersetzt wird und das Problem denselben Inhalt wie innerText
outerHTML zurückgibt : Der Unterschied zum vorherigen Es ersetzt den gesamten Zielknoten und gibt den vollständigen HTML-Code des Elements zurück, einschließlich des Elements selbst
Ein Bild zum Verständnis von OUTHTML, innerText und innerHTML:
Ändern Sie den HTML-Stil (style-Attribut): Element .style.color ="rot";
① Elementknoten löschen: Um den Elementknoten A zu löschen, müssen Sie Folgendes abrufen A Der übergeordnete Knoten B von kann über die Methode in 17.1.1, oder direkt über das Attribut parentNode von A wird abgerufen (empfohlen). Rufen Sie Bs removeChild(A) auf, um den Knoten A zu löschen.
② Attributknoten löschen: Sie könnenremoveAttribute(attrName) oder removeAttributeNode(node) des Elementknotens verwenden, zu dem Der Attributknoten gehört Löschen.
③ Löschen Sie den Textknoten: Die einfachste und gebräuchlichste Methode besteht darin, das AttributnameNode des Textknotens direkt auf eine leere Zeichenfolge zu setzen: textNode. nodeValue =“”.
Punkt der Verwirrung:
Dies ist ein Text
var p = document.getElementById('example');p.nodeValue //null, p
ist das Element Knoten, also ist nodeValue null
p.getAttributeNode('id').nodeValue / /example, hier erhalten wir den Attributknoten des id-Attributs von p, nodeValue ist sein Attributwert
p.childNodes[0].nodeValue //Dies ist ein Textstück, penthält zwei Bei untergeordneten Knoten ist der eingefügte Text zwar keine Beschriftung, aber dennoch ein Knoten. Der Typ von
ist ein Textknoten, und seinnodeValue ist die darin geschriebene Zeichenfolge, einschließlich Zeilenumbrüchen und Einrückungen
p.innerHTML//Dies ist ein Textstück "HierinnerHTMLzurückgegebenp enthält die verschiedenen Werte aller Knoten, in Form von Strings
.
① 创建节点：通过document对象的createElement(eleName)、createTextNode(nodeValue)方法可分别创建元素节点和文本节点。属性节点也有自己的create方法，但是用的少，直接用元素节点的setAttribute()方法即可添加属性。
② 添加节点：两个重要的方法：appendChild()和insertBefore()，具体见Node接口中的方法。
扩展：上面的两个方法都是在已知父节点时用到的，也可以直接在兄弟节点后添加新节点：x.insertBefore(newNode)和x.appendChild(newNode)都可以向x后追加一个新的子节点。
主要掌握replaceChild(newNode , oldNode) 替换元素节点。（属性节点和文本节点有更简单的方法）
DOM同时两种事件模型：冒泡型事件和捕获型事件
冒泡型事件：事件按照从最特定的事件目标到最不特定的事件目标的顺序触发
触发的顺序是：div、body、html(IE 6.0和Mozilla 1.0)、document、window(Mozilla 1.0)
捕获型事件：与冒泡事件相反的过程，事件从最不精确的对象开始触发，然后到最精确
上面例子触发的顺序是：document、div
DOM事件模型最独特的性质是，文本节点也触发事件(在IE中不会)。
在JavaScript中：
var oDiv = document.getElementById("div1");
oDiv.onclick = function(){ //onclick只能用小写
alert("Clicked!");
}
或者
var elem =document.getElementById(“id”)
elem.onmouseover=handleMouseOver //handleMouseOver 是函数名
Function handleMouseOve(e){...}
在HTML中：
//onclick case is willkürlichErweiterung:
IE-Ereignishandler attachmentEvent() und detachEvent()
Im IE verfügt jedes Element und jedes Fensterobjekt über zwei Methoden: attachmentEvent() und detachEvent(). Diese beiden Methoden akzeptieren die gleichen zwei Parameter, den Event-Handler-Namen und die Event-Handler-Funktion, wie zum Beispiel:
[object].attachEvent("name_of_event_handler","function_to_attach")
[object].detachEvent("name_of_event_handler","function_to_remove")
var fnClick = function() {
warning("Clicked!");
}
oDiv.attachEvent("onclick", fnClick); //Ereignisbehandlungsfunktion hinzufügen
oDiv.attachEvent("onclick", fnClickAnother); //Sie können mehrere Event-Handler hinzufügen
oDiv.detachEvent("onclick", fnClick); //Event-Handler entfernen
Bei Verwendung Mit der Methode attachmentEvent() wird der Event-Handler im globalen Bereich ausgeführt, daher entspricht dies dem Fenster.
addHandler() und removeHandler()
addHandler()-Methode gehört zu einer Klasse namens EventUntil() Als Objekt akzeptieren beide Methoden dieselben drei Parameter: das zu bearbeitende Element, den Ereignisnamen und die Ereignishandlerfunktion.
Mausereignisse: Click, Dbclick, Mousedown, Mouseup, Mouseover, Mouseout, Mousemove
Tastaturereignisse: Keydown, Tastendruck , keyup
HTML-Ereignisse: laden, entladen, abbrechen, Fehler, auswählen, ändern, senden, zurücksetzen, Größe ändern, scrollen, fokussieren, verwischen
Programme, die JavaScript-Code ausführen, reagieren auf Ereignisse, wenn diese auftreten. Code, der als Reaktion auf ein bestimmtes Ereignis
ausgeführt wird, wird als Ereignishandler bezeichnet.
Die Syntax für die Verwendung von Ereignishandlern in HTML-Tags lautet:
Ereignis ist eine bestimmte Aktion, die vom Benutzer oder vom Browser selbst ausgeführt wird. Beispielsweise sind Klicken, Mouseup, Keydown, Mouseover usw. die Namen von Ereignissen und Funktionen, die auf ein Ereignis reagieren Ereignis. Es wird als Ereignishandler (Ereignis-Listener) bezeichnet. Der Ereignishandler von click ist also onclick
DOM-Level-0-Ereignishandler: Weisen Sie dem Handler-Attribut eines Ereignisses eine Funktion zu
var btn2=document.getElementById('btn2'); Holen Sie sich das Btn2-Button-Objekt
btn2.onclick //Onclick zu btn2 hinzufügen Attribut, das Attribut hat einen Ereignishandler ausgelöst
btn2.onclick=function(){
} //Anonyme Funktion hinzufügen
btn2.onclick=null //Onclick-Attribut löschen
DOM Ereignisse der Ebene 2 definieren zwei Methoden zum Spezifizieren und Entfernen von Ereignishandleroperationen addEventListener() und removeEventListener()
addEventListener() und removeEventListener()
Im DOM werden addEventListener() und removeEventListener() verwendet, um Ereignisbehandlungsfunktionen zuzuweisen und zu entfernen. Im Gegensatz zum IE erfordern diese Methoden drei Parameter: Ereignisname, der zugewiesen werden soll. Ob die Funktionen und Verarbeitungsfunktionen in der Bubbling-Phase verwendet werden (false) oder die Erfassungsphase (true), der Standardwert ist die Bubbling-Phase false
[object].addEventListener("name_of_event",fnhander,bcapture)
[object].removeEventListener( "name_of_event",fnhander,bcapture)
var fnClick = function(){
warning("Clicked!");
}
oDiv. addEventListener("onclick", fnClick, false); //Ereignishandlerfunktion hinzufügen
oDiv.addEventListener("onclick", fnClickAnother, false); // Wie im IE können Sie mehrere Ereignishandler hinzufügen
oDiv.removeEventListener("onclick", fnClick, false); //Ereignishandler entfernen
Wenn Sie addEventListener( ) verwenden, um die Ereignishandlerfunktion zur Erfassungsphase hinzuzufügen , Sie müssen die Erfassungsphase in removeEventListener() angeben, um die Event-Handler-Funktion korrekt zu löschen
oDiv.onclick = fnClick;
oDiv .onclick = fnClickAnother; //Direkte Zuweisung verwenden, nachfolgendes Ereignis Verarbeitungsfunktionen überschreiben die vorherigen Verarbeitungsfunktionen
oDiv.onclick = fnClick;
oDiv.addEventListener("onclick", fnClickAnother, false); //Wird nacheinander aufgerufen und nicht überschrieben
Der Kern von BOM ist Fenster und das window-Objekt haben eine Doppelrolle. Es ist eine Schnittstelle für den Zugriff auf das Browserfenster über js , ein weiteres Global (globales) Objekt. Das bedeutet, dass jedes auf einer Webseite definierte Objekt, jede Variable und jede Funktion Fenster als globales-Objekt hat.
Fenster -Objekt ist das Objekt der obersten Ebene in der JavaScript-Hierarchie. Das
Window-Objekt stellt ein Browserfenster oder einen Rahmen dar. Jedes Es wird automatisch erstellt, wenn es erscheint.
1) Objekteigenschaften Fenster //Fenster selbst, Fenster=Fenster. Auf self kann über die globale Eigenschaft
window
object zugegriffen werden Dokumentpaar Ein schreibgeschützter Verweis auf das Document -Objekt. Siehe Document-Objekt. history Ein schreibgeschützter Verweis auf das History
-Objekt. Bitte parametrieren Sie das History-Objekt. Standort Standort
Objekt für ein Fenster oder einen Rahmen. Siehe Standort-Objekt. screen Ein schreibgeschützter Verweis auf das Screen
-Objekt. Bitte parametrieren Sie das Objekt Screen. navigator Ein schreibgeschützter Verweis auf das Navigator
-Objekt. Bitte parametrieren Sie das Navigator-Objekt. defaultStatus Legt den Standardtext in der Fensterstatusleiste fest oder gibt ihn zurück.
innerheight gibt die Höhe des Dokumentanzeigebereichs des Fensters zurück.innerwidth gibt die Breite des Dokumentanzeigebereichs des Fensters zurück. outerheight gibt die äußere Höhe des Fensters zurück. outerwidth gibt die äußere Breite des Fensters zurück. pageXOffset legt die X
-Position der aktuellen Seite relativ zur oberen linken Ecke des Fensteranzeigebereichs fest oder gibt sie zurück.
pageYOffset legt dieY
-Position der aktuellen Seite relativ zur oberen linken Ecke des Fensteranzeigebereichs fest oder gibt sie zurück.
name legt den Namen des Fensters fest oder gibt ihn zurück.parent gibt das übergeordnete Fenster zurück. top Kehrt zum obersten Vorfahrenfenster zurück.
status legt den Text der Fensterstatusleiste fest.window.location //URLAdresse, ausgestattet mit diesem Attribut, können Sie eine neue Seite öffnen
2) Objektmethode
window.close(); //
Fenster schließen
window.alert("message"); //Fenster öffnen mit OK
Das Systemmeldungsfeld der Schaltflächewindow.confirm("Sind Sie sicher?"); //öffnet ein Fenster mit OK und Abbrechen Das Abfragedialogfeld der Schaltfläche gibt einen booleschen Wert zurück
window.prompt("Wie ist Ihr Name?", "Default"); // fordert den Benutzer zur Eingabe von Informationen auf und akzeptiert zwei Parameter. Das heißt, der dem Benutzer anzuzeigende Text und der Standardwert im Textfeld geben den Wert im Textfeld als Funktionswert zurück
window.status // kann den Text der Statusleiste vorübergehend ändern
window.defaultStatus //Standardstatusleisteninformationen, die den Text ändern können, bevor der Benutzer die aktuelle Seite verlässt
window.setTimeout("alert(' xxx')", 1000); //Legen Sie fest, dass der angegebene Code nach der angegebenen Anzahl von Millisekunden ausgeführt wird. Akzeptiert 2 Parameter, der auszuführende Code und die zu wartenden Millisekunden. Number
window.clearTimeout("ID"); //Brechen Sie die Pause ab, die noch nicht ausgeführt wurde, und übergeben Sie die Pause ID dazu
window.setInterval(function, 1000); //Wiederholen Sie den angegebenen Code in jedem angegebenen Zeitraum sind die gleichen wie setTimeout()Same
window.clearInterval("ID"); //Das Zeitintervall abbrechen und übergeben IntervallID dazu
window.history.go(-1); //Zugriff auf den Verlauf des Browserfensters, ein Negativ Zahl bedeutet zurück, eine positive Zahl bedeutet vorwärts (); //Wie oben
window.history.length / /Sie können die Anzahl der Seiten im Verlauf anzeigen
clearInterval( ) Brechen Sie das durch setInterval()
🎜> festgelegte Timeout
clearTimeout() bricht das von der Methode setTimeout() festgelegte Timeout ab.createPopup() erstellt ein Popup-Fenster . moveBy() verschiebt das Fenster um die angegebenen Pixel relativ zu seinen aktuellen Koordinaten.
moveTo() Verschiebt die obere linke Ecke des Fensters zu einer angegebenen Koordinate. open() Öffnet ein neues Browserfenster oder sucht ein benanntes Fenster. print() druckt den Inhalt des aktuellen Fensters.
resizeBy() Ändert die Größe des Fensters entsprechend den angegebenen Pixeln.
resizeTo() Ändert die Größe des Fensters auf die angegebene Breite und Höhe.
scrollBy() scrollt den Inhalt entsprechend dem angegebenen Pixelwert.
scrollTo() scrollt den Inhalt zu den angegebenen Koordinaten.
setInterval() Ruft eine Funktion auf oder wertet einen Ausdruck in einem angegebenen Zeitraum (in Millisekunden) aus.
setTimeout(
Method,Seconds)Ruft eine Funktion oder einen berechneten Ausdruck nach der angegebenen Anzahl von Millisekunden auf. timeOutEvent = setTimeout("longPress('" + obj + "')",1500); Timer übergibt Parameter3) Mitgliedsobjektwindow.event
window.document //
Siehewindow.history window.screenwindow.navigatorWindow.external
Erweiterung
① If Das Dokument enthält Frames (
frameoder iframe
-Tags), der Browser behandelt dasHTML Dokument als Erstellen Sie ein Fenster-Objekt und erstellen Sie ein zusätzliches Fenster-Objekt für jeden Frame. ② window.frames Gibt alle benannten Frames im Fenster zurück
③parent ist das übergeordnete Fenster (wenn das Fenster ein Fenster der obersten Ebene ist, dann parent==self==top)
top ist das übergeordnete Fenster der obersten Ebene (einige Fenster haben mehrere Ebenen von Frameset oder ). iframe)
self ist das aktuelle Fenster (entspricht window). )
Öffner ist das Fenster, das das aktuelle Fenster mit der Methode Öffnen
öffnet
④Methoden im Zusammenhang mit Meldungsfeldern: alert(String), confirm(String), prompt(String)
⑤Zwei Timer: setTimeout(code,latency) und setInterval(code, Zeitraum)
Hinweis: setTimeout wird nur einmal ausgeführt Code, wenn Sie möchten um es mehrmals aufzurufen, können Sie code selbst setTimeout() erneut setInteval() aufrufen; Rufen Sie code so lange auf, bis clearInterval() aufgerufen wird.
window.history.length //Angesehene Seitenanzahl
history.back() //Zurück im Browserverlauf
history.forward() //Im Browserverlauf vorwärts gehen Weiter
history.go(i) // zur i Position
//i>0Fortschritt,i<0Rückzug
----- ------------------------------------------- ------- ------------
BildschirmObjekt: gewohnt Erhalten Sie bestimmte Informationen über den Bildschirm des Benutzers. Sie können auch window.screen verwenden, um darauf zu verweisen width
window.screen.height //
Screen heightwindow.screen .colorDepth //
Bildschirmfarbtiefewindow.screen.availWidth //
Verfügbare Breite( Ohne die Höhe von die Taskleiste) window.screen.availHeight //
Verfügbare Höhe(Außer die Höhe der Taskleiste) --------------------- ----- --------------------- -------------------
3.4 externalObject
","Titel" ) //Website zu Favoriten hinzufügen ---------------------------------------------------------- ------ ------ ---- Navigator`-Objekt: enthält viele Informationen über den Web-Browser, der bei der Erkennung von Browsern und Betriebssystemen sehr nützlich ist window.navigator.appCodeName //Browser-Codename window.navigator.appName //Browser-Codename Name window.navigator.appMinorVersion //Browser-Patch-Version window.navigator. cpuClass // cpuTypx86 window.navigator.platform //Betriebssystemtypwin32 window.navigator.plugins window.navigator.opsProfile window .navigator. userProfile window.navigator.systemLanguage //Kundensystemsprachezh-cnVereinfachtes Chinesisch window.navigator.userLanguage //Benutzersprache,Gleiche wie oben window .navigator.appVersion //Browserversion(Einschließlich Systemversion) window.navigator.userAgent//String-Darstellung des User-Agent-Headers window.navigator.onLine //The Benutzer ist nicht online window.navigator.cookieEnabled //Ob der Browser Cookie < unterstützt 🎜>window.navigator.mimeTypes bietet direkten Zugriff auf den 3.5 NavigatorObjekt
3.6 DokumentObjekt
1) Das Objektattribut
document.body//
Cookies zurück, die sich auf das aktuelle Dokument beziehen.
document.title //Gibt den Dokumenttitel zurück, der dem TitelHTML entspricht > Tags document.domain gibt den Domänennamen des aktuellen Dokuments zurück.
document.bgColor //
Zurück zur Hintergrundfarbe der Seitedocument.fgColor //
Zurück zur Vordergrundfarbe( Textfarbe)document.linkColor //
Farbe für nicht angeklickte Linksdocument.alinkColor //
Aktivieren die Farbe des Links(Fokus auf diesen Link)document.vlinkColor //
Farbe des angeklickten Linksdocument.URL //
Legen Sie die EigenschaftURL fest, um eine andere Webseite im selben Fenster zu öffnen document.fileCreatedDate //
Dateierstellungsdatum, schreibgeschütztes Attributdocument.fileModifiedDate //
Dateiänderungsdatum, schreibgeschütztes Attribut document.lastModified Gibt das Datum und die Uhrzeit zurück, wann das Dokument zuletzt geändert wurde. document.fileSize //Dateigröße, schreibgeschütztes Attribut document.cookie //Setzen und auslesenCookie document.charset //Gibt den Zeichensatz Vereinfachtes Chinesisch zurück:gb2312 document.URL Gibt die URL des zurück aktuelles Dokument. document.referrer gibt die URL des Dokuments zurück, das das aktuelle Dokument geladen hat. document.styleSheets Gibt eine Sammlung von Stylesheets zurück,RückgabewertCSSStyleSheet[] document.styleSheets[0].cssRules.style.paddingTop=“10px“Legen Sie den Stil fest,Entfernen Sie Bindestriche aus dem Stilnamen, document.write() //Inhalt dynamisch auf die Seite schreiben document.writeln () ist äquivalent. Der Unterschied zur Methode write() besteht darin, dass nach jedem Ausdruck ein Zeilenumbruchzeichen geschrieben wird. document.createElement( Erhalten Sie das Objekt mit dem angegebenen ID-Wert Das Objekt mit dem angegebenen Name-Wert abrufen Gibt den Anfang und das Ende des Dokumentkörpers an, was entspricht body> /body> Hintergrundfarbe hinter dem Objekt festlegen oder abrufen Farbe des nicht angeklickten Links Link aktivieren(Der Fokus liegt auf diesem Link )Farbe Farbe des angeklickten Links Textfarbe Einstellungenbody>…/body> Text zwischen /body>HTML document.body.topMargin //Oberer Seitenranddocument.body.leftMargin //Linker Rand der Seitedocument.body.rightMargin //Rechter Rand der Seitedocument.body.bottomMargin // document.body.background // document.body. appendChild( oTag) // HTML 4) Häufige Objektereignisse document.body.onclick= func()“// document.body.onmouseover=“func()“//Wird ausgelöst, wenn sich der Mauszeiger bewegt das Objekt document.body.onmouseout=“func()“//Maus Wird ausgelöst, wenn sich der Zeiger aus dem Objekt bewegt ———————————————————————— Standort Objekt: URL, das das Ladefenster darstellt, auch verfügbar window.locationReferenz darauf location.href //Die vollständige URL der aktuell geladenen Seite, wie zum Beispiel http://www.somewhere.com/pictures/index.htm location.portocol //Das in der URL verwendete Protokoll, also vor dem doppelten Schrägstrich, z. B. http location.host //Der Name des Servers, z. B. www.wrox.com location.hostname // ist normalerweise gleich host, manchmal auch das vorangehende www location.port wird weggelassen //Der durch die URL angegebene angeforderte Port Standardmäßig verfügen die meisten URL nicht über Portinformationen , wie zum Beispiel 8080 location.pathname //Der Teil nach dem Hostnamen in der URL, wie zum Beispiel /pictures/index.htm location.search //ExecuteURL, der von 🎜>GET wird auch als Abfragezeichenfolge bezeichnet, z. B. ?param= xxxxlocation.hash // URL enthält #, gibt dieses Symbol zurück. Der folgende Inhalt, z. B. #anchor1location.assign(" http:www.baidu.com"); // location .href, die neue Adresse wird dem Verlaufsstapel des Browsers hinzugefügtlocation.replace("http:www.baidu.com"); // assign(), aber die neue Adresse wird nicht sein zum Verlaufsstapel des Browsers hinzugefügt und kann nicht durch zurück und vorBesuchStandort weitergeleitet werden. reload(true | false); // false aus dem Browser-Cache neu geladen wird, ist es true , es wird von der Serverseite neu geladen. Der Standardwert ist false document.location.reload(URL) //Öffne ein neues Webseite 6) Auswahl- 7) Formulare document.forms // entspricht dem formTagdocument.forms.length //Die Anzahl der -Tags auf der entsprechenden Seite document.forms[0] //th1/formform Tag document.forms[i] //thi-1/formformtag document.forms[i].length //thi-1/formform Anzahl der Steuerelemente document.forms[i].elements[j] //th i-1/formform Nr. j-1 Steuerung b) durch Tag Der Name Attribut verweist direkt auf /formform name=“Myform“>input name= “myctrl“/>/form document.Myform.myctrl // document. Formularname.Steuerelementname c)Zugriff auf die Eigenschaften des Formulars Dokument .forms[ i].name //entsprichtFormularname>Attribut document.forms[i].action //entspricht zu /formform action>attribute document.forms[i].encoding //entspricht /formform enctype>Attribute document.forms[i].target //entspricht/formform target>Attribute document.forms[i].appendChild(oTag) //Ein Steuerelement dynamisch einfügen document.all.oDiv //Referenzebene oDiv document.all.oDiv.style.display=“ // Ebene auf sichtbar gesetzt document.all.oDiv.style.display=“none“//Layer auf versteckt setzen document.getElementId(“oDiv“) //Referenz object document.getElementId(“ “).style=“document.getElementId(“ “ ).display=“ keine“/*document.all bedeutet Dokument Nur ie unterstützt dieses Attribut, daher wird es auch zur Bestimmung des Browsertyps verwendet */ ....3.7 HTMLElement Im HTML DOM (Document Object Model) ist jeder Teil ein Knoten: 1.Das Dokument selbst ist ein Dokumentknoten 2.AlleHTMLElemente sind Elementknoten 3.AlleHTMLAttribute sind Attributknoten 4. Der Text innerhalb des HTML--Elements ist ein Textknoten 5. Anmerkungen sind Anmerkungsknoten Element Objekt in HTML DOM , Das Element-Objekt stellt das HTML-Element dar. Das Element -Objekt kann untergeordnete Knoten vom Typ Elementknoten, Textknoten und Kommentarknoten haben. Das NodeList -Objekt stellt eine Liste von Knoten dar, beispielsweise eine Sammlung untergeordneter Knoten des HTML-Elements. Elemente können auch Attribute haben. Das Attribut ist ein Attributknoten Get document.getElementById(ID) //Get das Objekt Das Objekt mit dem angegebenen Name-Wert Attribute und Methoden a,b in der Methode dienen lediglich der Vertiefung der Erklärung, Andere Elemente haben kein a,b, was nicht bedeutet, dass es sich um eine parameterlose Methode handelt Fügen Sie die angegebene Klasse zum Element hinzu NodeList der untergeordneten Knoten des Elements zurück. class des Elements fest oder gibt es zurück. API zurück, das die angegebene Funktion implementiert. Ruft den Existenzstatus des hidden-Attributs true zurück, andernfalls gibt es false zurück. true zurück, wenn das Element Attribute hat, andernfalls false. true zurück, wenn das Element untergeordnete Knoten hat, andernfalls false. id des Elements fest oder gibt sie zurück. element.insertBefore(,) Fügt einen neuen Knoten vor dem angegebenen vorhandenen untergeordneten Knoten ein. A wird vor b element.isContentEditable eingefügt, das den Inhalt des Elements festlegt oder zurückgibt. element.isDefaultNamespace() Wenn der angegebene NamespaceURI der Standardwert ist, geben Sie true zurück, andernfalls geben Sie falsch. a gleich dem aktuellen Element ist. . true. Namespace-URI des Elements zurück. Entfernt die angegebene Klasse aus dem Element style des Elements fest oder gibt es zurück. Wenn die Klasse nicht existiert, fügen Sie sie hinzu und entfernen Sie sie, wenn sie existiert Tabulatortasten des Elements zurück, um die Reihenfolge zu steuern. title des Elements fest oder gibt es zurück. NodeList befindet. NodeList zurück. : Verwenden Sie nicht das Präfix "on". Verwenden Sie beispielsweise "click" , anstelle von "onclick". Tipp: Für alle HTML-DOM--Ereignisse schauen Sie sich unser vollständiges HTML-DOM-Ereignis-Objektreferenzhandbuch an. Funktion Erforderlich. Geben Sie die Funktion an, die ausgeführt werden soll, wenn das Ereignis ausgelöst wird. Wenn das Ereignisobjekt als erster Parameter an die Funktion übergeben wird. Der Typ des Ereignisobjekts hängt vom jeweiligen Ereignis ab. Beispielsweise gehört das Ereignis "click" zum Objekt MouseEvent(MouseEvent). useCapture Optional. Ein boolescher Wert, der angibt, ob das Ereignis in der Erfassungs- oder Bubbling-Phase ausgeführt wird. Mögliche Werte: true – Der Event-Handler wird während der Erfassungsphase ausgeführt false- false- Standard. Der Event-Handler wird während der Bubbling-Phase ausgeführt contentWindow Attribut wenn ein Iframe vorhanden ist das Dokument--Attribut. Verwenden Sie dieses Attribut, um den Inhalt des iframe Die Sammlung gibt alle Zeilen in der Tabelle zurück (TableRow Objekte), das Set enthält , TableRow Object -Objekt stellt eine HTML-Tabellenzeile dar. HTML -Dokument 集合 描述 IE F O W3C cells[] 返回包含行中所有单元格的一个数组。 4 1 9 Yes Zellen Die Sammlung gibt alle TableCell -Objekt stellt eine HTML Tabellenzelle dar. In einem HTML -Dokument 名称 说明 返回 type 事件的名称如mouseover 字符串 target 事件指向的元素 HTMLElement (Die ohne Blau sind h 5 Neues Ereignis) Ereignis ausgelöst für Fenster -Objekt (gilt für < body> Tag): Attribut onafterprint Skript, das ausgeführt wird, nachdem das Dokument gedruckt wurde. onbeforeprint-Skript, das vor dem Drucken des Dokuments ausgeführt wird. onbeforeunload-Skript, das vor dem Entladen des Dokuments ausgeführt wird. onerror Skript, das ausgeführt wird, wenn ein Fehler auftritt. onhachange Skript, das ausgeführt wird, wenn sich das Dokument geändert hat. onload Wird ausgelöst, nachdem die Seite vollständig geladen wurde. onmessage Ein Skript, das ausgeführt wird, wenn eine Nachricht ausgelöst wird. Sie können den Aufruf postMessage () verwenden, um eine Nachricht an den Hauptthread zu senden In einigen Szenarien muss der geschäftliche Anrufer möglicherweise aktiv mit der Positionierung kommunizieren Komponente , kann html5 übergeben werden
PostMessage initiiert aktiv die Kommunikation mit der Positionierungskomponente onoffline Ein Skript, das ausgeführt wird, wenn das Dokument offline ist. ononline Skript, das ausgeführt wird, wenn das Dokument online geht. onpagehide Skript, das ausgeführt wird, wenn das Fenster ausgeblendet ist. onpageshow Skript, das ausgeführt wird, wenn das Fenster sichtbar wird. onpopstate Skript, das ausgeführt wird, wenn sich der Fensterverlauf ändert. onredo Skript, das ausgeführt wird, wenn ein Dokument einen Widerruf durchführt (redo). onresize Wird ausgelöst, wenn die Größe des Browserfensters geändert wird. onstorage Ein Skript, das ausgeführt wird, nachdem die Zone Web Storage aktualisiert wurde. onundo Ein Skript, das ausgeführt wird, wenn das Dokument undo ausführt. onunload Wird ausgelöst, sobald die Seite heruntergeladen wurde (oder das Browserfenster geschlossen wurde). Ereignisse, die durch Aktionen innerhalb des HTML--Formulars ausgelöst werden (gilt für fast alle HTML-Elemente, am häufigsten jedoch im Formular-Element verwendet: -Attribut onblur Skript, das ausgeführt wird, wenn das Element den Fokus verliert. onchange Ein Skript, das ausgeführt wird, wenn der Elementwert geändert wird. oncontextmenu Skript, das ausgeführt wird, wenn das Kontextmenü ausgelöst wird. onfocus Ein Skript, das ausgeführt wird, wenn ein Element den Fokus verliert. onformchange Skript, das ausgeführt wird, wenn sich das Formular ändert. onforminput Skript, das ausgeführt wird, wenn das Formular Benutzereingaben erhält. oninput Ein Skript, das ausgeführt wird, wenn das Element Benutzereingaben erhält. oninvalid Skript, das ausgeführt wird, wenn ein Element ungültig ist. onreset Wird ausgelöst, wenn auf die Schaltfläche „Zurücksetzen“ im Formular geklickt wird. Wird in HTML5 nicht unterstützt. onselect Wird ausgelöst, wenn der Text im Element ausgewählt wird. onsubmit Wird ausgelöst, wenn das Formular gesendet wird. oninput: oninput wird ausgelöst, wenn der Benutzer eine Eingabe macht. Dieses Ereignis wird ausgelöst, wenn sich der Wert des Elements oder 2) Gemeinsame Objektmethoden
3) body-Body-Unterobjekt
document.body //
5) Standort – Unterobjekt „Standort“
document.selection
(Formular auf Seite) a) Referenziert durch die Sammlung
HTML DOM Node
Parameter
Beschreibung
Ereignis
Erforderlich. Zeichenfolge, die den Ereignisnamen angibt. Hinweis
1) Tabellen--Objekt
1 Das TableRow-Objekt wird erstellt. TableRow Objektsammlung
Sammlung
Beschreibung
IE
F
O
W3C
Zellen[]
Gibt ein Array zurück, das alle Zellen in der Zeile enthält.
4
1
9
Ja oder zurück Element. Das
Jedes Mal, wenn das -Tag erscheint, wird ein TableCellObjekt wird erstellt
3.8 EventObjekt
1) Gemeinsame Attribute von Event-Objekten
Name
Beschreibung
Zurück
type
Der Name des Ereignisses ist wie Mouseover String
target
Das Element, auf das das Ereignis zeigt
HTMLElement
2) Fenster Ereigniseigenschaften
3) Formular Ereignisse
4) Verwendung von oninput, onpropertychange, onchange
