こんにちは。たいら(@tairaengineer2)です。
転職を繰り返し現在4社経験している、11年目エンジニアです。
この記事では、 JavaScriptで指定したidの要素を取得するgetElementByIdメソッドgetElementByIdメソッドについて
- getElementByIdメソッドとは
- getElementByIdメソッドを使ったサンプルプログラム
と、丁寧に解説していきます。
前提条件：実行環境について
実行環境は以下の通りです。
| OS | Windows10 |
|---|
getElementByIdメソッドとは
getElementByIdメソッドとは、引数に指定されたidと一致する要素のElementオブジェクトを返すメソッドです。
もし指定したidの要素が存在しなかった場合、nullを返します。
使い方サンプルは下記になります。
|
1 |
var result = document.getElementById('sample'); |
変数resultに、指定した「sample」というidの要素が存在していればそのElementオブジェクトを、なければnullを返します。
では、次の章で実際に使ってみます。
getElementByIdメソッドを解説するプログラムの概要
getElementByIdメソッドを解説するプログラムでは、
- HTML
- JavaScript
の2ファイルを使います。
HTMLの1要素をgetElementByIdメソッドを使って取得して、文字列を設定します。
フォルダ構成は以下のようになっています。
HTMLサンプルプログラム
|
1 2 3 4 5 6 7 8 9 10 11 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>サンプル</title> </head> <body> <p id="sample"></p> <script src="js/sample_javascript.js"></script> </body> </html> |
HTMLで外部のJavaScriptを読み込むやり方は、以下の記事をご参考ください。
JavaScriptサンプルプログラム
|
1 2 |
var elem = document.getElementById('sample'); elem.innerHTML = 'Hello'; |
innerHTMLプロパティとは、HTML要素の取得や書き換えができるプロパティです。
詳しくはこちらの記事をご参考ください。
実行結果
作成したHTMLをブラウザで開きます。
指定したidを取得して文字列が設定できていることが確認できました。
まとめ：getElementByIdメソッドを使ってみよう！
以上がJavaScriptのgetElementByIdメソッドについての解説でした。
あなたのご参考になったのなら、とても嬉しいです(*´▽｀*)
ではでは～(・ω・)ﾉｼ
コメント