Eine kurze Analyse der DOM_javascript-Techniken in Javascript

Was ist ein Dom?

1. Einleitung

Das Document Object Model (DOM) ist eine Standard-Programmierschnittstelle zur Verarbeitung erweiterbarer Auszeichnungssprachen, die von der W3C-Organisation empfohlen wird. Die Geschichte des Document Object Model lässt sich bis zum „Browserkrieg“ zwischen Microsoft und Netscape in den späten 1990er Jahren zurückverfolgen. Um in JavaScript und JScript um Leben und Tod zu konkurrieren, statteten beide Parteien Browser in großem Umfang mit leistungsstarken Funktionen aus. Microsoft hat der Webtechnologie viele proprietäre Dinge hinzugefügt, darunter VBScript, ActiveX und Microsofts eigenes DHTML-Format, was dazu führt, dass viele Webseiten auf Plattformen und Browsern, die nicht von Microsoft stammen, nicht richtig angezeigt werden können. DOM ist das damals gebraute Meisterwerk.

DOM (Document Object Model) ist die Anwendungsprogrammierschnittstelle (API) von HTML und XML. DOM plant die gesamte Seite in ein Dokument, das aus Knotenebenen besteht.

Das sogenannte Document Object Model ist eigentlich eine interne Darstellung verschiedener Elemente im HTML einer Webseite, wie z. B. Überschriften, Absätze, Listen, Stile, IDs usw. In HTML kann auf alle Elemente zugegriffen werden DOM.

JavaScript muss letztendlich HTML-Seiten betreiben, HTML in DHtml umwandeln, und der Betrieb von HTML-Seiten erfordert die Verwendung von DOM. DOM simuliert die HTML-Seite in ein Objekt. Wenn JavaScript nur einige Berechnungen, Schleifen und andere Operationen ausführt, HTML jedoch nicht ausführen kann, verliert es die Bedeutung seiner Existenz.

DOM ist das Modell der HTML-Seite. Jedes Tag wird als Objekt behandelt, indem es Textfelder, Ebenen und andere Elemente in der Webseite programmgesteuert steuert. Durch Bearbeiten des DOM-Objekts des Textfelds können Sie beispielsweise den Wert im Textfeld lesen und festlegen.

2. Abbildung

Über Fenster: Die gesamte Seite oder das gesamte Fenster ist ein Fensterobjekt ---------------fenster ist ein Objekt der obersten Ebene

Die auf der Seite definierten Variablen und Methoden sind alle Fenster

window.id

document.getElementById()

Fenster kann weggelassen werden, wenn die Eigenschaften und Methoden des Fensterobjekts verwendet werden.

Zum Beispiel:

window.alert(‘hello’);

kann als Warnung(‘hello’) weggelassen werden;

window.document kann Dokumente direkt schreiben

Schreiben Sie kein Fenster, wenn Sie können. Dies kann die Anzahl der Bytes in der js-Datei reduzieren.

Code kopieren Der Code lautet wie folgt:

window.alert('Hallo alle zusammen!');//Popup-Warndialogfeld
window.confirm('Sind Sie sicher, dass Sie löschen möchten?');//Bestätigen und brechen Sie das Dialogfeld ab, geben Sie true oder false zurück;
window.navigate(url);// Navigieren Sie die Webseite erneut zur URL, unterstützt IE und Opera11.6. Nicht empfohlen, einige Browser funktionieren nicht,

Es wird empfohlen, window.location.href=‘url’;//Unterstützt die meisten Browser zu verwenden

Dynamische Manipulation von DOM-Elementen

1. Holen Sie sich DOM

getElementById() (sehr häufig verwendet) ruft ein Objekt basierend auf der ID des Elements ab. Die ID kann auf der Webseite nicht wiederholt werden. Sie können das Element auch direkt über seine ID referenzieren, es gibt jedoch einen gültigen Bereich,

getElementsByName() ruft ein Objekt basierend auf dem Namen des Elements ab. Da die Namen von Elementen auf der Seite wiederholt werden können, z. B. mehrere RadioButtons mit demselben Namen, ist der Rückgabewert von getElementsByName ein Objektarray.

