徹底解説！jQueryにおける .prop() と .attr() の違い (完全版)

JavaScript、jQuery、DOMにおける .prop() と .attr() の違い

jQuery の $.prop() と $.attr() は、DOM 要素の属性を取得・設定するために使用されます。一見似ているように見えますが、それぞれ異なる役割を果たします。

それぞれの役割

• $.prop(): DOM プロパティを取得・設定します。これは、要素の現在の状態を表します。
• $.attr(): HTML 属性を取得・設定します。これは、要素のマークアップに定義されている値を表します。

具体的な違い

例

// チェックボックスの選択状態を取得
const isChecked = $('input[type="checkbox"]').prop('checked');

// チェックボックスを選択状態にする
$('input[type="checkbox"]').prop('checked', true);

// 入力欄の name 属性を取得
const name = $('input[type="text"]').attr('name');

// 入力欄の name 属性を変更
$('input[type="text"]').attr('name', 'new-name');

一般的には、以下のルールに従います。

• DOM プロパティを取得・変更したい場合は $.prop() を使う

補足

• いくつかの属性は、DOM プロパティと HTML 属性の両方が存在します。
• jQuery 1.6 以前は、$.attr() は場合によって DOM プロパティを取得することもありましたが、現在は $.prop() を使うべきです。

// チェックボックスの選択状態を取得
const isChecked = $('input[type="checkbox"]').prop('checked');

// チェックボックスを選択状態にする
$('input[type="checkbox"]').prop('checked', true);

// 入力欄の name 属性を取得
const name = $('input[type="text"]').attr('name');

// 入力欄の name 属性を変更
$('input[type="text"]').attr('name', 'new-name');

// `<select>` 要素の選択されたオプションの値を取得
const selectedValue = $('select').prop('value');

// `<select>` 要素の選択されたオプションを変更
$('select').prop('value', 'new-value');

// 画像の alt 属性を取得
const altText = $('img').attr('alt');

// 画像の alt 属性を変更
$('img').attr('alt', 'new-alt-text');

// 要素の disabled 属性を取得
const isDisabled = $('input').prop('disabled');

// 要素を無効にする
$('input').prop('disabled', true);

チェックボックスの選択状態を取得・変更

// チェックボックスの選択状態を取得
const isChecked = $('input[type="checkbox"]').prop('checked');

// チェックボックスを選択状態にする
$('input[type="checkbox"]').prop('checked', true);

入力欄の name 属性を取得・変更

// 入力欄の name 属性を取得
const name = $('input[type="text"]').attr('name');

// 入力欄の name 属性を変更
$('input[type="text"]').attr('name', 'new-name');

その他

上記の例以外にも、$.prop() と $.attr() はさまざまな要素や属性で使用できます。

.prop() と .attr() 以外の方法

ネイティブ JavaScript

// チェックボックスの選択状態を取得
const isChecked = document.getElementById('checkbox').checked;

// チェックボックスを選択状態にする
document.getElementById('checkbox').checked = true;

// 入力欄の name 属性を取得
const name = document.getElementById('input').name;

// 入力欄の name 属性を変更
document.getElementById('input').name = 'new-name';

これらのライブラリは、独自の API を提供して、DOM 要素の属性を取得・設定することができます。

• jQuery を使用している場合は、.prop() と .attr() を使うのが最も簡単です。
• ネイティブ JavaScript を使用している場合は、ネイティブの方法を使うことができます。
• 特定の機能が必要な場合は、その機能を提供するライブラリを使うことができます。