Java Webメモ:Javascriptを使用してDOMを操作する
3641 ワード
HTML言語では、それ自体もタグ言語を採用しているので、HTMLではJavascriptでDOMを操作することができます.
JavascriptでのDOM解析の使用
フォームには通常のボタンが定義されており、このボタンをクリックするとshow関数が呼び出され、show関数でinfo要素が取得され、表示内容が設定されます.
DOMによるドロップダウンリストボックスの生成
setFunメソッドでは、document.getElementById(「area」)でareaドロップダウンリストボックスのオブジェクトを取得し、length設定でドロップダウンリストボックスを毎回1つしか選択できないようにし、最初のオプションをデフォルト選択に設定します.ドロップダウンリストには複数のoptionが存在するため、setArrribute()メソッドで各optionに含まれるvalueプロパティの内容を設定し、各optionに表示内容を示すテキストノードを設定し、最後に各要素をドロップダウンリストに追加します.
表の動的な追加と削除
JavascriptでのDOM解析の使用
フォームには通常のボタンが定義されており、このボタンをクリックするとshow関数が呼び出され、show関数でinfo要素が取得され、表示内容が設定されます.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<script language="javascript">
function show(){
// DOM info ，
document.getElementById("info").innerHTML=
"<h2> DOM 。</h2>";
}
</script>
</head>
<body>
<form action="" method="post">
<input type="button" onclick="show()" value="show!">
<span id="info"></span>
</form>
</body>
</html>DOMによるドロップダウンリストボックスの生成
setFunメソッドでは、document.getElementById(「area」)でareaドロップダウンリストボックスのオブジェクトを取得し、length設定でドロップダウンリストボックスを毎回1つしか選択できないようにし、最初のオプションをデフォルト選択に設定します.ドロップダウンリストには複数のoptionが存在するため、setArrribute()メソッドで各optionに含まれるvalueプロパティの内容を設定し、各optionに表示内容を示すテキストノードを設定し、最後に各要素をドロップダウンリストに追加します.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<script language="javascript">
function setFun(){
var id = new Array(1,2,3);
var value = new Array(" "," "," ");
var select = document.getElementById("area");
select.length = 1;
select.options[0].selected = true;
for(var x = 0; x<id.length;x++){
// option ， option
var option = document.createElement("option");
option.setAttribute("value",id[x]);
// option
option.appendChild(document.createTextNode(value[x]));
select.appendChild(option);
}
}
</script>
</head>
<body onLoad="setFun()">
<form>
<select name="area" id="area">
<option value="0"> </option>
</select>
</form>
</body>
</html>表の動的な追加と削除
<html>
<head>
<title>test</title>
<script language="javascript">
var count = 3 ;
function addrow(){
var table = document.getElementById("mytab") ;
var tr = table.insertRow() ; //
var td1 = tr.insertCell(); //
var td2 = tr.insertCell() ; //
var td3 = tr.insertCell() ; //
td1.innerHTML = "001" + count ;
td2.innerHTML = " - " + count ;
td3.innerHTML = "<input type='button' value='-' onclick='deleterow(this)'>" ;
count ++ ;
}
function deleterow(btn){
var tr = btn.parentNode.parentNode ;
var table = document.getElementById("mytab") ;
table.deleteRow(tr.rowIndex) ;
}
</script>
</head>
<body>
<input type="button" value="+" onclick="addrow()">
<TABLE id="mytab" border="1">
<TR>
<TD>001</TD>
<TD> </TD>
<TD><input type="button" value="-" onclick="deleterow(this)"></TD>
</TR>
<TR>
<TD>002</TD>
<TD> </TD>
<TD><input type="button" value="-" onclick="deleterow(this)"></TD>
</TR>
</TABLE>
</body>
</html>