【Javascript】「getElementById()」の使い方 - HTML要素の情報を「ID名」で参照・設定する方法

【Javascript】
「getElementById()」の使い方 - HTML要素の情報を「ID名」で参照・設定する方法

「getElementById()」メソッドは、
「HTML」タグに指定した「ID名」で指定することで、
指定した「HTML」タグの情報を取得することができる。
「document.getElementById("要素のID名")」を指定するだけでは、
要素があれば「True」、要素がなければ「False」が返される。
「document.getElementById("要素のID名").プロパティ名」と指定することで、
サイズなどの指定したプロパティ情報が取得・変更することができます。

「getElemetnsByClassName()」メソッドも同じ使い方で、
「ID」ではなく「クラス名」で指定する。
違うのが、同じクラス名が複数存在する場合は、
すべての同じクラス名の要素が配列で返される。
「getElementById()」メソッドは、
「document」オブジェクトの１つなので、
「document」オブジェクトに連結して記述します。
「document.getElementById("ID名")」というように、
「.（ピリオド）」で連結して記述されます。

「getElementById()」の書式

ID名で要素を指定する方法

var 変数名 = document.getElementById("ID名")

要素の情報を参照する方法

var 変数名 = document.getElementById("ID名").プロパティ名

var 変数名 = window.document.getElementById("要素のID名").clientHeight;
var 変数名 = window.document.getElementById("要素のID名").clientWidth;
var 変数名 = window.document.getElementById("要素のID名").offsetWidth;
var 変数名 = window.document.getElementById("要素のID名").offsetHeight;

下記の記述で、「要素の幅・高さ」も取得可能だが、
HTMLファイルを読み込み直後の最初の操作では、CSSに指定したサイズは読み込めない。
var 変数名 = window.document.getElementById("要素のID名").style.height;
var 変数名 = window.document.getElementById("要素のID名").style.width;

要素に情報を設定する方法

window.document.getElementById("要素のID名").style.height="100px";
window.document.getElementById("要素のID名").style.width="100px";

指定できるプロパティは、かなりたくさんあります。
CSSで指定している「Style属性」も、参照・変更ができます。
WebページのHTMLタグで「ID属性」を指定しているものであれば、
テキストカラー・サイズ・背景画像・背景カラー・文章内容などが参照・変更が可能です。

Back