Vergleichszusammenfassung des nativen JS- und jQuery-Betriebs-DOM

Einige Vergleiche und Zusammenfassungen von nativem JS und jQuery, die DOM betreiben. Ich glaube, dass es für alle, die es brauchen, hilfreich sein wird, einen Blick darauf zu werfen.

1. Elementknoten erstellen

1.1 Elementknoten mit nativem JS erstellen

document.createElement("p");

1.2 jQuery erstellt Elementknoten

$(&#39;<p></p>&#39;);`

2. Erstellen und fügen Sie Textknoten hinzu

2.1 Textknoten mit nativem JS erstellen

document.createTextNode("Text Content");

Normalerweise wird das Erstellen von Textknoten in Verbindung mit dem Erstellen von Elementknoten verwendet, wie zum Beispiel:

var textEl = document.createTextNode("Hello World.");
var pEl = document.createElement("p");
pEl.appendChild(textEl);

2.2 Textknoten mit jQuery erstellen und hinzufügen:

var $p = $(&#39;<p>Hello World.</p>&#39;);

3. Knoten kopieren

3.1 Native JS-Kopierknoten:

var newEl = pEl.cloneNode(true);

Der Unterschied zwischen wahr und falsch:

1. true: Klonen Sie den gesamten Knoten „e388a4556c0f65e1904146cc1a846beeHello World.94b3e26ee717c64999d7867364b1b4a3“

2. falsch: Klonen Sie nur „e388a4556c0f65e1904146cc1a846bee0cba36f12cf561cef14ffa62bcdafa2c', klonen Sie den Text nicht. Hallo Welt.
   

3.2 jQuery Copy Node

$newEl = $('#pEl').clone(true);

Hinweis: Vermeiden Sie beim Klonen von Knoten die ID. Wiederholen Sie

4. Knoten einfügen

4.1 Native JS fügt a hinzu neuer untergeordneter Knoten am Ende der untergeordneten Knotenliste

El.appendChild(newNode);

Native JS fügt einen neuen untergeordneten Knoten vor dem vorhandenen untergeordneten Knoten des Knotens ein:

El.insertBefore(newNode, targetNode);

4.2 In jQuery gibt es viel mehr Möglichkeiten zum Einfügen von Knoten als in nativem JS

Fügen Sie Inhalte am Ende der Liste der untergeordneten Knoten des übereinstimmenden Elements hinzu

$(&#39;#El&#39;).append(&#39;<p>Hello World.</p>&#39;);

Fügen Sie das passende Element am Ende der Liste der untergeordneten Knoten des Zielelements hinzu

$(&#39;<p>Hello World.</p>&#39;).appendTo(&#39;#El&#39;);

Fügen Sie Inhalt am Anfang der Liste der untergeordneten Knoten des übereinstimmenden Elements hinzu

$(&#39;#El&#39;).prepend(&#39;<p>Hello World.</p>&#39;);

Fügen Sie das übereinstimmende Element am Anfang der Liste der untergeordneten Knoten des Zielelements hinzu

$(&#39;<p>Hello World.</p>&#39;).prependTo(&#39;#El&#39;);

Fügen Sie den Zielinhalt vor dem passenden Element hinzu

$(&#39;#El&#39;).before(&#39;<p>Hello World.</p>&#39;);

Fügen Sie das passende Element vor dem Zielelement hinzu

$(&#39;<p>Hello World.</p>&#39;).insertBefore(&#39;#El&#39;);

Fügen Sie den Zielinhalt nach dem hinzu passendes Element

$(&#39;#El&#39;).after(&#39;<p>Hello World.</p>&#39;);

Fügen Sie das passende Element nach dem Zielelement hinzu

$(&#39;<p>Hello World.</p>&#39;).insertAfter(&#39;#El&#39;);

Knoten löschen

5.1 Native JS-Knoten löschen

El.parentNode.removeChild(El);

5.2 jQuery-Knoten löschen

$('#El').remove();

6. Knoten ersetzen

6.1 Native JS-Ersatzknoten

El.repalceChild(newNode, oldNode);

Hinweis: oldNode muss ein echter untergeordneter Knoten von parentEl sein

6.2 jQuery-Ersatzknoten

$(&#39;p&#39;).replaceWith(&#39;<p>Hello World.</p>&#39;);

7. Attribute festlegen/Attribute abrufen

7.1 Native JS-Set-Attribute/Get-Attribute

imgEl.setAttribute("title", "logo");
imgEl.getAttribute("title");
checkboxEl.checked = true;
checkboxEl.checked;

7.2 jQuery-Set-Eigenschaften/ Eigenschaften abrufen:

$("#logo").attr({"title": "logo"});
$("#logo").attr("title");
$("#checkbox").prop({"checked": true});
$("#checkbox").prop("checked");

Zusammenfassung

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass der Inhalt dieses Artikels hilfreich sein kann Jedermanns Studium oder Arbeit. Wenn Sie Fragen haben, können Sie eine Nachricht hinterlassen.