DOM を操作するネイティブ JS と jQuery の比較をまとめた記事です。必要な方はぜひ参考にしてください。
1. 要素ノードを作成する
1.1 ネイティブJSで要素ノードを作成する
1 | document.createElement( "p" );
|
ログイン後にコピー
1.2 jQueryで要素ノードを作成する
2. テキストノードを作成して追加する
2.1 ネイティブ JS はテキスト ノードを作成します
1 | document.createTextNode( "Text Content" );
|
ログイン後にコピー
通常、テキスト ノードの作成は、次のような要素ノードの作成と組み合わせて使用されます。
3. ノードのコピー
3.1 ネイティブ JS コピー ノード:
1 2 3 | var textEl = document.createTextNode( "Hello World." );
var pEl = document.createElement( "p" );
pEl.appendChild(textEl);
|
ログイン後にコピー
true と false の違い: true: '
Hello World.
false: '
' のみを複製し、テキスト Hello World を複製しません。
- 3.2 jQuery コピー ノード
1 | var $p = $(& #39;<p>Hello World.</p>');
|
ログイン後にコピー
注: `ID の重複を回避します
4. ノードを挿入します
4.1 ネイティブ JS は、子ノード リストの最後に新しい子ノードを追加します
1 | var newEl = pEl.cloneNode( true );
|
ログイン後にコピー
ネイティブ JS は、既存の子ノードの前に新しい子ノードを挿入しますノードの子ノード: 1 | $newEl = $(& #39;#pEl').clone(true);
|
ログイン後にコピー
4.2 jQuery では、ネイティブ JS よりもノードを挿入する方法がたくさんあります
一致する要素の子ノード リストの最後にコンテンツを追加します
ターゲット要素の子ノード リストの最後に一致する要素を追加します
1 | El.insertBefore(newNode, targetNode);
|
ログイン後にコピー
一致する要素の子ノード リストの先頭にコンテンツを追加します
1 | $(& #39;#El').append('<p>Hello World.</p>');
|
ログイン後にコピー
ターゲット要素の子ノード リストの先頭に一致する要素を追加します
1 | $(& #39;<p>Hello World.</p>').appendTo('#El');
|
ログイン後にコピー
一致する要素の前にターゲット コンテンツを追加します
1 | $(& #39;#El').prepend('<p>Hello World.</p>');
|
ログイン後にコピー
一致する要素をターゲットに追加します 要素の前 1 | $(& #39;<p>Hello World.</p>').prependTo('#El');
|
ログイン後にコピー
一致する要素の後にターゲット コンテンツを追加します
1 | $(& #39;#El').before('<p>Hello World.</p>');
|
ログイン後にコピー
E
一致する要素をターゲット要素に追加します
1 | $(& #39;<p>Hello World.</p>').insertBefore('#El');
|
ログイン後にコピー
E
5、ノードの削除
ネイティブJSのノードの削除
1 | <strong>$(& #39;#El').after('<p>Hello World.</p>');</strong>
|
ログイン後にコピー
5.2 jQueryのノードの削除1 | $(& #39;<p>Hello World.</p>').insertAfter('#El');
|
ログイン後にコピー
6. ノードの置き換え
6.1 ネイティブ JS 置換ノード
1 | <strong>El.parentNode.removeChild(El);</strong>
|
ログイン後にコピー
注: oldNode はparentEl の実子ノードでなければなりません 6.2 jQuery 置換ノード
1 | <strong>$(& #39;#El').remove();</strong>
|
ログイン後にコピー
7. 属性の設定/属性の取得
7.1 ネイティブ JS 属性の設定/属性の取得
1 | <strong>El.repalceChild(newNode, oldNode);</strong>
|
ログイン後にコピー
7.2 jQueryの属性設定・属性の取得:
1 | $(& #39;p').replaceWith('<p>Hello World.</p>');
|
ログイン後にコピー
まとめ
以上がこの記事の内容です、この記事の内容が皆様の勉強や仕事に少しでもお役に立てれば幸いです。ご質問がある場合は、メッセージを残して連絡してください。