<DOM - Document Object Model>
現時点での理解
HTML文書内のタグをツリー構造としたモデル(Document Tree)を使う。
たとえば、"html"はその直枝に"head"と"body"を持つ。
このツリーモデルをどうやって操作するか、というルールの集合がDOM?
ドキュメントツリー
ドキュメントツリー上のノードには以下のような種類がある
- オブジェクトノード
- オブジェクト(大体はタグ)そのもの
- テキストノード
- テキスト、つまりタグに囲まれた部分（<a>〜〜〜</a>の「〜〜〜」の部分）。囲んでいるタグの直下の要素。
スペースや
タブもテキストノードに含まれることに注意。
他にもコメントとかいろいろあるけどよく知らん。
ツリーの探索・ズームイン的アプローチ
あるノードにアクセスするのに、ツリー全体を見渡して、目的のノードに直接アクセスする方法。
ツリー上のノードに直接アクセスする為には、以下の3つのメソッドを使う。
ちなみにドットシンタックス。
- document.getElementById
- タグに個別に設定されたid(id属性の中身)でノードを特定する->最も精度が良い
- document.getElementByTagName
- メソッドの対象の中から指定したタグ名のタグを全て抜き出してリストする->まとめて処理するのに向く
- document.getElementByName
- name属性を持つタグをnameで特定する。->idと違ってnameは重複が許される分精度が悪い
ByTagNameとByNameは、Nodelistオブジェクトを返す。
また、ByName要素はdocumentオブジェクトにのみ適用できる（->絞り込みには使えない）。
ツリーの探索・木登り的アプローチ
あるノードにアクセスするのに、他のノードからツリーを昇り下りして辿り着く手法。
各ドキュメントノードは、自身と継っているノードについて4つのプロパティを持つ。
- childNodes
- 内包するノードのリスト(NodeList)
- firstchild
- 内包するノードの先頭(childNodesの先頭)ノード
- lastchild
- 内包するノードの最後(childNodesの最後)ノード
- parentNode
- 自分を内包するノード(親ノード)
この他に、あるノードが他のノードを内包しているか、を調べるhasChildNodesメソッドがある。
ノード首見検
いろんな方法でアクセスしたノードが一体何者なのかをチェックする方法。
- nodeName
- そのノードのタグ名(大文字で返ってくる)
- nodeValue
- テキストノード(またはコメントノード)が持つテキスト。前者は「オブジェクト」、後者は「前者の持つ値」。テキストでもコメントでもないノードの場合はnullが返る。
- nodeType
- そのノードの種類、つまりドキュメントノードなのか、テキストノードなのか、など。値は整数値。
- getAttribute('attribute')
- そのノードが持つ属性の値を返すメソッド。属性名を与える。
- className
- class属性の値を持つプロパティ。getAttributeを使わず直接class属性を参照する場合はこちらを使う。getAttributeを使う場合はgetAttribute('class')とする(IE以外)。
- setAttribute('attribute','value')
- そのノードが持つ属性に値をセットするメソッド。attributeが目的の属性、valueがセットする値。直接プロパティにアクセスしても勿論OK.
この他に、あるノードが他のノードを内包しているか、を調べるhasChildNodesメソッドがある。
ノードをいじり倒す
ノードにノードを入れたり抜いたりする方法。
create系メソッドで新たな要素を作り、
それを
appendChildメソッドでどこかのノードの要素として配置する。
- document.createElement('NodeName')
- 'NodeName'のノードを生成する。'NodeName'は大体タグ名のことだと思う。
- document.createTextNode('TextNodeName')
- テキストノード'TextNodeName'NodeName'を生成する。
- parent.appendChild('child')
- ノードオブジェクトchildをノードオブジェクトparentの子要素とする。
- parent.removeChild('child')
- ノードオブジェクトparentから子要素childを削除する。parentオブジェクトは、child.parentNodeで代用可。
accend->index page