.NET開発者のためのブログメディア

SE: Microsoft Azureに挑戦してみようと思います！初心者はまず何から始めるべきでしょうか？

PM: まずはクラウドの用語を理解することから始めましょう。Azureのサービスに絡む用語も多いので、この記事で解説しますね！

HTML要素であるidの特徴3つ

CSSやJavaScriptで装飾するために必要であるHTMLの要素のidは、大きく分けて3つの性質を持っています。その性質や似た性質を持っているclassとの使い分けについて紹介していきます。jQueryのidセレクタを理解するためには、idの性質を理解する必要があるでしょう。

1：classと同じ性質を持つ

idはclassと同じ性質を持ち、指定することによってセレクタとして使うことが可能です。しかしながら、idはclassよりもCSSが適用される優先順位が高いという違いを持ちます。

また、idとclassにはそこまで大きな差がないためidを使わずに、classだけでCSSを書いていく方法もあります。

2：重複して使えない

idはクラスとは違い、同じ名前のidを複数使うことができません。そのため、同じスタイルを繰り返して利用したい場合などには、idではなくclassなどを利用するといいでしょう。

3：「#id」と指定する

idを指定する場合には

<h1 id="gg">Text</h1>

1	<h1 id="gg">Text</h1>

というように

id=""

id=""

で指定すると良いでしょう。

また、以下のようにCSS側では#idと指定します。

#id {
      color: red;
    }

#id {

color: red;

}

「id」を取得する前の注意

JavaScriptで「id」によるDOM操作をする前に、まずHTML要素の「id」プロパティのルールについて理解する必要があります。「id」プロパティはHTMLタグの中に「id=“値”」の形式で設定します。

<div id=“message”>メッセージ</div>

1 2	<div id=“message”>メッセージ</div>

JavaScriptでは「id」で要素を取得しての特定のDOM操作をしますが、注意点として「id」はHTMLページの中で必ず1つ（ユニーク）でなければいけません。

もし以下のように「id」が重複した状態でJavaScriptを実行すると、ブラウザで一見動作していても、実際には意図しない表示や動作をするので気をつけましょう。

<div id=“message”>メッセージ1</div>
<div id=“message”>メッセージ2</div>

<div id=“message”>メッセージ1</div>

<div id=“message”>メッセージ2</div>

jQueryの「id」セレクタやメソッドを利用する方法9選

jQueryでDOM操作するときは「セレクタ」を利用するのが基本です。その中でも「id」セレクタはJavaScript開発において利用頻度の高い項目です。

この記事で「id」セレクタの指定方法からメソッドの使い方、HTML上の「id」取得方法、jQuery特有の文法について学習して理解を深めていきましょう。

1：JavaScriptの「getElementById()」で取得する

JavaScriptネイティブでは「document.getElementById()」メソッドで、「id」プロパティを文字列で指定して要素を取得します。「id」プロパティに一致した要素は、Elementオブジェクトとして返されます。

var message_element = document.getElementById('message');
console.log(message_element);

var message_element = document.getElementById('message');

console.log(message_element);

2：JavaScriptの「querySelector()」で取得する

JavaScriptネイティブのもう1つの方法として「document.querySelector()」メソッドで「id」を指定します。「document.querySelector()」メソッドの場合、文字列の先頭に「#」をつけるルールなので注意が必要です。

var message_element = document.querySelector('#message');
console.log(message_element);

1 2	var message_element = document.querySelector('#message'); console.log(message_element);

3：「id」セレクタを指定して取得する

次にjQueryを利用した「id」の指定方法です。jQueryで要素を取得するにはセレクタ「$()」を利用しますが、「id」の場合「document.querySelector()」メソッド同様に「#id名」で指定します。

またセレクタ「$()」は、jQuery固有のメソッドやプロパティをもつオブジェクトであることも理解しておく必要があります。

var message_element = $('#message');
console.log(message_element);
//デバッグ画面で S.fn.init [div#message]... と独自オブジェクトが表示

var message_element = $('#message');

console.log(message_element);

//デバッグ画面で S.fn.init [div#message]... と独自オブジェクトが表示

4：jQueryで「id」取得してDOM操作する

「id」セレクタでオブジェクトを取得できたら、今度はDOM操作をしてみます。jQueryでは独自のプロパティやメソッドが利用できるので、JavaScriptネイティブより記述を簡略化できるのが特徴です。

以下はjQueryの「text()」メソッドを利用して「id=“message”」のHTML要素に文字列を表示した例です。

<div id="message"></div>

<script>
$('#message').text('こんにちは');
</script>

$('#message').text('こんにちは');

</script>

5：「id」の子要素を取得してDOM操作する

jQueryの「id」セレクタは「#id名」で指定しましたが、「id」に関連したタグの指定もできます。例えば「#id名 > 子要素タグ名」と記述すると「id」セレクタの子要素をすべて取得します。

以下は「id=“item”」の子要素「li」タグのみ取得していることに注目してください。つまり「id=“item”」以外の「li」タグは取得しません。

<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&gt

<script&gt
$('#item > li').css({color: 'red'});
//id=“item” の li だけの文字が赤色になる
</script&gt

<div>

</ul>

</ul>

</div&gt

<script&gt

$('#item > li').css({color: 'red'});

//id=“item” の li だけの文字が赤色になる

</script&gt

6：セレクタを変数に「id」を指定して取得する

