DOM
DOM.とは
DESC
DOM は Document Object Model の略
HTML や XML で記述された各要素を取り扱うための標準インタフェースとして定義され
各言語からアクセスできる。
WARNING
これはブラウザがホストとして実行した時に扱えるオブジェクトであり
wscript, cscript の扱う対象ではない。
とりあえず使ってみる
DESC
HTML の各要素は Node として階層構造をもつので,
その参照をとって各操作をすることで, Document の内容を動的に制御する
<script type="text/javascript">
<!--
function func() {
// <img> タグをつくる
var oImg = document.createElement('img');
// Attribute を指定する
oImg.setAttribute("src", "icon.gif");
// setAttribute の代わりに直接 Property を指定する
oImg.src = "icon.gif";
// 子供に指定する
// Node は id で検索できる
var oDiv = document.getElementById("test");
oDiv.appendChild( oImg );
}
// -->
</script>
<!-- OK をおすと 画像がでます -->
<div id="test"></div>
<input type="button" value="OK" onclick="func()">
Object.の.property.をしらべる
POINT
Node を操作するには, Node の Property, Method を知る必要がある
JavaScript の for - in を利用すれば Property, Method 一覧を取得できる
コールバックなども Property として存在する。
// Property を d:/prop.txt へ出力
// IE で動作することを確認
<div id="test">test</div>
<script type="text/javascript">
// for 文で Object の property 名を取得する
var o = document.getElementById("test");
var fs = new ActiveXObject("Scripting.FileSystemObject");
var fp = fs.OpenTextFile("d:/prop.txt", 2, true );
var s;
for ( s in o ) {
fp.WriteLine( s );
}
fp.Close();
</script>
Form
つくるには <form> の子に配置して name でたどる
<script>
function test()
{
alert("ボタンを押した");
}
</script>
<form name="test">
<button onClick="test()">
</form>
Form.を利用して簡単な足し算をしてみる
A [ ]
B [ ] [=]
結果[ ]
<script type="text/javascript">
<!--
function func() {
var a = parseFloat(document.F1.T1.value);
var b = parseFloat(document.F1.T2.value);
document.F1.T3.value = a + b;
}
// -->
</script>
<form name="F1" action="#">
<input type="text" name="T1">
<input type="text" name="T2">
<input type="button" value="＝" onclick="func()">
<input type="text" name="T3">
</form>
POINT
form の値をとるには document.F1.T1.value といった階層をたどれば OK
form に名前( ID )をつけておくこと
var xx = parseFloat(document.F1.T1.value);
Form.におこる.Event.をフックする
↑ですでに [ Button を押したとき ] といった Event を Hook する
* 他にもいろいろ
SYNTAX
window.document.form.handleEvent( Form 属性 )
Object
Node.Object
POINT
オブジェクト志向なので, 各ノードはクラス階層をもつ。
各ノードは階層構造をもち, 名前, id などの共通の属性をもつ
// 階層を参照する
element.childNodes ( 自分の直下の子供のリスト )
element.parentNode
element.firstChild
element.lastChild
element.previousSibling
element.nextSibling
WARNING
プロパティとしてアクセスすること。
var a = obj.childNodes;
window.Object
POINT
階層の最上位のノード
そのため省略をできる
POINT
子供には以下がいる
document、image、form、history、location
メソッド プロパティ
alert( msg ) アラーとメッセージの表示
blur ウィンドウを背面に移動させる。
clearInterval(timer) インターバルタイマーの解除
clearTimeout(timer) タイマーの解除
close ウィンドウを閉じる。
confirm(value) 確認ダイアログの表示
focus ウィンドウにフォーカスをあてる。
home ホームページへ移動
moveBy(x, y) x, y で移動量を指定してウィンドウを移動させる。
moveTo(x, y) x, y で座標を指定してウィンドウを移動させる。
open([url,] [name,] [option]) ウィンドウを開く
print 印刷
prompt(value) 文字入力形式のダイアログを開く。
resizeBy(x, y) x, y で移動量を指定してウィンドウサイズを変更
resizeTo(x, y) x, y で指定したサイズにウィンドウをリサイズ。
// スクロール
scrollBy(x, y) x, y で移動量を指定してページをスクロール。
scrollTo(x, y) 絶対値で指定した位置へスクロール ( x（左端）, y（右下） )
setInterval(action, interval) 一定時間間隔に action をよびだす
setTimeout(action, time) 一定時間後に action をよびだす
stop 読み込み中止
// 登録する
<body>
<script>
setTimeout( function(){ setPosition() },500 );
// 2 秒ごとに起動する
setInterval( function(){ alert("call timer"); },2000 );
</script>
</body>
WARNING
IE では 次のように指定すると handler が起動しなくなる
setInterval( moveDiv(), 2000 );
// 再度指定してもダメ
setInterval( function(){ moveDiv() }, 100 );
Document.Object
property
cookie
// ドキュメントの URL (
http://domain/foo/bar.htm )
//
WARNING
// 参照だけで設定はできない. 設定する時は window.location.href を使う
URL
// Title
title
// body
body
// id で検索
var root = document.getElementById( "root" );
// 要素を作成( create )する
document.
function addElement() {
// tag 名を指定して作成する
var o = document.createElement('div');
o.id = "id";
o.innerHTML = "hoge";
o.style.backgroundColor = 'red';
var objBody = document.getElementsByTagName("body").item(0);
objBody.appendChild(element);
// body要素にdivエレメントを追加
}
document.getElementById(id)
DESC
id 属性で指定した名前で要素を参照します
oElement = document.getElementById("id1");
function func2()
{
// id=imgA をとって
var img = document.getElementById( "imgA" );
alert( img.getAttribute("src") );
}
<body>
<img id="imgA" src="imgA.bmp">
<input type="button" value="OK" onclick="func2()">
</body>
getElementsByTagName
DESC
tag名で検索する。
SYNTAX
Array getElementsByTagName( name )
// <ul> タグをすべて取得する。 Array Object がかえる。
var a = root.getElementsByTagName("ul");
// 要素数 と 各要素
a.length;
a[0];
element.getElementsByName(name)
name 属性で指定した名前で要素リストを参照します
oElements = document.getElementsByName("namae");
oElements = oElement.getElementsByName("namae");
// <ul> をすべて取得
var a = root.getElementsByTagName("ul");
function func4()
{
// id=imgB をとって
var img = document.getElementById( "imgB" );
alert( img.getAttribute("src") );
}
<body>
<img id="imgA" src="imgA.bmp">
<input type="button" value="OK" onclick="func2()">
</body>
element.getElementsByName(name)
DESC
name 属性で指定した名前で要素リストを参照します
oElements = document.getElementsByName("namae");
oElements = oElement.getElementsByName("namae");
StyleSheet.を操作する
SYNTAX
obj.style.property
obj.className
DESC
DOM ( Script ) から StyleSheet を設定する。
POINT
property 名は StyleSheet 名と対応づいている
// css <-> DOM
font-size <-> fontSize
var o = document.getElementsById( "test" );
o.style.fontSize = "smaller";
o.style.display = "none";
class 全体を変更するには className プロパティを変更する。
o.className = "red";
o.className = "green";
