jQuery で内容と属性を取得

jQuery は HTML 元素や属性を操作する強力なメソッドを持ちます。

jQuery DOM 操作

jQuery の非常に重要な部分は、DOM を操作する能力です。

jQuery は DOM に関連する一連のメソッドを提供しており、これにより要素や属性へのアクセスと操作が簡単になります。

ヒント：DOM = Document Object Model（ドキュメントオブジェクトモデル）

DOM は HTML または XML ドキュメントにアクセスする標準を定義します：

「W3C ドキュメントオブジェクトモデルはプラットフォームや言語に依存せず、プログラムやスクリプトが動的にドキュメントの内容、構造、およびスタイルにアクセスおよび更新を許可します。」

内容の取得 - text()、html() そして val()

DOM 操作に使用される jQuery の三つのシンプルで実用的なメソッド：

  • text() - 選択された要素のテキスト内容を設定または返します
  • html() - 選択された要素の内容（HTML マークアップを含む）を設定または返します
  • val() - フォームフィールドの値を設定または返します

以下の例では、jQuery text() と html() メソッドを使用して内容を取得する方法を示します：

例

$("#btn1").click(function(){
  alert("テキスト: " + $("#test").text());
});
$("#btn2").click(function(){
  alert("HTML: " + $("#test").html());
});

実際に試してみてください

以下の例では、jQuery val() メソッドを使用して入力フィールドの値を取得する方法を示します：

例

$("#btn1").click(function(){
  alert("値: " + $("#test").val());
});

実際に試してみてください

属性の取得 - attr()

jQuery attr() メソッドは属性値の取得に使用されます。

以下の例では、リンクの href 属性の値を取得する方法を示します：

例

$("button").click(function(){
  alert($("#w3s").attr("href"));
});

実際に試してみてください

次の章では、内容や属性値を設定（変更）する方法について説明します。

jQuery HTML リファレンスマニュアル

jQuery HTML メソッドの完全な内容に関しては、以下のリファレンスマニュアルを訪れてください：