jqueryとdomを変換する方法

jQuery と DOM は、フロントエンド開発において非常に重要で広く使用されている 2 つのテクノロジです。複雑なインタラクティブ効果を実装したり、ページ要素を操作したりする場合、多くの場合、この 2 つの間の変換を明確に理解し、習得する必要があります。この記事では、jQueryとDOM間の変換方法と具体的な実践事例を紹介します。

1. jQuery と DOM の概念的な違い

jQuery と DOM の変換について話す前に、まずそれらの概念を確認しましょう。

1. jQuery: jQuery は、軽量、高速、簡潔な JavaScript ライブラリです。これにより、開発者はより少ないコードでより多くの操作を完了できるようになり、さまざまなブラウザと互換性のある多くのカプセル化されたツール機能が提供されます。
2. DOM: ドキュメント オブジェクト モデル (ドキュメント オブジェクト モデル) は、HTML、XML、またはその他のドキュメントをツリー構造として表現し、その構造にアクセスして更新および操作する方法を提供する、ブラウザーおよびプラットフォームに依存しない API です。文書の内容とそのスタイル。

簡単に言えば、jQuery は JavaScript ライブラリであり、DOM は API です。 jQuery は主に DOM の一部の操作をカプセル化し、より便利な構文と関数を提供します。この 2 つは互いに無関係ではありませんが、同じ意味で使用できます。

2. DOM オブジェクトを jQuery オブジェクトに変換する

jQuery を使用して DOM オブジェクトを操作する必要がある場合、まず DOM オブジェクトを jQuery オブジェクトに変換する必要があります。

変換メソッドは主に jQuery の $() 関数を使用します。この関数はセレクター式、DOM 要素、HTML 文字列、関数などを含むさまざまなタイプのパラメーターを受け取ります。

DOM オブジェクトを jQuery オブジェクトに変換する方法は、DOM オブジェクトをパラメーターとして $() 関数に渡すことです。たとえば、ID「test」を持つ div 要素を jQuery オブジェクトに変換する方法は次のとおりです。

var testDiv = document.getElementById('test');
var $testDiv = $(testDiv);

上記のコードでは、最初に document.getElementById() を使用します。 "test" の div 要素である id を取得するメソッドは、DOM オブジェクトを $() 関数にパラメータとして渡し、jQuery オブジェクト $testDiv を生成します。

jQuery に付属の $() 関数を使用して DOM 要素を直接選択することもできます。たとえば、次のとおりです。

var $testDiv = $('#test');

上記のコードでは、次のパラメータを使用します。 $() 関数 ID「test」を持つ DOM 要素を選択し、jQuery オブジェクトに変換するセレクター式「#test」です。どちらのメソッドも DOM オブジェクトを jQuery オブジェクトに変換し、対応する操作を実行できます。

3. jQuery オブジェクトを DOM オブジェクトに変換する

同様に、ネイティブ DOM 操作を使用して jQuery オブジェクトを操作する必要がある場合は、jQuery オブジェクトを DOM オブジェクトに変換する必要があります。

jQuery では、get() メソッド、toArray() メソッド、配列の構造化などを使用して、jQuery オブジェクトを DOM オブジェクトに変換できます。

1. get() メソッドを使用して jQuery オブジェクトを DOM オブジェクトに変換する

get()このメソッドは、jQuery で非常に一般的に使用されるメソッドです。 jQuery オブジェクト メソッドを変換します。これは、一致する要素の DOM 要素を取得するのに役立ちます。パラメーターが渡されない場合、get() メソッドは、一致するすべての要素を配列の形式で返し、対応するインデックスを提供します。インデックスが渡される場合、get() このメソッドはインデックスに対応する DOM 要素を返します。

たとえば、<div id="test"> 要素を DOM オブジェクトに変換する方法は次のとおりです。 <pre class='brush:php;toolbar:false;'>var testDiv = $('#test').get(0);</pre><p>上記のコードでは<code>$() 関数は、ID が「test」の div 要素を取得し、get() メソッドを呼び出して jQuery オブジェクトを DOM オブジェクトに変換します。

2. toArray() メソッドを使用して jQuery オブジェクトを DOM オブジェクトに変換します。

toArray() メソッドは、jQuery オブジェクトを DOM オブジェクトに変換することもできます。配列として返されます。例:

var testDivArray = $('#test').toArray();
var testDiv = testDivArray[0];

上記のコードでは、toArray() メソッドを使用して、ID が「test」の div 要素を DOM オブジェクトの配列に変換し、最初の要素を取り出します。要素を DOM オブジェクトとして使用します。

3. 配列の構造化を使用して jQuery オブジェクトを DOM オブジェクトに変換する

ES6 には、配列を構造体から単一の変数に分解したり、配列を単一の変数に分解したりするための構文が用意されています。複数の変数。構造化配列構文を使用して、jQuery オブジェクトを DOM オブジェクトに変換することもできます。例:

var [testDiv] = $('#test');

上記のコードでは、構造化配列構文を使用して、ID が「test」の div 要素を DOM オブジェクトに変換します。

4. 実践的なケース

最後に、jQuery と DOM を使用して相互に変換し、対応する操作を実行する簡単な実践的なケースを紹介します。

HTML ファイルでは、まずボタン要素と div 要素を定義します。

<button id="clickme">Click me</button>
<div id="content">The content to be changed</div>

次に、JavaScript ファイルで、jQuery を使用してボタン要素を jQuery オブジェクトに変換し、 button クリックイベントをバインドします。ボタンがクリックされると、DOM を使用して div 要素を DOM オブジェクトに変換し、innerHTML 属性を使用して div 要素のコンテンツを変更します。

$(document).ready(function() {
  var $clickMe = $('#clickme');
  var contentDiv = document.getElementById('content');

  $clickMe.on('click', function() {
    contentDiv.innerHTML = 'The content has been changed';
  });
});

上記のコードでは、まず $() 関数を使用して ID が「clickme」のボタン要素を jQuery オブジェクトに変換し、次に on( ) メソッド クリック イベントをバインドし、コールバック関数で document.getElementById() メソッドを使用して、ID が「content」の div 要素を DOM オブジェクトに変換し、最後に innerHTML 属性を使用して div 要素の内容を変更します。

要約

この記事では主にjQueryとDOM間の変換方法を説明し、具体的な実践例を示します。フロントエンド開発では、jQuery と DOM は互いに密接に関連している 2 つの非常に一般的に使用されるテクノロジであり、その変換方法をマスターすることで、開発にさらなる利便性と柔軟性をもたらすことができます。