getElementsByTagName(), ruft das Elementarray des angegebenen Tag-Namens ab. Beispielsweise kann getElementsByTagName("input") alle -Tags abrufen. * bedeutet alle Tags

2. Hinzufügen, entfernen, ersetzen

document.write kann nur dynamisch beim Laden der Seite erstellt werden.

Sie können die Methode createElement des Dokuments aufrufen, um ein DOM-Objekt mit einem angegebenen Tag zu erstellen, und dann das neu erstellte Element zum entsprechenden Element hinzufügen, indem Sie die Methode appendChild() aufrufen. //Übergeordnetes Element object.removeChild (untergeordnetes Elementobjekt); lösche das Element.

createElement('element');Knoten erstellen

appendChild(node); Einen Knoten anhängen

removeChild(node); einen Knoten entfernen

replaceChild(new,old); einen Knoten ersetzen

insertBefore(new, reference); den Knoten vorne hinzufügen (vor einem Knoten einfügen)

Methode:

Eigenschaften:

firstChild

lastChild

3. InnerHTML oder createElement(), appendChild() und removeChild() verwenden?

Soll ich beim Bearbeiten der Elemente der Seite innerHTML oder createElement(), appendChild() und removeChild() verwenden?

1. Bei einer großen Anzahl von Knotenoperationen ist die Leistung der Verwendung von innerHTML besser als bei häufigen Dom-Operationen (es gibt HTML-Parser, die speziell in C oder C geschrieben sind). Schreiben Sie zuerst den HTML-Code der Seite und rufen Sie dann innerHTML einmal auf, anstatt innerHTML wiederholt aufzurufen.

2. Beim Löschen von Knoten mit innerHTML='' kann es in einigen Fällen zu Speicherproblemen kommen. Beispiel: Es gibt viele andere Elemente unterhalb des div und jedes Element ist an einen Ereignishandler gebunden. Zu diesem Zeitpunkt entfernt innerHTML lediglich das aktuelle Element aus dem Knotenbaum, diese Ereignishandler belegen jedoch weiterhin Speicher.

js-Operationsstil

Ändern Sie den Stil eines Elements mithilfe des className-Attributs.

(Klasse ist ein reserviertes Wort in JavaScript, Attribute können keine Schlüsselwörter oder reservierten Wörter verwenden, daher wird es zu Klassenname) Der Effekt des Ein- und Ausschaltens des Lichts auf der Webseite.

Sie können den Stil eines Elements this.style="background-color:Red" nicht ändern.

Um die Stilattribute einzeln zu ändern, verwenden Sie „style.property name“. Beachten Sie, dass die Attributnamen in CSS unterschiedlich sein können, wenn sie in JavaScript ausgeführt werden. Der Schwerpunkt liegt auf den Attributen, deren Attributnamen „-“ enthalten, da „-“ nicht als Attribut- oder Klassennamen in JavaScript verwendet werden kann.

Bei Betrieb im Float-Stil

IE:obj.style.styleFloat=‘right’;

Andere Browser: obj.style.cssFloat=‘right’;

Formularobjekt

Häufig verwendet: click(), focus(), blur(); // Entspricht dem Auslösen der Klick-, Fokus- und Fokusverlustereignisse eines Elements durch ein Programm.

Das Formularobjekt ist das Dom-Objekt des Formulars.

Methode: subscribe() sendet das Formular, aber das onsubmit-Ereignis wird nicht ausgelöst.

Implementieren Sie Autopost, das heißt, die Seite wird sofort gesendet, nachdem der Fokus das Steuerelement verlassen hat, und nicht erst, nachdem die Schaltfläche „Senden“ gesendet wurde. Wenn der Cursor das Formular verlässt, wird das Onblur-Ereignis und die Sendemethode des Formulars ausgelöst heißt in onblur.

Nachdem Sie auf „Senden“ geklickt haben, wird das Onsubmit-Ereignis des Formulars ausgelöst. Wenn ein Problem mit den Daten vorliegt, geben Sie „false“ zurück, um die Übermittlung abzubrechen

Das Obige ist mein persönliches Verständnis von JavaScripts DOM. Ich hoffe, es gefällt Ihnen allen.