サイ本15章まとめ - おもしろwebサービス開発日記

14章に引き続き15章途中までの自分用まとめをメモっておきます。

DOM(Document Object Model)

ドキュメントを構成するオブジェクトにアクセスする方法を定義したAPIのこと。W3Cからレベル１からレベル３までが勧告されている。レベル１勧告以前にブラウザに組み込まれていたDOMはレベル０と呼ばれ、それはW3Cからは勧告されていない*1が、全てのブラウザでサポートされている。

DOMのレベル毎の違いが気になるので近いうちに調べて書きたいと思います。

ドキュメントコンテンツの動的な生成

write()メソッド

基本のdocument.write()。ドキュメント解析中に実行された場合は、その中に引数の文字列が埋め込まれます。ドキュメント解析後にイベントハンドラ等で呼び出された場合は今のドキュメントを消して上書きになります。ちなみに、writeln()というメソッドもあり、使うと出力の最後に改行を付けてくれます。

新しいドキュメントを作成するには、

document.open()
document.close()

を組み合わせます。open()は省略できるけれど、close()は必須です。(closeを呼び出すまでバッファしたコンテンツが画面上に表示されない)

また、document.writeは引数を複数指定できます。これは覚えておくと便利！！

これと

document.write("Hello", + username + "Welcome to my blog!")

これは一緒です。

var greeting = "Hello, ";
var welcome = " Welcome to my blog!"
document.write(greeting, username, welcome)

Documentオブジェクトのプロパティ

bgColor: bodyタグのbgcolorプロパティに対応（利用は推奨されていない）
cookie: クッキーの読み書き用のプロパティ
domain: 同一出身ポリシー制限を緩和するためのプロパティ
lastModified: ドキュメントの最終更新日時を表す文字列
referrer: リファラが入ってる
title: タイトル
URL: ドキュメントのURL。リダイレクトしてない限りwindow.location.hrefと同じ。
location: URLと同じ(推奨されていない)

Documentオブジェクトの配列プロパティ

ドキュメントの要素にアクセスするためのプロパティ。名前を見れば、何が入っているかはだいたいわかると思います。

anchors[]: アンカーが入っている
applets[]: Java アプレットが入っている
forms[]: フォームオブジェクトが入ってる
images[]: 画像が入ってる
links[]: リンクが入ってる

ドキュメントのオブジェクトへの名前付け

上記で説明した配列プロパティにアクセスするためには、form[2]のように位置情報を渡してあげる必要がありますが、これだとドキュメント要素の位置を変更した際に、javascript側のコードも変更しなければならなくなり面倒です。

name属性を使うと、名前を使用して要素を参照できます。例えば、

<form name="hoge"></form>

のようにname属性を付けると

form["hoge"]で指定できます。
form.hogeでも指定できます。
document.hogeでもアクセスできるようになります。*2
複数の要素に同じname属性をつけた時は、document.hoge[1]のように配列になります。

Documentオブジェクトのイベントハンドラ

目新しい話がなかったので省略。

Nodeオブジェクト

ドキュメントは、階層構造のNodeオブジェクトの集合からなります。HTML要素やbody要素、img要素などは全てNodeオブジェクトです。Nodeインタフェース*3には、ツリー構造を探索したり操作したりするためのプロパティやメソッドが定義されています。

Nodeインタフェースのプロパティ

名前を見ればどんなオブジェクトが入っているか、またはどんな働きをするメソッドかは大体わかるのではないかと思います。

childNodes
firstChild
lastChild
nextSibling
prevSibling
parentNode
appendChild()
removeChild()
replaceChilde()
insertBefore()

ノードの種類

ノードにはそれぞれ種類があり、サブインタフェースとして定義されています。整数値が格納されているnodeTypeプロパティの値をnodeType定数と比較することで種類を判別します。種類により、定義されているプロパティやメソッドが異なるようです。

例えば、Elementインタフェースであれば

getAttribute()
setAttribute()
removeAttribute()

などのメソッドが使えます。

インタフェース	nodeType定数	nodeTypeの値
Element	Node.ELEMENT_NODE	1
Text	Node.TEXT_NODE	3
Document	Node.DOCUMENT_NODE	9
Comment	Node.COMMENT_NODE	8
DocumentFragment	Node.DOCUMENT_FRAGMENT_NODE	11
Attr	Node.ATTRIBUTe_NODE	2

残り

残りはDOMレベル関連の話とDOM操作のメソッドの紹介なのですが、サイ本に書いてあることをそのまままとめてもいまいちな感じなので、近いうちに別の切り口でまとめようと思います。

*1:レベル１勧告時に組み込まれたみたい

*2:form, img, appletタグのいずれかのみ

*3:よくわからんけどDOMの標準仕様でインタフェースとして定義されているみたい