若手IT勉強会 - 第6回勉強会 サイ本読書会第15章

JavaScript 勉強会

15.1〜15.3 レガシーDOM

DOM…Document Object Model。ドキュメントを構成するオブジェクトにアクセスする方法を定義したAPI。
レガシーDOM…Netscape2,3でサポートされたDOM。後にDOMレベル0として標準化。

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

document.writeメソッド

  • ドキュメント解析中のみdocument.writeメソッドでコンテンツの動的生成が可能
  • 新規ドキュメントの作成…open->write->close
  • ドキュメント解析後にwriteメソッドを実行すると、既存ドキュメントを破棄して新規ドキュメントを作成しopenするのと同じ事になってしまう。
15.3Documentオブジェクトの配列プロパティ
  • anchors,applets,forms,images,links
  • 各要素の属性の読み書きは出来ても、「ドキュメントの「構造」自体は変更出来ない」
    • 〜Netscape4、〜IE3などのような古いブラウザではレイアウトの変更は出来ないため。
  • 厳密には配列ではなく配列風オブジェクトであるHTMLCollection
document.links instanceof Array;//false
document.links instanceof HTMLCollection;//true
15.3.1　ドキュメントのオブジェクトへの名前付け

name属性をつける事で名前でアクセスできるようにする。
name="hoge"のimg要素へのアクセス。

$$('img')[0].name='hoge';
// ↑Firebugの関数を使用してます
document.images['hoge'];//<img …
document.images[0]==document.images['hoge'];//true
document.images[0]==document.images.hoge;//true

form,img,applet要素についてはdocumentから直接名前でアクセス出来る

document.hoge==document.images.hoge;//true

2つ以上の要素のname属性に同じ名前を振ると、
documentから名前でアクセス出来るオブジェクトは要素自身ではなく
配列風オブジェクトとなる。

$$('form')[0].name='hoge';
// ↑Firebugの関数を使用してます
document.hoge.length;//2
document.hoge[0];//<img …
document.hoge[1];//<form …
document.hoge instanceof NodeList;//true

15.4〜15.9 W3C DOM

  • ドキュメントをツリー構造として表現
  • ノード
    • Document∈Node
    • Element∈Node
    • Text∈Node
    • Attr∈Node
属性 Attrオブジェクト
  • ツリーには含まれない
  • getAttribute、setAttribute、removeAttributeメソッド
  • attributes[index or name]
  • IEのattributesは互換性無し
  • そのタグの標準属性ならHTMLElementオブジェクトから属性名のプロパティでアクセス可能
div=$$('div')[0];
div.id==div.getAttribute('id');//true
div.className='class-hoge';
div.className==div.getAttribute('class');//true
div.hoge='hoge-hoge';
div.getAttribute('hoge');//null
div.setAttribute('hoge','hoge-hoge');
div.getAttribute('hoge');//hoge-hoge
15.4.4 DOMレベル
  • レベル1
    • Core
  • レベル2
    • Core,Views,Events,CSS,Style,Traversal,Range,HTML
15.4.6 プログラミング言語から独立したDOMインタフェース

コンストラクタではなくファクトリメソッド

//× new Text('hogehoge');
document.createTextNode('hogehoge');
document.createElement('span');
document.implementation.createDocument(null,"html",null);
15.5 ドキュメントの探索

ドキュメントが完全に読み込まれるまでは、ドキュメントのツリー構造を探索したり操作したりできません(この条件についての詳細は13.5.7項を参照してください。)

jQueryの$(document).readyをjQuery非依存にする。 - 文殊堂

15.6 ドキュメント中の要素の検索
  • htmlタグ document.documentElement
  • bodyタグ document.body
  • タグ名で取得 document.getElementsByTagName()
    • 全部のタグ document.getElementsByTagName('*')
      • IE5、IE5.5では非対応->document.all
  • document.getElementById()
  • Element.getElementsByTagName()
15.7 ドキュメントの変更

getElementById()の戻り値のNodeListはライブなオブジェクト

15.8 ドキュメントコンテンツの追加
  • 新規Nodeの作成
    • document.createTextNode
    • document.createElement
  • 追加
    • Node.appendChild()
    • Node.insertBefore()
15.7.2 ドキュメントフラグメントの操作
15.8.2 innerHTMLプロパティ

該当要素のタグの中身の部分HTMLを取得・設定出来る。

15.10 選択されたテキストの読み出し

15.11 IE 4 DOM

「本書の執筆時点では、IE4はもうあまり使われていません。」とのことなので割愛。