Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (19)
Jslunch5
- 1. JavaScript Lunch 5 June 5, 2008 Naofumi HAIDA Cirius Technologies
- 2. JavaScript Lunch 目次 • Object 指向的 JavaScript (第1回) • ライブラリ • 継承 • jQuery • クロージャ • Introduction ($ 関数) • Reusable Codes (第2回) • Packaging • jQuery UI • デバッグ、テストツール • prototype.js • Firebug • Yahoo! UI Today’s • DOM Topic! • Mochi Kit • Basics of DOM • Effect • XPath • JavaScript & CSS (第4回) • Events • Improving Forms • Ajax • その他 • 仕組み (第3回) • Processing JS • デザインパターン
- 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
- 7. <html> <head> このHTML の各要素へ <title>初めてのDOM</title> アクセスし </head> てみます。 <body> <h1></h1> <p class= “test” >DOMとは？</p> <ul> <li id= quot;everywherequot; >A</li> <li class= quot;testquot; >B</li> <li class= quot;testquot; >C</li> </ul> </body> </html>
- 8. ノードポインタを利用した DOMアクセス ルート要素 <html> へのアクセス document.documentElement <h1> へのアクセス document .documentElement .firstChild .nextSibling .firstChild
- 9. ノードポインタを利用した DOMアクセスの注意点 • 整形された、見た目奇麗な HTML におい ては失敗する – ホワイトスペースを除去することで解決 • 冗長、実用的でない • テキスト要素に直接アクセスするケース は稀 – 通常はその周囲の DOM 要素にアクセスする
- 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; } }
- 11. ノードポインタを利用した DOMアクセス // 文書内のホワイトスペースを除去 cleanWhitespace(); // ポインタを利用して <p> にアクセス document.documentElement .firstChild // <head> .nextSibling // <body> .firstChild // <h1> .nextSibling; // <p>
- 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';
- 15. その他の DOM 要素へのアクセス方法 • よく利用される DOM へのアクセス方法は他に、 以下の３種類 • いずれもライブラリを利用 – クラス名でアクセス • hasClass('test'); • http://simon.incutio.com/ – CSS クエリでアクセス • cssQuery( 'div > p' ); • http://dean.edwards.name/my/cssQuery/ – XPath でアクセス • document.evaluate('//div', document, null, 7, null); • http://coderepos.org/share/wiki/JavaScript-XPath
- 16. jQuery //<div class=quot;linksquot;><p></p></div> $( 'div.links[p]' ); // <p></p>, <div></div> の子孫全て $( 'p, div' ).find( '*' ); // <a href='google.com'> 以外のリンク $('a[@href^=quot;google.comquot;]:even');