3. アジェンダ
• DOM とは?
• 標準的な DOM アクセス
• JavaScript における DOM アクセス
• ライブラリを利用した DOM アクセス
4. DOM: Document Object Model とは?
HTML 文書や XML 文書をアプリケーショ
ンから利用するための API
• XML データをツリー構造として扱う
• 対象のXML文書を全て読み込んでからの
扱いを前提
– 動作速度が遅い
– メモリーの使用量が大きい
• JavaScript では HTML の DOM を利用し
た各要素への操作が必要なことが多い
5. ノード間の関係性の例
Parent Node p Parent Node
First Child Last Child
strong Next Sibling How are you doing?
Previous Sibling
Parent First Child,
Node Last Child
Hello
<p><strong>Hello</strong>How
are you doing?</p>
6. 各ノードは他のノードへのポインタを持つ
Parent Node
Previous Sibling DOM Next Sibling
Node
First Child Last Child
10. こんな関数を用意すると、、、
// XML Document 内のホワイトスペースを除去する関数
function cleanWhitespace( element ) {
element = element || document;
var cur = element.firstChild;
// 子ノードがなくなるまでホワイトスペースを除去
while ( cur != null ) {
// 対象ノードがテキストノードかつホワイトスペースのみの場合
if ( cur.nodeType == 3 && ! /¥S/.test( cur.nodeValue ) )
element.removeChild( cur );
else if ( cur.nodeType == 1 )
cleanWhitespace( cur );
cur = cur.nextSibling;
}
}
12. よく利用するノードのタイプ
• Element (nodeType == 1)
– XML における主要要素にマッチ
– <a>,<p>,<body>
• Text (nodeType == 3)
– ドキュメントないのテキストにマッチ
• Document (nodeType == 9)
– ドキュメントのルート要素にマッチ
– HTML なら <html>
13. 標準 DOM メソッド
JavaScript では DOM へ効率的にアクセスで
きるメソッドが用意されている (最もよく使
う)
getElementByID(quot;everywherequot;)
everywhere にマッチする ID 属性を持つ
DOM 要素にアクセスできる
getElementsByTagName(quot;liquot;)
li にマッチするノードのリスト(配列のよう
なもの)を返す
14. 利用例
document.getElementsByTagName(quot;h1“)[0];
var li =
document.getElementsByTagName( 'li' );
for ( var j = 0, k = li.length; j < k; j++ ) {
li[j].style.border = '1px solid #000';
}
document.getElementById(quot;everywherequot;).style.
fontWeight = 'bold';