Résumé de comparaison du DOM d'exploitation natif JS et jQuery

Quelques comparaisons et résumés de JS natif et jQuery exploitant le DOM. Je pense qu'il sera utile pour l'étude ou le travail de chacun. Les amis dans le besoin peuvent s'y référer.

1. Créer des nœuds d'éléments

1.1 Créer des nœuds d'éléments avec JS natif

document.createElement("p");

1.2 jQuery crée des nœuds d'éléments

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

2 Créer et ajouter des nœuds de texte

2.1 Créer des nœuds de texte avec JS natif

document.createTextNode("Text Content");

Habituellement, la création de nœuds de texte est utilisée en conjonction avec la création de nœuds d'éléments, tels que :

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

2.2 Créer et ajouter des nœuds de texte avec jQuery :

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

3. >

3.1 Nœud de copie JS natif :

var newEl = pEl.cloneNode(true);

La différence entre vrai et faux :

true : cloner l'intégralité du nœud 'e388a4556c0f65e1904146cc1a846beeHello World.94b3e26ee717c64999d7867364b1b4a3'
false : cloner uniquement 'e388a4556c0f65e1904146cc1a846bee0cba36f12cf561cef14ffa62bcdafa2c', ne clonez pas le texte Hello World.

2. 
   

3.2 jQuery Copy Node

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

Remarque : évitez `ID lors du clonage de nœuds Répétez

4. Insérer un nœud

4.1 Native JS ajoute un nouveau nœud enfant à la fin de la liste des nœuds enfants

El.appendChild(newNode);

Native JS insère un nouveau nœud enfant avant le nœud enfant existant du nœud :

El.insertBefore(newNode, targetNode);

4.2 Dans jQuery, il existe bien plus de façons d'insérer des nœuds que dans JS natif

Ajouter du contenu à la fin de la liste des nœuds enfants de l'élément correspondant

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

Ajouter l'élément correspondant à la fin de la liste des nœuds enfants de l'élément cible

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

Ajouter du contenu au début de la liste des nœuds enfants de l'élément correspondant

Ajouter l'élément correspondant au début de la liste des nœuds enfants de l'élément cible

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

Ajouter le contenu cible avant l'élément correspondant

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

Mettre les éléments correspondants sont ajoutés avant l'élément cible

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

Ajouter le contenu cible après l'élément cible élément correspondant

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

Ajouter l'élément correspondant après l'élément cible

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

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

Suppression de nœuds

5.1 Suppression de nœuds JS natif

El.parentNode.removeChild(El);

5.2 Suppression de nœuds jQuery

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

6. Remplacer le nœud

6.1 Nœud de remplacement JS natif

Remarque : oldNode doit être un véritable nœud enfant de parentEl

El.repalceChild(newNode, oldNode);

6.2 nœud de remplacement jQuery

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

Définir les attributs/obtenir les attributs

7.1 Attributs de jeu JS natif/obtenir des attributs

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

7.2 Propriétés de jeu jQuery/ obtenir des propriétés :

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

Résumé

Ce qui précède est l'intégralité du contenu de cet article. J'espère que le contenu de cet article pourra apporter de l'aide. les études ou le travail de chacun. Si vous avez des questions, vous pouvez laisser un message pour communiquer.