読者です 読者をやめる 読者になる 読者になる

おもしろwebサービス開発日記

Ruby や Rails を中心に、web技術について書いています

サイ本15章まとめ

javascript

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

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

DOM(Document Object Model)

ドキュメントを構成するオブジェクトにアクセスする方法を定義したAPIのこと。W3Cからレベル1からレベル3までが勧告されている。レベル1勧告以前にブラウザに組み込まれていたDOMはレベル0と呼ばれ、それは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:レベル1勧告時に組み込まれたみたい

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

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