「JavaScript中級講座〜Ajaxを学ぶ前の基礎知識」を読む(2)

前回からの続きです。

§4 Webブラウザの操作

イベントのハンドリングやフォームの操作等について。この章はかなり流し読み。

Windowオブジェクトの概要 (p112)

ブラウザのウィンドウは、Windowオブジェクトを頂点にオブジェクトが階層関係を持っている。§5で出てくるDOMと同様。例えば、Windowオブジェクト以下はこんな感じ。

Windowオブジェクト
- Documentオブジェクト
- Locationオブジェクト
- Historyオブジェクト
- Frameオブジェクト

JavaScriptでイベントハンドラを定義する (pp.119-120)

HTML上の各要素に対してイベントハンドラを定義できる。例えば、ページの最初の読み込み時に何か動作をさせた時には、

window.onload = function(){
    行いたい処理
}

という風に定義できる（もちろん、上記のように無名関数でなくても良い）

タイマー処理 (pp.148-150)

一定時間毎に処理を行わせたい時は、

id = setInverval(func, time);

登録したタイマー処理を止めたい場合は

clearInterval(id);

でOK。

§5 DOM (Document Object Model)

DOMとはHTML文書を操作する際の標準I/F*1。HTMLを動的に変化させたい場合に使う。

隣接関係にあるノードを得る (p165)

DOMはツリー構造を持っているので、ノードを辿って処理を行う事が可能。ノードを得るプロパティは以下の通り。

プロパティ	内容
childNodes	直下の階層にある全ての子ノード。Arrayオブジェクトで取得できる
firstChild	先頭の子ノード
lastChild	末尾の子ノード
previousSibling	直前のノード
nextSibling	直後のノード
parentNode	親ノード

ノードの種類と値を調べる

各ノードには、以下のプロパティが存在する。

nodeType … 種別
nodeName … 名前
nodeValue … 値（ex. 属性の値やノードの中身の文字列）

表でまとめると、

ノードの種類	nodeType	nodeName	nodeValue
要素ノード	1	タグの名前（大文字）	null
属性ノード	2	属性の名前（小文字）	属性の値
テキストノード	3	#text	ノードの中身の文字列
コメントノード	8	#comment	ノードの中身のコメント
ドキュメントノード	9	#document	null

要素ノードの場合、タグの名前は大文字という点に注意。例えば、

aNode.nodeName == "UL"

だと、所望の結果が得られるが

aNode.nodeName == "ul"

と、小文字だと上手く行かない。

指定されたノードをトレースし関数を実行する関数は、こんな感じ。

function recursiveParse(parentNode, func){
    var childNodes = parentNode.childNodes;

    for (var i = 0; i < childNodes.length; i++){
	var node = childNodes[i]

        if (node.nodeType == 1){ // 要素ノード
            recursiveParse(node, func);
        } else if (node.nodeType == 3){ // テキストノード
            node.nodeValue = func(node.nodeValue);
        }
    }
}

結構キレイに書ける。

ノードを動的に追加/削除する (pp.171-180)

node = document.createElement("p"); // p要素のノードを作成
parentNode.appendChild(aNode); // 子ノード達の最後にaNodeを追加
parentNode.insertBefore(aNode, childNode); // childNodeの前にaNodeを追加
bNode = aNode.cloneNode(true); // aNodeのコピーを作成
parentNode.removeChild(aNode); // aNodeを削除 (※)

(※)のように、いちいちparentNodeを持ってくるのもめんどくさいので、

aNode.parentNode.removeChild(aNode);

としてもOK。

要素ノードにHTMLを流し込む (pp.176-177)

aNode.innerHTML = 流し込むHTML;

スタイルシートにアクセスする (pp.181-188)

ex.1) ノードで指定した要素を非表示にする。

aNode.style.display = "none";

ex.2) IDで指定した要素のクラス毎書き換える。

document.getElementById("ID名").className = "aClassName";

イベントリスナーを使ったイベント処理 (pp.189-199)

要素に対して何らかのアクションを受けたときに発生させる処理を登録することができる。イベントハンドラに似ているが、

HTMLのオブジェクト → イベントハンドラ
HTMLの要素 → イベントリスナー

と、呼び分けている？*2。

例として、ある要素にイベントを追加する場合は、以下の通り。

aNode.addEventListner(イベント名, 関数, t/f);

コード例を上げると、

var aNode = document.getElementById("id");
aNode.addEventListner("click", func, false);

第3引数がtrueの場合は、対象の要素へのキャプチャフェーズで処理を発生させる。falseの場合は、対象の要素へイベントを発生させ後のバブリングフェーズで処理を発生させる。
文章で読むより、JavaScript addEventListener() - とみぞーノートのコードを実際に動かすとよく分かる。

今日はここまで。

*1:しかし、Internet Explorer一部対応できていない

*2:オライリー本では、便宜的にどちらもイベントハンドラと呼んでいる

@uents blog

Code wins arguments.