こんにちは、ライターのマサトです！
今回は、jQueryから任意の要素にある属性を取得・変更・設定などができる「attr()」について学習をしましょう！
この記事では、
- 「attr()」とは？
- id属性を取得・変更してみよう
- class属性を設定してみよう
- 複数の属性を設定する
- 「removeAttr()」で属性を削除する
- 「attr()」と「prop()」の違いとは？
などの基本的な内容から、応用的な使い方に関しても解説していきます。
この記事で、「attr()」メソッドをしっかり学習して自分のスキルアップを目指しましょう！
「attr()」とは？
それでは、まず最初に「attr()」メソッドの基本的な知識から学習を進めていきましょう！
「attr()」は、HTML要素の属性を取得したり設定することができるメソッドになります。ここで「属性」についておさらいしておきましょう！
例えば、次のHTML要素を見てください。
<a class="link" href="##">これはリンクです</a>
aタグが配置されているわけですが、このタグの中にある「class」「href」といったものが属性になります。
そして、「attr()」メソッドを使うことでjQueryからこの属性をいろいろ操作することができるようになります。
本記事で「attr()」メソッドについて、さまざまな活用法を解説していきますのでぜひ参考にしてみてください！
id属性を取得・変更してみよう
ここからは「attr()」メソッドを実際に活用したプログラミングを学習していきましょう！
まずは基本となる属性の「取得・変更」を行ってみます。記述方法としては、【 対象要素.attr( 属性, （変更する値） ) 】のように引数へ任意の属性を指定します。
また、属性を変更する場合のみ第2引数へ変更したい値を指定するわけです。
次のサンプル例を見てください。
<body>
<p id="sample">こんにちは</p>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
const result = $('p').attr('id');
console.log(result);
});
</script>
</body>
実行結果
sample
この例では、id属性が付与されたp要素が配置されていますね。このp要素に対して「attr(‘id’)」と記述することで、id属性の値を取得することができるわけです。
実行結果を見ると、id属性値「sample」がしっかりと出力されています。また、次のように記述することで属性を変更することも可能です！
<body>
<p id="sample">こんにちは</p>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$('p').attr('id', 'text');
const result = $('p').attr('id');
console.log(result);
});
</script>
</body>
実行結果
<p id="text">こんにちは</p>
この例では先ほどと同じp要素が配置されています。
そこで、今度は「attr(‘id’, ‘text’)」のように記述することで、id属性値を「text」に変更しているわけです。もともと設定されていたid属性値「sample」はattr()によって上書きされるので、新しく「text」という値に固定されます。
class属性を設定してみよう
さて、attr()を使って属性の「取得・変更」を見てきましたが、今度は属性の「設定」について学んでいきましょう！
これまでのサンプルコードは、もともと「id属性」が付与されている要素でした。実は「attr()」メソッドを使うと、そもそも属性が付与されていない要素に対して好きな属性を付与することが出来るのです。
次のサンプル例を見てください！
<body>
<p>こんにちは</p>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
const result = $('p').attr('id', 'text');
console.log( result[0] );
</script>
</body>
実行結果
<p id="text">こんにちは</p>
この例では、一切の属性が付与されていないp要素が配置されています。
そしてこのp要素に対して「attr(‘id’, ‘text’)」のように記述すると、p要素にid属性が付与されるのです。これは実行結果を見ると分かりますが、id属性が新しく付与されているのが確認できますね。
記述方法は属性を変更する時と同じなので、ぜひ覚えておくようにしましょう！
複数の属性を設定する
これまでは1つの属性を設定してきたわけですが、「attr()」は一度に複数の属性を設定することもできます。
記述方法としては【 対象要素.attr( { 属性:’値’, 属性:’値’, 属性:’値’,・・・ } ) 】のように、{ }で複数の属性を囲みます。
次のサンプル例を見てください！
<body>
<input>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
const result = $('input').attr({
id: 'text',
class: 'form',
type: 'checkbox',
value: 'one',
checked: true
});
console.log( result[0] );
</script>
</body>
実行結果
<input id="text" class="form" type="checkbox" value="one" checked="checked">
この例では、何の属性も付与されていない「inputタグ」が配置されています。
このinput要素に対して、「id / class / type / value / checked」の属性をattr()を使って一度に設定していますね。このような記述で、複数の属性を設定できることは実行結果からも分かります。
ちなみに、attr()の引数に{ }で囲むということはオブジェクト形式で属性を付与するということになるので覚えておきましょう！
「removeAttr()」で属性を削除する
「attr()」メソッドで属性の取得・設定・変更を学習してきましたが、今度は属性の「削除」について見ていきましょう！
「attr()」を使って設定や変更を行った属性を削除するのに、「attr()」メソッドでは適した機能が用意されていません。そこで、jQueryが標準で用意している「removeAttr()」メソッドを使いましょう！
次のサンプル例を見てください！
<body>
<p class="text">こんにちは</p>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
const result = $('p').removeAttr('class');
console.log( result[0] );
</script>
</body>
実行結果
<p>こんにちは</p>
この例では、class属性が付与されたp要素が配置されていますね。
このp要素に対して、「removeAttr(‘class’)」のように記述することでもともと設定されていたclass属性を削除できるのです。もちろん、id属性やname属性などさまざまな属性を指定して削除することも可能です。
削除したあとは実行結果を見ても分かるように「属性」は無くなっていますね。「attr()」と「removeAttr()」はよくセットで使われるので、合わせて覚えておきましょう！
「attr()」と「prop()」の違いとは？
さて、これまで「attr()」メソッドについてのさまざまな使い方を見てきました。
しかしながら、jQueryにはよく似たメソッドとして「prop()」もあります。
次のサンプル例を見てみましょう！
<body>
<input type="button" value="ボタン">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
const result1 = $('input').attr('type');
const result2 = $('input').prop('type');
console.log( 'attr：' + result1 );
console.log( 'prop：' + result2 );
</script>
</body>
実行結果
attr：button prop：button
この例では、input要素で作ったボタンが配置されています。このinput要素に対して、「attr()」「prop()」それぞれで「type」属性を取得しているのが分かりますね。
しかし、実行結果を見ると…どちらのメソッドでも取得した結果は同じになっています。さて、「attr()」と「prop()」は一体何が違うのでしょうか？
この疑問を解決するには、「checked / disabled」属性のプロパティを取得するとよく分かるのでご紹介します！
checked / disabledについて
それでは、よくフォーム要素などで使われる「checked / disabled」を使って、「attr()」「prop()」の違いを見ていきましょう！
一般的に「checked / disabled」などの属性プロパティは、「値」を指定せずにそのままHTML要素に記述されます。そこで、「attr() / prop()」を使って「値」を取得してみるとどうなるかやってみましょう！
次のサンプル例を見てください！
<body>
<button class="btn1">ボタン１</button>
<button class="btn2" disabled>ボタン１</button>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
const result1 = $('.btn1').attr('disabled');
const result2 = $('.btn2').attr('disabled');
const result3 = $('.btn1').prop('disabled');
const result4 = $('.btn2').prop('disabled');
console.log( result1 );
console.log( result2 );
console.log( result3 );
console.log( result4 );
</script>
</body>
実行結果
undefined disabled false true
この例では、「disabled」が付与されたbutton要素と付与されていないものが配置されています。
そして、それぞれのbutton要素の「disabled」属性を「attr() / prop()」を使って取得しているのが分かりますね。実行結果を見ると面白い結果が分かります！
「attr()」では、「disabled」が付与されていないと認識できずに「undefined」になっていますね。また、「prop()」では「disabled」の有無によって「true / false」が取得できるようになっています。
つまり、「attr()」はあくまで「属性が付与されているかどうか？」をチェックしているだけにすぎません。そして、「prop()」は「disabled」の現在の状態を確認しているというわけです。
もっと詳しく検証するために、今度は「checked」を使ってみましょう！
<body>
<input type="checkbox">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$('input').click(function() {
const check = $(this).attr('checked');
console.log( check );
})
</script>
</body>
実行結果
undefined undefined undefined ・ ・ ・
この例では、チェックボックスのinput要素が配置されています。
そして、jQueryからチェックボックスをクリックするたびに「attr()」でchecked属性を取得するようにしています。実行結果を見ると分かりますが、何度クリックしても「undefined」ばかりですね。これは、最初に配置されているinput要素に「checked」属性が付与されていないからです。
なぜなら、「attr()」はあくまで要素に「checked」属性が付与されているかどうか？…だけしかチェックしていないからでしたね。これが「prop()」であればクリックするたびに「true / false」が取得できるわけです。
この「prop()」を使った検証・比較については、次の記事で詳しく解説しているのでぜひ参考にしてみてください！
まとめ
今回は、jQueryで要素の属性を操作できる「attr()」について学習をしました！
最後に、もう一度おさらいをしておきましょう！
- 「attr()」メソッドは、対象となる要素の属性を取得・変更・設定することができる
- 属性の削除には「removeAttr()」を使う
- 「attr()」と「prop()」の違いは属性の状態を確認できるかどうか？ということ
上記内容を踏まえて、ぜひ自分でもプログラムに取り入れながら積極的に活用できるように頑張りましょう！
