» document.getElementById('id名');
・このメソッドは頻繁に使われます。
デモ デモ
要素の内容をそのまま返します。 < 要素 >
引数にid名を指定し要素を特定します。(文書全体に対して特定した要素は1ケ所)。
特定した要素に対してスタイルやアクションを付与し変化を与えます。
(注)次の2つはリスト(配列)を返します。 [< 要素 >] リスト(配列)にはインデックス
番号が付与されます。インデックス番号は0からカウントします。(配列と同じ)
わざわざ配列を定義しなくとも,取得したデータを配列として利用できます。
document.getElementsByTagName や document.getElementsByName
» document.getElementsByTagName('要素名(タグ名)');
・このメソッドは,引数に要素名(タグ名)を指定するとリストとして返します。
(文書全体に対して同じ要素名は,必ずしも一つとは限りません)
返されたリストを次のプロパティやメソッドで使い分けます。
・length プロパティ
デモ
このプロパティは返されたリストの総数をカウントします。
・item() メソッド
デモ
引数(インデックス番号)を指定してリストの中から該当する要素名の要素を全て取り出します。
取り出された全ての要素から,さらに必要な要素を指定します。
» document.getElementsByName('name');
・このメソッドは,要素にname属性をセットされている場合に使用します。
ほとんど document.getElementsByTagName と同じ使用法です。
引数にname名を指定するとリストとして返します。
(文書全体に対して同じname名は,必ずしも一つとは限りません)
返されたリストを次のプロパティやメソッドで使い分けます。
・length プロパティ
デモ
このプロパティは返されたリストの総数をカウントします。
・item() メソッド
デモ
引数(インデックス番号)を指定してリストの中から該当するname名の要素を全て取り出します。
取り出された全ての要素から,さらに必要な要素を指定します。
» getAttribute('属性')
・getAttributeの書式は タグ要素名または属性を持つデータ.getAttribute('属性名');
デモ
ターゲットにした要素名の属性により定義された属性値を取得します。
TagNameやNameと異なりリストとして取得しません。
» window.addEventListenerについて
・ページの読み込み時に実行される関数がある場合,新たに別の関数を読み込ませる場合は注意が必要です。新たに読み込まれる(最後に読み込まれる)関数が実行され,前の関数は実行されなくなります。それを避けるために window.addEventListener を応用します。
(例)body onload="hato()"または window.onload=hato;
新たに追加する window.onload=hato2; としますと,hato2関数が実行されhato関数は
実行されません。次のように書きます。
if(window.addEventListener){window.addEventListener("load",hato2,false);}else if(window.attachEvent){window.attachEvent("onload",hato2);};
IEではaddEventListenerが使えないため,attachEventを使います。
IEでは if(window.attachEvent){window.attachEvent("onload",hato2);}; で動作します。
if文で2つに分岐させ,どちらでも使えるようにしておきます。
» getAttribute("className")について
・通常は,引数にはclassNameではなく,classNameで定義された値を記入しますが,
要素.getAttribute("className")=="値"のようにclassNameを使用することもあります。
ブラウザによっては classNameで動作するものと classで動作するものがあります。次のように書きます。
if(要素.getAttribute("className")||要素.getAttribute("class")){..
||は演算子で,または,or という意味です。
IEでは if(要素.getAttribute("className")){.. で動作します。
if文で[どちらかが真であれば]とし,どちらでも使えるようにしておきます。
» firstChildについて デモ
・HTML文書はノードとよばれる要素の集まりです,HTMLの下にheadその下にtitle
その下にtextなどのようにツリー構造としてとらえています。
firstChild はターゲットにしたノードの最初の子ノードを参照します。