DOMとは
「Document Object Model」の略です。
ノードの特定
getElementsByTagName
bodyノードを参照する場合はgetElementsByTagNameを利用して例えば次のように記述します。
var bodynodes = document.getElementsByTagName('body');
getElementsById
パラグラフ「p3」のテキストを参照するにはgetElementsByIdを利用して次のように指定します。
var p_text = document.getElementsById('p3').childNodes[0];
テキストノードへの参照はchildNodes[0]もしくはfirstChildを利用して参照します。
ノード間の関係
parentNode
childNodes
firstNode
lastNode
previousSibling
nextSibling
DOMの利用
<html>
<head>
<title>タイトルだよ</title>
<script language="javascript" type="text/javascript">
var num=5;
function addlistitem(){
num++;
var elem = document.createElement('li');
elem.id = 'item' + num;
var caption = document.createTextNode('リスト番号' + num);
elem.appendChild(caption);
document.getElementById('list').appendChild(elem);
}
</script>
</head>
<body>本文だよ</body>
</html>
イベントの種類
DOMイベントモデルでは、イベントハンドラー（onloadなど）は使用せずに、 イベントリスナーを使用します。
load
unload
abort
select
change
submit
reset
resize
focus
blur
click
mousedown
mouseup
mouseover
mousemove
mouseout
keydown
keyup
keypress
イベントリスナーの設定
window.addEventListenerを使用してイベントリスナーを設定します。
window.addEventListener('load',setLis,false);
第一引数はイベント名、第二引数はイベントをキャッチしたときに実行する関数名、第三引数はイベントキャプチャーをおこなうかどうかの指定です。
<html>
<head>
<title>タイトルだよ</title>
<script language="javascript" type="text/javascript">
function lower2Upper(e){
var text = document.getElementById('text1')
var lower = text.value.toUpperCase();
text.value = lower;
}
function setLis(e){
var text = document.getElementById('text1')
text.addEventListener('keyup',lower2Upper,false);
}
window.addEventListener('load',setLis,false);
</script>
</head>
<body>
<input type="text" name="text1" id="text1" />
</html>
マウスイベント
マウス関連のイベントオブジェクトには次のようなものがあります。
type
screenX
screenY
clientX
clientY
altKey
ctrlKey
shiftKey
metaKey
button
detail
キーボードイベント
キーボード関連のイベントオブジェクトには次のようなものがあります。