基礎編

html>getElementById()　- HTML要素の情報を参照・設定する

javascript

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

1. 「getElementById()」メソッド　ID名のタグの情報を取得できる

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

2. 「getElemetnsByClassName()」メソッド　同じ使い方　「ID」ではなく「クラス名」で指定する

同じクラス名が複数存在する場合は、すべての同じクラス名の要素が配列で返される。

3. 「getElementById()」メソッドはdocumentオブジェクトの１つ
4. 「document.getElementById("ID名")」と「.（ピリオド）」で連結して記述する
5. ID名で要素を指定する

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

6. 要素の情報を参照する

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;

7. CSSに指定した「要素の幅・高さ」は、HTMLファイルを読み込んだ直後は読み込めない。

var 変数名 = window.document.getElementById("要素のID名").style.height;
var 変数名 = window.document.getElementById("要素のID名").style.width;

8. 要素に情報を設定する

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

getElemetnsByClassName()　- HTML要素の情報を「クラス名」で参照・設定する

1. ドキュメント全体に含まれる同じ「クラス名」の要素を指定する方法

var 配列名 = document.getElementsByClassName('クラス名');

2. ドキュメント全体に含まれる複数の「クラス名」の要素を指定する方法

var 配列名 = document.getElementsByClassName('クラス名 クラス名');

3. 「getElementById('ID名')」で指定した要素の中にある同じクラス名の要素を指定する方法

var 配列名 = document.getElementById('ID名').getElementsByClassName('クラス名');

4. 取得したクラス名のタグから情報を参照する方法

var 変数名 = 配列名[key].プロパティ;

5. 指定したクラスの最初の要素を取得する方法

var 変数名 = document.getElementsByClassName('クラス名')[0]; *指定したクラス名がない場合は、「undefined」が返される。

6. 取得したクラス名のタグに情報を設定する方法

配列名[key].プロパティ = "値";