形から入るWEBアプリ

document オブジェクトに3つのメソッドが用意されています。
これらのメソッドでページ内のエレメント(要素)を直接参照する事ができます

getElementById

IE : http://msdn.microsoft.com/en-us/library/ms536437.aspx
mozilla : https://developer.mozilla.org/ja/DOM/document.getElementById

getElementsByName

IE : http://msdn.microsoft.com/en-us/library/ms536438.aspx
mozilla : https://developer.mozilla.org/ja/DOM/document.getElementsByName

getElementsByTagName

IE : http://msdn.microsoft.com/en-us/library/ms536439.aspx
mozilla : https://developer.mozilla.org/ja/DOM/document.getElementsByTagName

getElementsByTagName は、各要素にも存在するメソッドなので、TABLE 内の TD 要素のみを全て
取得して、ループで全TD 内のテキストを取得するというような事に使う事ができます
また、getElementsByTagName では、特定要素のかわりに "*" を使う事ができます
( 全ての要素です )

<script type="text/javascript">
for( i = 0; i < document.getElementsByTagName("*").length; i++ ) {
	console.log(document.getElementsByTagName("*")[i].tagName );
}
</script>

フォーム内の要素

フォームとフォーム内の入力用要素に name 属性が設定されていると、
document.フォーム名.入力要素名で参照する事ができます。

<form name=myForm>
<input type="text" name="myFld" value="日本語表示">
</form>
<script type="text/javascript">
alert(document.myForm.myFld.value);

alert(document["myForm"]["myFld"].value);
</script>

document.フォーム名.入力要素名 は、
document["フォーム名"]["入力要素名"] と書きかえる事もできます

特別な定義済の body 要素

document.body で、document.getElementsByTagName("BODY")[0] と
同じものを参照する事ができます。


parentNode メソッドで一つ上の要素を参照

HTML エレメントは、階層構造になっているので、自分自身を示す this から
一つ上の要素を介して、他の要素を参照する事も可能です。

<div>
<span>a</span>
<span onclick='this.parentNode.getElementsByTagName("SPAN")[0].style.color="#ff0000"'>b</span>
<span onclick='this.parentNode.getElementsByTagName("SPAN")[3].style.color="#0000ff"'>c</span>
<span>d</span>
</div>