.NETエンジニア・プログラマ向けの技術情報・業界ニュースをお届けします。

  1. FEnet.NETナビ
  2. .NETコラム
  3. プログラミング言語
  4. Javascript
  5. jQueryでの「id」セレクタの取得方法|指定方法やDOM操作も解説

jQueryでの「id」セレクタの取得方法|指定方法やDOM操作も解説

  • Javascript
  • jQuery
  • プログラミング言語
公開日時:   更新日時:
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=”値”」の形式で設定します。

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

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

    jQueryの「id」セレクタは「#」をつけて取得する

    「id」を指定する方法は利用するメソッドによって記述が違います。ここではJavaScriptネイティブとjQeuryの記述について比較しながら説明します。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    システム
    エンジニア
    複雑で一度ではなかなか理解するのが大変ですが、ぜひマスターしたいですね。

    プロジェクト
    マネージャー
    JavaScriptネイティブよりも簡略化して書くことができるので、ここは頑張ってぜひマスターしてください。

    さいごに

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

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

    FEnet.NETナビ・.NETコラムは株式会社オープンアップシステムが運営しています。
    株式会社オープンアップシステムロゴ

    株式会社オープンアップシステムはこんな会社です

    秋葉原オフィスには株式会社オープンアップシステムをはじめグループのIT企業が集結!
    数多くのエンジニアが集まります。

    秋葉原オフィスイメージ
    • スマホアプリから業務系システムまで

      スマホアプリから業務系システムまで

      スマホアプリから業務系システムまで開発案件多数。システムエンジニア・プログラマーとしての多彩なキャリアパスがあります。

    • 充実した研修制度

      充実した研修制度

      毎年、IT技術のトレンドや社員の要望に合わせて、カリキュラムを刷新し展開しています。社内講師の丁寧なサポートを受けながら、自分のペースで学ぶことができます。

    • 資格取得を応援

      資格取得を応援

      スキルアップしたい社員を応援するために資格取得一時金制度を設けています。受験料(実費)と合わせて資格レベルに合わせた最大10万円の一時金も支給しています。

    • 東証プライム上場企業グループ

      東証プライム上場企業グループ

      オープンアップシステムは東証プライム上場「株式会社夢真ビーネックスグループ」のグループ企業です。

      安定した経営基盤とグループ間のスムーズな連携でコロナ禍でも安定した雇用を実現させています。

    株式会社オープンアップシステムに興味を持った方へ

    株式会社オープンアップシステムでは、開発系エンジニア・プログラマを募集しています。

    年収をアップしたい!スキルアップしたい!大手の上流案件にチャレンジしたい!
    まずは話だけでも聞いてみたい場合もOK。お気軽にご登録ください。

    株式会社オープンアップシステムへのご応募はこちら↓
    株式会社オープンアップシステムへのご応募はこちら↓

    新着案件New Job