今回の記事は、
- jQueryを使ってクラス名を取得したい
- 素のJavascriptを使った方法も知っておきたい
という方に向けた記事になっています。
この記事の前半では、「jQueryを使ってクラス名を取得する方法」について解説しつつ、後半では「Javascriptとの比較」をご紹介させていただきます。
フリーランス案件を探すならこのエージェント!
転職を考えているならこのエージェント!
attr()メソッドを使ってクラス名を取得する
jQueryでクラス名を取得するには、attr()
メソッドを使用します。
attr()
メソッドの「attr」は「attributes」の略語であり、その意味の通り、HTML要素の属性を取得する際に利用されます。
使い方としてはとてもシンプルで、以下の通り、取得したい属性を引数に指定することで、その属性に設定されている値を取得することができます。
attr()メソッドの基本的な使い方
$("HTML要素").attr("属性")
それでは、実際にattr()
メソッドを使ってクラス名を取得してみましょう。
実装コード
<h1 class="test-header">テストヘッダー</h1>
<script>
const className = $("h1").attr("class")
console.log(className)
</script>
実行結果
=> "test-header"
このように、jQueryオブジェクトであるHTML要素($("p")
)のクラス名を簡単に取得することができます。
また、このattr
がattribute(属性)
の略語であることからも分かる通り、クラス名以外の属性も取得することができます。
実際の開発の中で使用するものはid
属性やname
属性、type
属性などになりますが、これらも基本的な使い方は変わらず、attr()
メソッドの引数に指定してあげれば大丈夫です。
実装コード
<h1 id="test-header">テストヘッダー</h1>
<button type="submit">提出する</button>
<script>
// id属性を取得
const id = $("h1").attr("id")
// type属性を取得
const type = $("button").attr("type")
console.log(id)
console.log(type)
</script>
実行結果
=> "test-header"
=> "submit"
なお、実際の開発でもよく目にするvalue
属性については、専用のval()メソッドが用意されていますので、そちらを使用するようにしましょう。主な使い方については以下の記事で詳しくご紹介していますので、こちらも併せてご覧ください。
今回の記事は、 jQueryをvalue属性を取得したいjQueryをvalue属性を設定/変更したい という方に向けた記事になっています。 val()メソッドでvalue属性を取得してみましょう まず[…]
JavascriptのclassNameメソッドとの比較
ご説明した通り、jQueryのattr()メソッドを使用するととても簡単にクラス名を取得できましたが、素のJavascriptでも同じくらい簡単にクラス名を取得することができます。
素のJavascriptではclassNameメソッドを使用してあげましょう。こちらはattr()メソッドとは違って、引数は取らず、クラス名を取得したいHTML要素に対して呼び出すだけで大丈夫です。
実装コード
<h1 class="test-header">テストヘッダー</h1>
<script>
const header = document.getElementsByTagName("h1")
console.log(header.className)
</script>
実行結果
=> "test-header"
こんなに簡単なの?とびっくりされた方も多いかと思います。普段はJavascriptの記法をより簡単に使いやすくしてくれるjQueryですが、今回ばかりは素のJavascriptの方がより直感的に使えそうですよね。
普段から素のJavascriptばかり書いている方にとってはわざわざjQueryのattr()メソッドを使ってまでクラス名を取得することはないとは思いますが、あまり使わないからこそ、いざという時に忘れてしまいがちです。
クラス名を取得する以外にも様々な属性を扱うことができますので、頭の片隅に置いておくと、いざという時に役に立つかもしれませんね。
お仕事の途中ですが、少し一休みして、転職や独立について考えてみませんか🙌?
現役エンジニアが選ぶおすすめの転職エージェント11選【成功談・失敗談もあります】
レバテックフリーランスの評判ってどう?【現役エンジニアが徹底解説します】
MidWorks(ミッドワークス)の評判ってどう?【現役エンジニアが徹底解説します】
日々の業務に追われて自分を見失わないよう、
定期的にキャリアを振り返るようにしておきましょう🤲
最後に
さて、今回は、jQueryを使ってクラス名を取得する方法について解説してきましたがいかがでしたか?
結果的には、「クラス名を取得する」という機能だけを見てみると、素のJavascriptの方が直感的に使用できますが、全ての属性を取得できるという点ではattr()
メソッドの方が便利ではあります。
場面ごとにいつでも両者を使い分けられるよう、この機会にそれぞれのやり方を覚えておいて損はないでしょう。
このブログを通じて少しでも「傍(はた)を楽(らく)にする」ことができていれば嬉しく思います。
最後まで読んで頂きありがとうございました。