Was ist Dom?
1. Einführung
Das Dokumentobjektmodell (DOM) ist eine Standard -Programmierschnittstelle, die von W3C -Organisationen empfohlen wird, um erweiterbare Logosprachen zu verarbeiten. Das Dokumentobjektmodell kann Ende der neunziger Jahre auf den "Browser -Kampf" zwischen Microsoft und Netscape zurückgeführt werden. Um Leben und Tod mit Jscript in JavaScript zu bekämpfen, gaben die beiden Seiten dem Browser starke Funktionen in großem Maßstab. Microsoft hat der Webseiten-Technologie viele exklusive Dinge hinzugefügt, darunter VBScript, ActiveX und das DHTML-Format von Microsoft, wodurch viele Webseiten nicht in der Lage sind, nicht-Mikrosoft-Plattformen und -browser anzuzeigen. Dom ist ein Meisterwerk, das zu dieser Zeit gebraut wurde.
DOM (Dokumentobjektmodell) ist eine Anwendungsprogrammschnittstelle (API) für HTML und XML. Das DOM plant die gesamte Seite in ein Dokument, das sich aus Knotenpegeln zusammensetzt.
Das sogenannte Dokumentobjektmodell ist tatsächlich eine interne Darstellung verschiedener Elemente auf der Webseite HTML, wie z. B. Header, Absätze, Listen, Stile, IDs usw. in HTML. Alle Elemente können über DOM zugegriffen werden.
JavaScript muss letztendlich die HTML -Seite bedienen und das HTML in DHTML umwandeln, und DOM ist erforderlich, um die HTML -Seite zu betreiben. DOM soll die HTML -Seite in ein Objekt simulieren. Wenn JavaScript nur einige Berechnungen, Schleifen und andere Operationen ausführt und HTML nicht betreiben kann, verliert es seine Bedeutung.
DOM ist das Modell der HTML -Seite. Jedes Tag wird als Objekt verwendet. JavaScript kann auf der Webseite Textfelder, Ebenen und andere Elemente programmatisch steuern, indem sie Eigenschaften und Methoden im DOM aufrufen. Durch das Betrieb des DOM -Objekts des Textfelds können Sie beispielsweise die Werte im Textfeld lesen und die Werte im Textfeld festlegen.
2. Illustration
Über das Fenster ist die gesamte Seite oder das gesamte Fenster ein Fenster Objekt ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Die auf der Seite definierten Variablen und Methoden sind ein Fenster
Fenster.id
document.getElementById ()
Bei Verwendung von Eigenschaften und Methoden von Fensterobjekten kann das Fenster weggelassen werden.
Zum Beispiel:
window.alert ('Hallo');
Kann in Alarm weggelassen werden ('Hallo');
Fenster.Dokument kann direkt mit Dokument geschrieben werden
Wenn Sie kein Fenster schreiben können, schreiben Sie es nicht, da dies die Anzahl der Bytes in der JS -Datei verringern kann.
Die Codekopie lautet wie folgt:
window.alert ('Hallo allerseits!'); // Das Dialogfeld "Warndialog" taucht auf
window.confirm ('Sind Sie sicher, dass Sie es löschen möchten?'); // Bestätigen Sie das Dialogfeld ab, geben Sie True oder False zurück.
window.navigate (URL); // Navigieren Sie die Webseite in URL, unterstützt IE und Opera11.6. Nicht empfohlen, einige Browser funktionieren nicht,
Es wird empfohlen, Fenster zu verwenden.
Dynamisch DOM -Elemente bedienen
1. Erhalten Sie den DOM
GetElementById () (sehr häufig verwendet), erhalten Sie das Objekt gemäß der ID des Elements, und die ID auf der Webseite kann nicht wiederholt werden. Sie können sich auch auf Elemente direkt über die ID des Elements verweisen, aber es gibt einen gültigen Umfang.
GetElementsByName (), erhalten Sie das Objekt nach dem Namen des Elements. Da die Namen der Elemente auf der Seite wiederholt werden können, z. B. die Namen mehrerer Radiobuttons, ist der Rückgabewert von getElementsByName ein Objektarray.
GetElementsByTagName () erhalten Sie eine Reihe von Elementen mit dem angegebenen Tag -Namen. Zum Beispiel kann GetElementsByTagName ("input") alle <eingabe> -Tags abrufen. *Zeigt alle Etiketten an
2. Fügen Sie hinzu, entfernen Sie, ersetzen Sie
Dokument.Write kann nur während des Ladens von Seite dynamisch erstellt werden.
Sie können die Erstellungsmethode des Dokuments aufrufen, um ein DOM -Objekt mit dem angegebenen Tag zu erstellen, und dann das neu erstellte Element zum entsprechenden Element hinzufügen, indem Sie den AppendChild () aufrufen. Methode eines bestimmten Elements. // übergeordnetes Element Object.removechild (untergeordnetes Elementobjekt); Element löschen.
CreateLement ('Element'); Erstellen Sie einen Knoten
appendChild (Knoten); Einen Knoten anhängen
removechild (Knoten); removechild (Knoten); einen Knoten entfernen
Ersatz (neu, alt); Ersetzen Sie einen Knoten
Insertbefore (neu, beziehen sich auf); Knoten nach vorne hinzufügen (vorne an einem Knoten einfügen)
Verfahren:
Eigentum:
FirstChild
lastChild
3.. Verwenden Sie Innerhtml oder createLement (), appendChild () und removechild ()?
Sollten wir bei der Manipulation von Elementen der Seite Innerhtml, createLement (), appendChild () und removechild () verwenden?
1. Bei der Durchführung einer großen Anzahl von Knotenoperationen ist die Leistung der Verwendung von InnerHTML besser als häufige DOM -Operationen (es gibt HTML -Parsers, die speziell in C oder C ++ geschrieben sind). Schreiben Sie zuerst den HTML -Code der Seite und rufen Sie dann Innerhtml einmal an, anstatt wiederholt Innerhtml anzurufen.
2. Für das Löschen von Knoten unter Verwendung von Innerhtml = '' wird in einigen Fällen Speicherprobleme auftreten. Zum Beispiel: Es gibt viele andere Elemente unter der DIV, und jedes Element ist an einen Ereignishandler gebunden. Zu diesem Zeitpunkt entfernt Innerhtml einfach das aktuelle Element aus dem Knotenbaum, aber diese Ereignishandler belegen immer noch Speicher.
JS -Betriebsstil
Der Stil des Elements ist die Klassenname -Eigenschaft.
(Klasse ist ein reserviertes Wort in JavaScript. Das Attribut kann keine Schlüsselwörter oder reservierten Wörter verwenden, daher wird es Klassenname.) Der Effekt von Webseitenschaltlichtern.
Ändern Sie den Stil des Elements können nicht dies sein.
Verwenden Sie "Style. Attributname", um die Attribute des Stils separat zu ändern. Beachten Sie, dass, wenn die Attributnamen in JavaScript in CSS betrieben werden, die Attributnamen unterschiedlich sein können, wobei sich hauptsächlich auf Attribute konzentriert, die in Attributen enthalten sind, da - in JavaScript nicht verwendet werden kann.
Beim Betrieb von Schwimmerstilen
IE: Obj.Style.StyleFloat = 'Right';
Andere Browser: obj.style.cssfloat = 'right';
Formobjekt
Häufig verwendet: click (), focus (), Blur (); // Ausrüstung ist das Ereignis, das das Klicken eines Elements auslöst, den Fokus erhält und Fokus durch ein Programm verliert.
Das Formularobjekt ist ein DOM -Objekt der Form.
Methode: submit () reicht das Formular ein, aber das OnSubmit -Ereignis wird nicht ausgelöst.
Autopost implementieren, dh die Seite wird sofort nach dem Fokus eingereicht, anstatt erst nach der Übermittlung der Subies -Schaltfläche zu reichen. Wenn der Cursor verlässt, wird das Onblur -Ereignis ausgelöst und die Formular -Sendemethode in Onblur aufgerufen.
Nach dem Klicken auf Senden wird das ONSUBMIT -Formularereignis ausgelöst. Die Datenüberprüfung kann in ONSUBMIT durchgeführt werden. Wenn ein Problem mit den Daten vorliegt, geben Sie FALSE zurück, um die Einreichung zu stornieren
Das obige ist mein persönliches Verständnis von JavaScripts DOM, und ich hoffe, es kann es mögen.