【jQuery】attr()でクラス名を取得する

今回の記事は、

  • jQueryを使ってクラス名を取得したい
  • 素のJavascriptを使った方法も知っておきたい

という方に向けた記事になっています。

この記事の前半では、「jQueryを使ってクラス名を取得する方法」について解説しつつ、後半では「Javascriptとの比較」をご紹介させていただきます。


レバテックフリーランス … 業界最大級の案件数業界トップクラスの高単価報酬を誇る最大手のサービスです。実績豊富なコーディネーターが丁寧な対応をしてくれるため、案件の無理な提案はありません。フリーランスで生きていくためにはまず登録しておきましょう。
MidWorks … フリーランス賠償責任保障生命保険の折半など、フリーランスでありながらも正社員並みの保障を受けられるのが特徴です。また、経験豊富なキャリアコンサルタントによる手厚いサポートも受けられるため、安定したフリーランス生活を送りたい方には特におすすめのサービスです。
ポテパンフリーランス … IT業界・技術に詳しいコンサルタントが担当してくれるため、こちらの要望をきちんと理解した上で案件を紹介してくれます。また、案件情報のみならず、フリーランスのイロハについても教えてくれるため、フリーランスとして初めて活動される方には特におすすめのサービスです。

レバテックキャリア … ITエンジニアが利用したい転職エージェントNo.1にも選ばれており、年収600万円以上のハイクラス求人を5,000件以上も保有しています。エンジニアが転職を考えた時にまず初めに登録しておくべきサービスです。
Tech Stars Agent … Tech Stars Agentでは、担当エージェントが全員エンジニア出身のため、スキルやキャリアを見据えたきめ細かな転職支援が受けられます。運営元の株式会社Branding Engineerは、独立支援サービス「MidWorks」も展開しているため、独立を視野に入れたサポートも受けられます
転職ドラフト … 年収UP率93.8%/平均年収UP額126万円と圧倒的な年収UP率を誇るイベント型のエンジニア向け 転職サービスです。毎月1回開催され、厳選された優良IT/Web系企業約150社からダイレクトスカウトを受け取ることができます。年収アップを目指す方は登録必須です。

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"))のクラス名を簡単に取得することができます。

また、このattrattribute(属性)の略語であることからも分かる通り、クラス名以外の属性も取得することができます

実際の開発の中で使用するものは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属性を設定/変更したい という方に向けた記事になっています。 ・レバテックフリーランス … 業界最大級の案件数・業界トッ[…]

PCで仕事

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()メソッドの方が便利ではあります。

場面ごとにいつでも両者を使い分けられるよう、この機会にそれぞれのやり方を覚えておいて損はないでしょう。

このブログを通じて少しでも「傍(はた)を楽(らく)にする」ことができていれば嬉しく思います。

最後まで読んで頂きありがとうございました。