jQueryのプログラムが複雑になってくると、何度もセレクタ指定したい場合や動的にセレクタを取得したい場合があります。jQureyでは「$(変数)」や「$(‘#’ + 変数)」といった変数のセレクタ指定にも対応しています。

以下は変数「id_name」で「$(‘#’ + id_name)」の記述でセレクタ指定した例です。

<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>

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>

7：「attr()」メソッドで「id」プロパティの取得や変更をする

jQueryではプロパティを操作する「attr()」メソッドで「id」の値を取得できます。また「attr(‘id’, 値)」のように第2引数に値を代入すると「id」プロパティの値を設定できます。

以下は「attr()」メソッドで「id」の値を「item」から「new_item」に変更し、結果をデバッグ表示した例です。

var item_element = $('#item').attr('id', 'new_item');
var id = item_element.attr('id');
console.log(id);
//デバッグ画面で new_item と表示

var item_element = $('#item').attr('id', 'new_item');

var id = item_element.attr('id');

console.log(id);

//デバッグ画面で new_item と表示

8：「removeAttr()」で「id」を削除する方法

jQueryのremoveAttrメソッドとはHTML要素の属性を削除するメソッドです。

<a href="#" id="hoge">idを消します</a>
$('a').removeAttr('id');

<a href="#" id="hoge">idを消します</a>

$('a').removeAttr('id');

このようにhrefとidという属性を持っているオブジェクトからremoveAttr()メゾットを使うことによってidを消すことができます。

9：「id」が設定された要素を複数取得する

jQueryでは「タグ名[プロパティ名]」という記述で、HTMLから「id」が設定された要素をすべて取得できます。例えば「id」が設定された「p」タグをすべて取得するには「p[id]」と記述します。

<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>

<div>

<p id="name">Apple</p>

</div>

var p_elements = $('p[id]');

console.log(p_elements);

//デバッグ画面で [p#name, p#price, p#amount,... と表示

</script>

jQueryでidセレクタを使う際の注意点

jQueryのidセレクタは、正しく記述しなければエラーになり動きません。そのため正確にidを指定したり、文法を書く必要があります。

また、複数のidを並べて一気にオブジェクトを取得しようとすると、処理がとても遅くなってしまうので一個ずつ取得するようにしましょう。jQueryを学習していく上でこのようなjQuery固有の仕様についても理解していく必要があります。

タグ名は指定しない

$('div#gg');

1	$('div#gg');

このような指定のやり方はよくありません。

なぜならggというidを探すために、すべてのdiv要素の中から探す処理をする必要があるからです。処理が遅くならないためには、このようにタグ名を指定せずにidを指定する必要があります

$('#gg');

$('#gg');

複数のidを並列できない

jQueryのidセレクタはそれぞれ一個のidしか指定できません。そのため、複数のidを指定したい場合はそれぞれに指定していく必要があります。

$('#gg #media')

1	$('#gg #media')

このように複数の要素を取得すると、処理がかなり遅くなってしまうので一個ずつ指定しましょう。

SE: サーバやデータベースなど、オンプレミスのインフラと同じような環境がAzureでも作れるのですね！

PM: Azureには無償で使用できる期間もあります。一度試してみるのも良いかもしれません。

JavaScriptライブラリであるjQueryでのidの使い方を覚えよう

今回はjQueryの「id」セレクタを利用した取得やDOM操作について説明しました。「id」はHTML上に1つだけの要素として「#id名」で指定することがポイントです。

JavaScriptネイティブよりも簡略化して書くことができ、jQuery独自のメソッドを利用することでコードがわかりやすくなります。HTMLの構造やセレクタの指定を工夫して、より効率的なプログラミングを目指しましょう。

.NET分野でのキャリアアップをお考えの方は、現在募集中の求人情報をご覧ください。

また、直接のエントリーも受け付けております。

エントリー（応募フォーム）

Search キーワード検索

Popular 人気の記事

reccomended おすすめ記事

C#のusingステートメントでリソースの解放【Disposeとの違いとは】

2020年03月17日
【SQL Serverログの操作】トランザクションログの使用量を確認する方法

2020年03月16日
【.NETが統合】.NET 5の概要と今後のリリース予定

2020年03月05日

Categories 連載一覧

生活・便利

教育・学習

Windows

言語・環境

転職

エンジニア

働き方

プログラミング言語

開発環境

ツール

未分類

.NET開発者のためのブログメディア

Azureで利用できるサービス7つ｜アカウント作成の手順と特徴も紹介

HTML要素であるidの特徴3つ

1：classと同じ性質を持つ

2：重複して使えない

3：「#id」と指定する

「id」を取得する前の注意

jQueryの「id」セレクタやメソッドを利用する方法9選

1：JavaScriptの「getElementById()」で取得する

2：JavaScriptの「querySelector()」で取得する

3：「id」セレクタを指定して取得する

4：jQueryで「id」取得してDOM操作する

5：「id」の子要素を取得してDOM操作する

6：セレクタを変数に「id」を指定して取得する

7：「attr()」メソッドで「id」プロパティの取得や変更をする

8：「removeAttr()」で「id」を削除する方法

9：「id」が設定された要素を複数取得する

jQueryでidセレクタを使う際の注意点

タグ名は指定しない

複数のidを並列できない

JavaScriptライブラリであるjQueryでのidの使い方を覚えよう

Search キーワード検索

Popular 人気の記事

reccomended おすすめ記事

C#のusingステートメントでリソースの解放【Disposeとの違いとは】

【SQL Serverログの操作】トランザクションログの使用量を確認する方法

【.NETが統合】.NET 5の概要と今後のリリース予定

Categories 連載一覧

Tags タグ一覧

Jobs 新着案件

開発エンジニア/東京都品川区/【WEB面談可】/在宅ワーク

遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク

病院内システムの不具合対応、保守/東京都豊島区/【WEB面談可】/テレワーク

ソフトを用いた3DCGアート/東京都千代田区/【WEB面談可】/テレワーク

開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク