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

キーボードイベント

キーボード関連のイベントオブジェクトには次のようなものがあります。

type

altKey

ctrlKey

shiftKey

keyCode

charCode