getElementByIdの使い方｜基本的な使い方からjQueryでの記述方法まで紹介！
- システム
エンジニア - getElementByldの使い方を教えてください。
- プロジェクト
マネージャー - JavaScriptでのgetElementByldの基本的な使い方などを紹介します。
JavaScriptでのgetElementByIdの使い方とは？
今回は、JavaScriptでのgetElementByIdの使い方について説明します。id指定でHTML要素取得する場合getElementByIdを使用します。
基本的な使い方から、複数idの指定方法やjQueryでの記述方法について紹介します。また、getElementByIdの活用事例についても紹介します。
JavaScriptでのgetElementByIdの使い方に興味のある方はぜひご覧ください。
要素の取得
getElementByIdで要素を取得する方法を紹介します。実際のソースコードを見てみましょう。
|
1
2
3
4
5
6
7
8
9
10
|
<p id="target_id">sample content.</p>
<script>
// 要素の取得
let target = document.getElementById("target_id");
// 要素の表示
console.log(target);
// 要素の値表示
console.log(target.textContent);
</script>
|
実行結果は以下のようになります。コンソールログを確認してください。
|
1
2
|
<p id="target_id">sample content.</p>
sample content.
|
idが複数存在する場合
通常、idは一意になるようにしますが、複数存在する場合はどうなるでしょうか。実際のソースコードを見てみましょう。
|
1
2
3
4
5
6
7
8
9
10
11
|
<p id="target_id">sample content1.</p>
<p id="target_id">sample content2.</p>
<script>
// 要素の取得
let target = document.getElementById("target_id");
// 要素の表示
console.log(target);
// 要素の値表示
console.log(target.textContent);
</script>
|
実行結果は以下のようになります。先に記述したidで取得されることが分かります。
|
1
2
|
<p id="target_id">sample content1.</p>
sample content1.
|
idが存在しない場合
getElementByIdで指定したidが存在しない場合はどうなるでしょうか。実際のソースコードを見てみましょう。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<p id="target_id">sample content.</p>
<script>
// 要素の取得
let target = document.getElementById("hoge");
// nullチェック
if(target != null){
// 要素の表示
console.log(target);
// 要素の値表示
console.log(target.textContent);
} else {
// nullの場合の処理
console.log("nullです。");
}
</script>
|
実行結果は以下のようになります。指定したidが存在しない場合はnullになります。
|
1
|
nullです。
|
複数指定
getElementByIdで複数idを指定する方法を紹介します。実際のソースコードを見てみましょう。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
<ul>
<li id="sample-1">item1</li>
<li id="sample-2">item2</li>
<li id="sample-3">item3</li>
<li id="sample-4">item4</li>
<li id="sample-5">item5</li>
</ul>
<script>
// li要素の取得
var li_elements = document.getElementsByTagName('li');
// li要素の繰り返し
for (var i = 1; i <= li_elements.length; ++i) {
// id指定で取得
console.log(document.getElementById("sample-" + i).textContent);
}
// li要素の取得
var li_list = document.querySelectorAll("[id^=sample]");
for(var i = 0; i < li_list.length; i++){
// 結果表示
console.log(li_list[i].textContent);
}
</script>
|
id指定でまとめて取得するのは、querySelectorAllの方が一般的です。実行結果は以下のようになります。
|
1
2
3
4
5
6
7
8
9
10
|
item1
item2
item3
item4
item5
item1
item2
item3
item4
item5
|
jQueryで記述
getElementByIdと同じ処理をjQueryで記述する方法を紹介します。実際のソースコードを見てみましょう。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="http://code.jquery.com/jquery-2.2.3.min.js"></script>
</head>
<body>
<p id="target_id">sample content.</p>
<script>
// 要素の取得
let target = document.getElementById("target_id");
// 要素の表示
console.log(target);
// jQuery
console.log($('#target_id').get(0));
console.log($('#target_id')[0]);
</script>
</body>
</html>
|
実行結果は以下のようになります。コンソールログを確認してください。
|
1
2
3
|
<p id="target_id">sample content.</p>
<p id="target_id">sample content.</p>
<p id="target_id">sample content.</p>
|
jQueryで記述した方がシンプルに記述できます。
要素の変更
getElementByIdの活用事例を紹介します。要素を取得して変更してみます。実際のソースコードを見てみましょう。
|
1
2
3
4
5
6
7
8
|
<p id="target_id">sample content.</p>
<script>
// 要素の取得
var target = document.getElementById("target_id");
// 中身を変更
target.innerHTML = "element changed.";
</script>
|
実行結果は以下のようになります。
See the Pen
getElementById5 by kskumd (@kskumd)
on CodePen.
要素の追加
取得した要素に対して、要素を追加する方法を紹介します。実際のソースコードを見てみましょう。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<ui id="parent">
<li id="child1">child1</li>
<li id="child2">child2</li>
<li id="child3">child3</li>
</ui>
<script>
// 要素の取得
var parent = document.getElementById("parent");
// 子要素を作成
var child = document.createElement("li");
// id要素とinnerText要素を設定
child.id = "appendChild1";
child.innerText = "appendChild1";
// 要素を追加
parent.appendChild(child);
</script>
|
実行結果は以下のようになります。
See the Pen
getElementById6 by kskumd (@kskumd)
on CodePen.
- システム
エンジニア - getElementBlydの使い方がわかりました！
- プロジェクト
マネージャー - getElementBlydの活用方法はいくつかありますで、興味のある方はぜひ挑戦してみてください。
まとめ
今回はJavaScriptでのgetElementByIdの使い方について説明しましたが、いかがでしたでしょうか。
基本的な使い方から複数idの指定方法など、ぜひご自身でソースコードを書いてみて理解を深めていってください。
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のparentメソッドとは？parentメソッドの使用方法を紹介
jQueryでのparentメソッドの使い方とは？ 今回は、jQueryでのparentメソッドの使い方について説明します。parentメソッドを使用すれば、親要素を取得できます。 基本的な使い方から、引数の使い方につい […]
-
jQueryでのaddClassメソッドの使い方を紹介！複数classを追加する方法とは？
jQueryでのaddClassメソッドの使い方とは？ 今回は、jQueryでのaddClassメソッドの使い方について説明します。 addClassメソッドを使用すると、classを追加することができます。addCla […]
-
ジェイクエリーとは？メリット・デメリット10選・導入する方法や記述方法を紹介
ジェイクエリー（jQuery）とは？ jQuery（ジェイクエリー）は、2006年にリリースされたオープンソースのJavaScriptライブラリです。数ある中でも長年利用されているライブラリのため、デファクトスタンダード […]
-
jQueryのon loadとは？jQueryのon loadは適切に使おう！
jQueryのon loadとは？ jQueryはJavaScriptで使用できる多機能なライブラリです。JavaScriptにはwindow.onloadというメソッドがあり、Queryにもそれに近い機能があります。こ […]
-
jQueryの「id」セレクタを利用する方法9選｜使う際の注意点とは
HTML要素であるidの特徴3つ CSSやJavaScriptで装飾するために必要であるHTMLの要素のidは、大きく分けて3つの性質を持っています。その性質や似た性質を持っているclassとの使い分けについて紹介してい […]
