1. Knoten erstellen:
Knoten sind die Grundlage der DOM-Struktur. Knoten sind ein sehr weit gefasstes Konzept, das Elemente, Attribute, Texte, Dokumente und Kommentare umfasst. Aber in der tatsächlichen Entwicklung, um Inhalte dynamisch zu erstellen, umfassen die Hauptbetriebsknoten Elemente, Attribute und Text.
1. Anforderungen: Erstellen Sie ein h1-Tag und fügen Sie es dem DOM-Knotenbaum als untergeordneten Knoten des div-Elements hinzu.
2. Die Grundidee ist: Erstellen Sie zuerst ein h1-Elementobjekt und fügen Sie es dann dem Dokument hinzu.
3. Es folgen zwei Implementierungsmethoden:
// jQuery方式 var $h1 = $("<h1 title='创建节点' class='head'>jQuery与JavaScript创建节点比较</h1>"); $("div").append($h1);
//JavaScript方式 var div = document.getElementById("div1"); var h1 = document.createElement("h1");//创建h1对象 h1.setAttribute("title","创建节点");//为h1对象创建属性节点,并设置属性值 h1.setAttribute("class","head");//为h1对象成交价属性节点class,并设置属性值 var txt = document.createTextNode("jQuery与JavaScript创建节点比较"); h1.appendChild(txt);//将文本增加到元素节点中 div.appendChild(h1);//把创建的h1对象添加到div中
4. Vergleich der beiden Methoden:
1) Code-Eingabe: Das Erstellen von Elementknoten mit jQuery ist einfach und kann mit nur zwei Codezeilen schnell implementiert werden. Die JavaScript-Implementierung ist umständlich. Benutzer müssen Elementknoten und Textknoten separat erstellen, dann Schritt für Schritt Textknoten zu Elementknoten hinzufügen und sie schließlich zum DOM-Strukturbaum hinzufügen.
2) Analyse aus Ausführungsperspektive: Im Safari-Browser ist die JavaScript-Implementierung mehr als 80-mal schneller als die jQuery-Implementierung, und im IE-Browser, der die langsamste Ausführungsgeschwindigkeit aufweist, beträgt der Unterschied zwischen zwei ist mehr als das Zehnfache