HTMLエレメントの操作HTMLエレメントの操作 |
HTMLエレメントの操作 |  |
ここでは、JavaScriptでのHTMLエレメントの操作方法まとめています。ご参考になれば幸いです。
多くのHTMLエレメント（form、img等）はJavaScriptのオブジェクトとして扱えます。設定方法は、nameアトリビュートを使って、
HTMLのアトリビュートは name = オブジェクト名または、id =
オブジェクト名
JavaScriptは document.formオブジェクト名.textオブジェクト名 = 値
と設定します。
<head>
<script type="text/JavaScript">
<!--
function formValue(){
document.myForm1.text1.value = "ここはmyForm1のtext1のvalueです。";
document.myForm2.text1.value = "ここはmyForm2のtext1のvalueです。";
}
//-->
</script>
</head>
<body onLoad="formValue();">
<form action="./" name="myForm1">
<input type="text" name="text1" size="50">
</form>
<form action="./" name="myForm2">
<input type="text" id="text1" size="50">
</form>
</body>
| Buttonオブジェクト | Checkboxオブジェクト | FileUploadオブジェクト | Formオブジェクト |
| Frameオブジェクト | Hiddenオブジェクト | Imageオブジェクト | Layerオブジェクト |
| Passwordオブジェクト | Pluginオブジェクト | Radioオブジェクト | Resetオブジェクト |
| Selectオブジェクト | Submitオブジェクト | Textオブジェクト | Textareaオブジェクト |
| Window()オブジェクト |
多くのHTMLエレメント（form、img等）はJavaScriptの配列の要素として扱えます。HTMLエレメントには記述順に添番[1]、[2]、[3]・・・と配列の要素が自動で設定されます。配列の要素の設定方法は、
オブジェクトの配列名[添番]
と設定します。
<head>
<script type="text/JavaScript">
<!--
function arrayValue(){
document.forms[0].elements[0].value = "ここはforms[0]のelements[0]のvalueです。";
document.forms[1].elements[0].value = "ここはforms[1]のelements[0]のvalueです。";
}
//-->
</script>
</head>
<body onLoad="formValue();">
<form action="./" name="Form1">
<input type="text" name="text1" size="50">
</form>
<form action="./" name="Form2">
<input type="text" id="text1" size="50">
</form>
</body>
| anchors配列 | applets配列 | elements配列（form内の値） | embeds配列 |
| forms配列 | frames配列 | history配列 | images配列 |
| layers配列 | links配列 | mimeTypes配列 | options配列 |
| plugins配列 |
pokochan@mx1.tees.ne.jp