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 読み込み中止
// 現在のページを移動させる window.location.href = "http://google.com";
// 登録する <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";