jQueryでの「id」セレクタの取得方法｜指定方法やDOM操作も解説
- システム
エンジニア - jQueryの「id」セレクタやメソッドを利用するを知りたいです。
- プロジェクト
マネージャー - 「id」セレクタの指定の方法やオブジェクトの取得、DOM操作などを解説していきますね。
jQueryの「id」セレクタやメソッドを利用する方法
jQueryでDOM操作するときは「セレクタ」を利用するのが基本です。その中でも「id」セレクタはJavaScript開発において利用頻度の高い項目です。
この記事で、「id」セレクタの指定方法からメソッドの使い方、HTML上の「id」取得方法などについて学習して理解を深めていきましょう。
「id」を取得する前の注意
JavaScriptで「id」によるDOM操作をする前に、まずHTML要素の「id」プロパティのルールについて理解する必要があります。「id」プロパティはHTMLタグの中に「id=”値”」の形式で設定します。
|
1
2
|
<div id="message">メッセージ</div>
|
JavaScriptでは「id」で要素を取得しての特定のDOM操作をしますが、注意点として「id」はHTMLページの中で必ず1つ（ユニーク）でなければいけません。
もし以下のように「id」が重複した状態でJavaScriptを実行すると、ブラウザで一見動作していても、実際には意図しない表示や動作をするので気をつけましょう。
|
1
2
3
|
<div id="message">メッセージ1</div>
<div id="message">メッセージ2</div>
|
jQueryの「id」セレクタは「#」をつけて取得する
「id」を指定する方法は利用するメソッドによって記述が違います。ここではJavaScriptネイティブとjQeuryの記述について比較しながら説明します。
JavaScriptの「getElementById()」で取得する
JavaScriptネイティブでは「document.getElementById()」メソッドで、「id」プロパティを文字列で指定して要素を取得します。「id」プロパティに一致した要素は、Elementオブジェクトとして返されます。
|
1
2
3
|
var message_element = document.getElementById('message');
console.log(message_element);
|
JavaScriptの「querySelector()」で取得する
JavaScriptネイティブのもう1つの方法として「document.querySelector()」メソッドで「id」を指定します。「document.querySelector()」メソッドの場合、文字列の先頭に「#」をつけるルールなので注意が必要です。
|
1
2
3
|
var message_element = document.querySelector('#message');
console.log(message_element);
|
「id」セレクタを指定して取得する
つぎにjQueryを利用した「id」の指定方法です。jQueryで要素を取得するにはセレクタ「$()」を利用しますが、「id」の場合「document.querySelector()」メソッド同様に「#id名」で指定します。
またセレクタ「$()」は、jQuery固有のメソッドやプロパティをもつオブジェクトであることも理解しておく必要があります。
|
1
2
3
4
|
var message_element = $('#message');
console.log(message_element);
//デバッグ画面で S.fn.init [div#message]... と独自オブジェクトが表示
|
jQueryで「id」取得してDOM操作する
「id」セレクタでオブジェクトを取得できたら、今度はDOM操作をしてみます。jQueryでは独自のプロパティやメソッドが利用できるので、JavaScriptネイティブより記述を簡略化できるのが特徴です。
以下はjQueryの「text()」メソッドを利用して「id=”message”」のHTML要素に文字列を表示した例です。
|
1
2
3
4
5
6
|
<div id="message"></div>
<script>
$('#message').text('こんにちは');
</script>
|
「id」の子要素を取得してDOM操作する
jQueryの「id」セレクタは「#id名」で指定しましたが、「id」に関連したタグの指定もできます。例えば「#id名 > 子要素タグ名」と記述すると「id」セレクタの子要素をすべて取得します。
以下は「id=”item”」の子要素「li」タグのみ取得していることに注目してください。つまり「id=”item”」以外の「li」タグは取得しません。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<div>
<ul id="item">
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
</ul>
<ul id="user">
<li>User1</li>
<li>User2</li>
<li>User3</li>
</ul>
</div>
<script>
$('#item > li').css({color: 'red'});
//id="item" の li だけの文字が赤色になる
</script>
|
セレクタを変数に「id」を指定して取得する
jQueryのプログラムが複雑になってくると、何度もセレクタ指定したい場合や動的にセレクタを取得したい場合があります。jQureyでは「$(変数)」や「$(‘#’ + 変数)」といった変数のセレクタ指定にも対応しています。
以下は変数「id_name」で「$(‘#’ + id_name)」の記述でセレクタ指定した例です。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<div id="message"></div>
<script>
var is_error = false;
var id_name = 'message';
var message_element = $('#' + id_name)
message_element.text('変数で指定しました');
if (is_error == true) {
message_element.css({color:'red'});
} else {
message_element.css({color:'green'});
}
</script>
|
「attr()」メソッドで「id」プロパティの取得や変更をする
jQueryではプロパティを操作する「attr()」メソッドで「id」の値を取得できます。また「attr(‘id’, 値)」のように第2引数に値を代入すると「id」プロパティの値を設定できます。
以下は「attr()」メソッドで「id」の値を「item」から「new_item」に変更し、結果をデバッグ表示した例です。
|
1
2
3
4
5
|
var item_element = $('#item').attr('id', 'new_item');
var id = item_element.attr('id');
console.log(id);
//デバッグ画面で new_item と表示
|
「id」が設定された要素を複数取得する
jQueryでは「タグ名[プロパティ名]」という記述で、HTMLから「id」が設定された要素をすべて取得できます。例えば「id」が設定された「p」タグをすべて取得するには「p[id]」と記述します。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<div>
<p>項目</p>
<p id="name">Apple</p>
<p id="price">200</p>
<p id="amount">3</p>
</div>
<script>
var p_elements = $('p[id]');
console.log(p_elements);
//デバッグ画面で [p#name, p#price, p#amount,... と表示
</script>
|
- システム
エンジニア - 複雑で一度ではなかなか理解するのが大変ですが、ぜひマスターしたいですね。
- プロジェクト
マネージャー - JavaScriptネイティブよりも簡略化して書くことができるので、ここは頑張ってぜひマスターしてください。
さいごに
今回はjQueryの「id」セレクタを利用した取得やDOM操作について説明しました。「id」はHTML上に1つだけの要素として「#id名」で指定することがポイントです。
JavaScriptネイティブよりも簡略化して書くことができ、jQuery独自のメソッドを利用することでコードがわかりやすくなります。HTMLの構造やセレクタの指定を工夫して、より効率的なプログラミングを目指しましょう。
FEnet.NETナビ・.NETコラムは株式会社オープンアップシステムが運営しています。
株式会社オープンアップシステムはこんな会社です
秋葉原オフィスには株式会社オープンアップシステムをはじめグループのIT企業が集結！
数多くのエンジニアが集まります。
-
スマホアプリから業務系システムまで
スマホアプリから業務系システムまで開発案件多数。システムエンジニア・プログラマーとしての多彩なキャリアパスがあります。
-
充実した研修制度
毎年、IT技術のトレンドや社員の要望に合わせて、カリキュラムを刷新し展開しています。社内講師の丁寧なサポートを受けながら、自分のペースで学ぶことができます。
-
資格取得を応援
スキルアップしたい社員を応援するために資格取得一時金制度を設けています。受験料(実費)と合わせて資格レベルに合わせた最大10万円の一時金も支給しています。
-
東証プライム上場企業グループ
オープンアップシステムは東証プライム上場「株式会社オープンアップグループ」のグループ企業です。
安定した経営基盤とグループ間のスムーズな連携でコロナ禍でも安定した雇用を実現させています。
株式会社オープンアップシステムに興味を持った方へ
株式会社オープンアップシステムでは、開発系エンジニア・プログラマを募集しています。
年収をアップしたい！スキルアップしたい！大手の上流案件にチャレンジしたい！
まずは話だけでも聞いてみたい場合もOK。お気軽にご登録ください。
新着案件New Job
-
開発エンジニア/東京都品川区/【WEB面談可】/在宅ワーク
月給29万～30万円東京都品川区(大崎駅) -
遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク
月給45万～60万円東京都港区(六本木駅) -
病院内システムの不具合対応、保守/東京都豊島区/【WEB面談可】/テレワーク
月給30万～30万円東京都豊島区(池袋駅) -
開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク
月給50万～50万円東京都豊島区(大塚駅) -
債権債務システム追加開発/東京都文京区/【WEB面談可】/在宅勤務
月給62万～67万円東京都文京区(後楽園駅) -
PMO/東京都豊島区/【WEB面談可】/在宅勤務
月給55万～55万円東京都豊島区(池袋駅)
関連記事Related Posts
-
jQueryでのクリックイベント on(click) の使い方とは？offメソッドについても紹介！
jQueryでのクリックイベント on(click) の使い方を紹介します！ 今回は、jQueryでのクリックイベントの使い方について説明します。 jQueryでクリックイベントを設定するには、on(click)を使用し […]
-
jQueryのloadとは？loadの使用方法やjQueryを使わずにloadを行う方法を紹介
jQueryのloadとは？ jQueryはJavaScriptで利用できる多機能なライブラリです。その機能の1つであるloadは、自ページとは別のtxtページやhtmlページを読み込んで表示することができる機能です。複 […]
-
jQueryでのValidationの使い方を紹介！Validationを正しく使いこなそう！
jQueryでのValidationの使い方を紹介します 今回は、jQueryでのValidationの使い方について説明します。 Validationとは、ユーザが正しく値を入力したかチェックする機能です。例えば、必須 […]
-
JavaScriptでのStringの使い方｜各メソッドをコード付きで紹介
JavaScriptでのStringの使い方とは？ 今回は、JavaScriptでの文字列（String）の使い方について説明します。JavaScriptでは、文字列をダブルクォーテーション（”）で囲みます。 […]
-
jQueryのselectタグとは？selectタグの操作方法を紹介
jQueryのselectとは？ jQueryはJavaScriptで利用できるフリーの高機能なライブラリです。jQueryでselectと言えば、HTMLのselectタグをjQueryの機能で操作することを意味します […]
