DOMを動作させるネイティブJSとjQueryの比較まとめ

DOM を操作するネイティブ JS と jQuery の比較をまとめた記事です。必要な方はぜひ参考にしてください。

1. 要素ノードを作成する

1.1 ネイティブJSで要素ノードを作成する

document.createElement("p");

1.2 jQueryで要素ノードを作成する

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

2. テキストノードを作成して追加する

2.1 ネイティブ JS はテキスト ノードを作成します

document.createTextNode("Text Content");

通常、テキスト ノードの作成は、次のような要素ノードの作成と組み合わせて使用​​されます。

3. ノードのコピー

3.1 ネイティブ JS コピー ノード:

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

true と false の違い:

tru​​e: 'e388a4556c0f65e1904146cc1a846beeHello World.

false: 'e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3' のみを複製し、テキスト Hello World を複製しません。

1. 3.2 jQuery コピー ノード

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

   
   

   注: `ID の重複を回避します

4. ノードを挿入します

4.1 ネイティブ JS は、子ノード リストの最後に新しい子ノードを追加します

var newEl = pEl.cloneNode(true);

ネイティブ JS は、既存の子ノードの前に新しい子ノードを挿入しますノードの子ノード:

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

4.2 jQuery では、ネイティブ JS よりもノードを挿入する方法がたくさんあります

一致する要素の子ノード リストの最後にコンテンツを追加します

El.appendChild(newNode);

ターゲット要素の子ノード リストの最後に一致する要素を追加します

El.insertBefore(newNode, targetNode);

一致する要素の子ノード リストの先頭にコンテンツを追加します

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

ターゲット要素の子ノード リストの先頭に一致する要素を追加します

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

一致する要素の前にターゲット コンテンツを追加します

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

一致する要素をターゲットに追加します 要素の前

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

一致する要素の後にターゲット コンテンツを追加します

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

E

一致する要素をターゲット要素に追加します

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

E

5、ノードの削除

ネイティブJSのノードの削除

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

5.2 jQueryのノードの削除

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

6. ノードの置き換え

6.1 ネイティブ JS 置換ノード

El.parentNode.removeChild(El);

注: oldNode はparentEl

の実子ノードでなければなりません 6.2 jQuery 置換ノード

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

7. 属性の設定/属性の取得

7.1 ネイティブ JS 属性の設定/属性の取得

El.repalceChild(newNode, oldNode);

7.2 jQueryの属性設定・属性の取得:

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

まとめ

以上がこの記事の内容です、この記事の内容が皆様の勉強や仕事に少しでもお役に立てれば幸いです。ご質問がある場合は、メッセージを残して連絡してください。