jQuery-DOM操作

JQueryは、DOMを効率的な方法で操作するメソッドを提供します。要素の属性の値を変更したり、段落や部門からHTMLコードを抽出したりするために、大きなコードを記述する必要はありません。

JQueryは、ゲッターとして機能する.attr（）、l（）、. val（）などのメソッドを提供し、後で使用するためにDOM要素から情報を取得します。

コンテンツ操作

html（）*メソッドは、最初に一致した要素のhtmlコンテンツ（innerHTML）を取得します。

ここにメソッドの構文があります-

selectorl( )

例

以下は、l（）および.text（val）メソッドを使用する例です。ここでl（）はオブジェクトからHTMLコンテンツを取得し、次に.text（val）メソッドは渡されたパラメータを使用してオブジェクトの値を設定します-

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript"
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>

      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("div").click(function () {
               var content = $(this)l();
               $("#result").text( content );
            });
         });
      </script>

      <style>
         #division{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
      </style>
   </head>

   <body>
      <p>Click on the square below:</p>
      <span id = "result"> </span>

      <div id = "division" style = "background-color:blue;">
         This is Blue Square!!
      </div>
   </body>
</html>

これにより、次の結果が生成されます–

DOM要素の置換

完全なDOM要素を指定されたHTMLまたはDOM要素で置き換えることができます。 * replaceWith（content）*メソッドはこの目的に非常に役立ちます。

ここにメソッドの構文があります-

selector.replaceWith( content )

ここで、コンテンツは元の要素の代わりに欲しいものです。これは、HTMLまたは単純なテキストです。

例

以下は、分割要素を「<h1> JQuery is Great </h1>」に置き換える例です-

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript"
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>

      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("div").click(function () {
               $(this).replaceWith("<h1>JQuery is Great</h1>");
            });
         });
      </script>

      <style>
         #division{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
      </style>
   </head>

   <body>
      <p>Click on the square below:</p>
      <span id = "result"> </span>

      <div id = "division" style = "background-color:blue;">
         This is Blue Square!!
      </div>
   </body>
</html>

これにより、次の結果が生成されます–

DOM要素の削除

ドキュメントから1つ以上のDOM要素を削除したい場合があります。 JQueryは、状況を処理する2つのメソッドを提供します。

empty（）メソッドは一致した要素のセットからすべての子ノードを削除しますが、メソッド remove（expr）*メソッドはすべての一致した要素をDOMから削除します。

ここにメソッドの構文があります-

selector.remove( [ expr ])

or

selector.empty( )

オプションのパラメータ_expr_を渡して、削除する要素のセットをフィルタリングできます。

例

以下は、クリックされるとすぐに要素が削除される例です-

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript"
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>

      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("div").click(function () {
               $(this).remove( );
            });
         });
      </script>

      <style>
         .div{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
      </style>
   </head>

   <body>
      <p>Click on any square below:</p>
      <span id = "result"> </span>

      <div class = "div" style = "background-color:blue;"></div>
      <div class = "div" style = "background-color:green;"></div>
      <div class = "div" style = "background-color:red;"></div>
   </body>
</html>

これにより、次の結果が生成されます–

DOM要素の挿入

既存のドキュメントに新しい1つ以上のDOM要素を挿入したい場合があります。 JQueryは、さまざまな場所に要素を挿入するためのさまざまなメソッドを提供します。

after（content）メソッドは、一致する各要素の後にコンテンツを挿入しますが、 before（content）*メソッドは、一致する各要素の前にコンテンツを挿入します。

ここにメソッドの構文があります-

selector.after( content )

or

selector.before( content )

ここにコンテンツが挿入されます。これは、HTMLまたは単純なテキストです。

例

以下は、クリックされた要素の直前に<div>要素が挿入される例です-

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript"
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>

      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("div").click(function () {
               $(this).before('<div class="div"></div>' );
            });
         });
      </script>

      <style>
         .div{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
      </style>
   </head>

   <body>
      <p>Click on any square below:</p>
      <span id = "result"> </span>

      <div class = "div" style = "background-color:blue;"></div>
      <div class = "div" style = "background-color:green;"></div>
      <div class = "div" style = "background-color:red;"></div>
   </body>
</html>

これにより、次の結果が生成されます–

DOM操作方法

次の表は、DOM要素を操作するために使用できるすべてのメソッドを示しています-

Sr.No.	Method & Description
1	after( content ) 一致した各要素の後にコンテンツを挿入します。
2	append( content ) 一致したすべての要素の内側にコンテンツを追加します。
3	appendTo( selector ) 一致したすべての要素を別の指定された一連の要素に追加します。
4	before( content ) 一致した各要素の前にコンテンツを挿入します。
5	clone( bool ) 一致したDOM要素とそのすべてのイベントハンドラのクローンを作成し、クローンを選択します。
6	clone( ) 一致したDOM要素のクローンを作成し、クローンを選択します。
7	empty( ) 一致した要素のセットからすべての子ノードを削除します。
8	html( val ) 一致したすべての要素のHTMLコンテンツを設定します。
9	html( ) 最初に一致した要素のhtmlコンテンツ（innerHTML）を取得します。
10	insertAfter( selector ) 一致したすべての要素を、指定された別の要素セットの後に挿入します。
11	insertBefore( selector ) 一致したすべての要素を、指定された別の要素セットの前に挿入します。
12	prepend( content ) 一致したすべての要素の内側にコンテンツを追加します。
13	prependTo( selector ) 一致したすべての要素を、指定された別の要素セットの前に追加します。
14	remove( expr ) 一致したすべての要素をDOMから削除します。
15	replaceAll( selector ) 指定したセレクターと一致した要素を、一致した要素に置き換えます。
16	replaceWith( content ) 一致したすべての要素を指定されたHTMLまたはDOM要素で置き換えます。
17	text( val ) 一致したすべての要素のテキストコンテンツを設定します。
18	text( ) 一致したすべての要素の結合されたテキストコンテンツを取得します。
19	wrap( elem ) 一致した各要素を指定された要素でラップします。
20	wrap( html ) 一致した各要素を指定されたHTMLコンテンツでラップします。
21	wrapAll( elem ) 一致したセットのすべての要素を単一のラッパー要素にラップします。
22	wrapAll( html ) 一致したセットのすべての要素を単一のラッパー要素にラップします。
23	wrapInner( elem ) 一致した各要素（テキストノードを含む）の内側の子コンテンツをDOM要素でラップします。
24	wrapInner( html ) 一致した各要素（テキストノードを含む）の内側の子コンテンツをHTML構造でラップします。

Jquery-dom

目次

jQuery-DOM操作

コンテンツ操作

例

DOM要素の置換

例

DOM要素の削除

例

DOM要素の挿入

例

DOM操作方法