Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Andere mochten auch
Ähnlich wie JavaScript&Firebug入門
Mehr von 柴田 篤志
Kürzlich hochgeladen
Kürzlich hochgeladen (9)
JavaScript&Firebug入門
- 1. 第 6 回 SE 勉強会 2008/5/11 （日）
- 2. JavaScript & Firebug 入門
- 4. DOM って何？
- 5. DOM = Document Object Model
- 6. 意味は？
- 7. Web ページの内容 ( 文章、画像、音声など ) およびそれらの配置、スタイルを オブジェクトとして扱い、 スクリプト言語を使って制御するための 取り決め。 引用 ： IT 用語辞典
- 8. もう少し簡単に言うと、
- 9. HTML を JavaScript から 操作する為の取り決め。
- 10. 徐々に掘り下げていきます
- 11. sample.html <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title> サンプルページ </title> </head> <body> <h1> はじめまして </h1> <p id=“profile”> 私の名前は○○です。 </p> </body> </html>
- 13. 目を凝らすと・・・・
- 14. sample.html html head meta title サンプルページ body h1 はじめまして p 私の名前は○○です。
- 15. ツリー状になってますね
- 17. 『ノード』は幾つか種類があって、
- 18. ・要素ノード ・テキストノード ・属性ノード など
- 19. 先ほどの例だと、
- 20. ・『 <p> 』が要素ノード ・『私の～です。』がテキストノード ・『 id=“profile” 』が属性ノード <p id=“profile”> 私の名前は○○です。 </p>
- 21. 続いて、 HTML の取得方法
- 23. getElementById の 使い方 <p id="profile"> 私の名前は○○です。 </p> <script type="text/javascript"> var profile = document.getElementById('profile'); </script> 「 profile 」という id を指定した要素を 取得できる
- 24. これを Firebug で見てみると・・・ （ブラウザ上で確認します）
- 28. getElementsByTagName の 使い方 <p> 私の名前は○○です。 </p> <p> 出身は○○です。 </p> <script type="text/javascript"> var profile = document.getElementsByTagName('p'); </script> 「 p 」タグの要素を取得できる
- 29. 「 P 」タグが 2 つあるけど、どうなるの？
- 30. 2 つとも取得できます
- 31. 複数取得できるから、 Element s なんだね
- 32. これを Firebug で見てみると・・・ （ブラウザ上で確認します）
- 33. 終わり