SlideShare a Scribd company logo
1 of 33
第 6 回 SE 勉強会  2008/5/11 (日)
JavaScript & Firebug  入門
DOM って聞いたことあるよね?
DOM って何?
DOM = Document Object Model
意味は?
Web ページの内容 ( 文章、画像、音声など ) およびそれらの配置、スタイルを オブジェクトとして扱い、 スクリプト言語を使って制御するための 取り決め。 引用 :  IT 用語辞典 
もう少し簡単に言うと、
HTML を JavaScript から 操作する為の取り決め。
徐々に掘り下げていきます
sample.html <html> <head> <meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot;> <title> サンプルページ </title> </head> <body> <h1> はじめまして </h1> <p id=“profile”> 私の名前は○○です。 </p> </body> </html>
HTML はそのままだとタグの列挙に 見えるけど、
目を凝らすと・・・・
sample.html html head meta title サンプルページ body h1 はじめまして p 私の名前は○○です。
ツリー状になってますね
このツリーは『ノード』というもので 構成されています
『ノード』は幾つか種類があって、
    ・要素ノード     ・テキストノード     ・属性ノード                 など
先ほどの例だと、
・『 <p> 』が要素ノード ・『私の~です。』がテキストノード ・『 id=“profile” 』が属性ノード <p id=“profile”> 私の名前は○○です。 </p>
続いて、 HTML の取得方法
getElementById というメソッドで取得できる
getElementById  の 使い方 <p id=&quot;profile&quot;> 私の名前は○○です。 </p> <script type=&quot;text/javascript&quot;> var profile = document.getElementById('profile'); </script> 「 profile 」という id を指定した要素を 取得できる
これを Firebug で見てみると・・・ (ブラウザ上で確認します)
getElementsByTagName というメソッドでも取得できる
メソッド名からなんとなく推測すると、
タグ名で指定して要素を取得できそう
getElementsByTagName  の 使い方 <p> 私の名前は○○です。 </p> <p> 出身は○○です。 </p> <script type=&quot;text/javascript&quot;> var profile = document.getElementsByTagName('p'); </script> 「 p 」タグの要素を取得できる
「 P 」タグが 2 つあるけど、どうなるの?
2 つとも取得できます
複数取得できるから、 Element s   なんだね
これを Firebug で見てみると・・・ (ブラウザ上で確認します)
終わり

More Related Content

What's hot (10)

Semantic html が止まらない
Semantic html が止まらないSemantic html が止まらない
Semantic html が止まらない
 
20080823-TransformingPlainTextToHtml
20080823-TransformingPlainTextToHtml20080823-TransformingPlainTextToHtml
20080823-TransformingPlainTextToHtml
 
Html&cssの書き方入門編
Html&cssの書き方入門編Html&cssの書き方入門編
Html&cssの書き方入門編
 
Htmlの基礎
Htmlの基礎Htmlの基礎
Htmlの基礎
 
最速HTML勉強会
最速HTML勉強会最速HTML勉強会
最速HTML勉強会
 
噴水企画Web講習会
噴水企画Web講習会噴水企画Web講習会
噴水企画Web講習会
 
京都 IT講座 9月
京都 IT講座 9月京都 IT講座 9月
京都 IT講座 9月
 
Html
HtmlHtml
Html
 
糖質制限超入門
糖質制限超入門糖質制限超入門
糖質制限超入門
 
糖質とプログラミングと私
糖質とプログラミングと私糖質とプログラミングと私
糖質とプログラミングと私
 

Viewers also liked (9)

第1回SE勉強会(080302)
第1回SE勉強会(080302)第1回SE勉強会(080302)
第1回SE勉強会(080302)
 
Nagoya.phpについて
Nagoya.phpについてNagoya.phpについて
Nagoya.phpについて
 
Score for slideshare
Score for slideshareScore for slideshare
Score for slideshare
 
Life Hack
Life HackLife Hack
Life Hack
 
CakePHPのコンポーネントの使い方(080316)
CakePHPのコンポーネントの使い方(080316)CakePHPのコンポーネントの使い方(080316)
CakePHPのコンポーネントの使い方(080316)
 
Google Maps Api活用事例~飲食店案内ネット一六社マップ~
Google Maps Api活用事例~飲食店案内ネット一六社マップ~Google Maps Api活用事例~飲食店案内ネット一六社マップ~
Google Maps Api活用事例~飲食店案内ネット一六社マップ~
 
ソーシャルメディアを利用したビジネス展開
ソーシャルメディアを利用したビジネス展開ソーシャルメディアを利用したビジネス展開
ソーシャルメディアを利用したビジネス展開
 
CakeMatsuri事例紹介「CakePHPでつくる地域SNS ~全国40ヶ所以上で展開する地域SNSのシステム~」
CakeMatsuri事例紹介「CakePHPでつくる地域SNS ~全国40ヶ所以上で展開する地域SNSのシステム~」CakeMatsuri事例紹介「CakePHPでつくる地域SNS ~全国40ヶ所以上で展開する地域SNSのシステム~」
CakeMatsuri事例紹介「CakePHPでつくる地域SNS ~全国40ヶ所以上で展開する地域SNSのシステム~」
 
Cake Php ページ送り機能
Cake Php ページ送り機能Cake Php ページ送り機能
Cake Php ページ送り機能
 

Similar to JavaScript&Firebug入門 (20)

webを飾る技術
webを飾る技術webを飾る技術
webを飾る技術
 
Java Script4
Java Script4Java Script4
Java Script4
 
今日からはじめるHTML5 ver.2012
今日からはじめるHTML5 ver.2012今日からはじめるHTML5 ver.2012
今日からはじめるHTML5 ver.2012
 
電技研Web講習
電技研Web講習電技研Web講習
電技研Web講習
 
Module02
Module02Module02
Module02
 
HTML5でセマンティックなマークアップ
HTML5でセマンティックなマークアップHTML5でセマンティックなマークアップ
HTML5でセマンティックなマークアップ
 
京都IT研修講座
京都IT研修講座京都IT研修講座
京都IT研修講座
 
kyoto IT
kyoto ITkyoto IT
kyoto IT
 
京都 IT研修講座
京都 IT研修講座京都 IT研修講座
京都 IT研修講座
 
京都 IT講座 9月
京都 IT講座 9月京都 IT講座 9月
京都 IT講座 9月
 
京都 IT講座 9月
京都 IT講座 9月京都 IT講座 9月
京都 IT講座 9月
 
IT研修講座
IT研修講座IT研修講座
IT研修講座
 
it研修講座
it研修講座it研修講座
it研修講座
 
It01
It01It01
It01
 
itkensyukouza2008
itkensyukouza2008itkensyukouza2008
itkensyukouza2008
 
HTML5など社内勉強会 Vol.1 - HTML, CSS, HTML5
HTML5など社内勉強会 Vol.1 - HTML, CSS, HTML5HTML5など社内勉強会 Vol.1 - HTML, CSS, HTML5
HTML5など社内勉強会 Vol.1 - HTML, CSS, HTML5
 
Html part1
Html part1Html part1
Html part1
 
it研修講座
it研修講座it研修講座
it研修講座
 
it研修講座 aki
it研修講座 akiit研修講座 aki
it研修講座 aki
 
Sendai.html5#2
Sendai.html5#2Sendai.html5#2
Sendai.html5#2
 

More from 柴田 篤志

オープンソースカンファレンス2009Nagoya
オープンソースカンファレンス2009Nagoyaオープンソースカンファレンス2009Nagoya
オープンソースカンファレンス2009Nagoya
柴田 篤志
 

More from 柴田 篤志 (10)

ライフハックでストレスフリーな仕事術
ライフハックでストレスフリーな仕事術ライフハックでストレスフリーな仕事術
ライフハックでストレスフリーな仕事術
 
オープンソースカンファレンス2009Nagoya
オープンソースカンファレンス2009Nagoyaオープンソースカンファレンス2009Nagoya
オープンソースカンファレンス2009Nagoya
 
Cake Phpで簡単問い合わせフォームの作り方
Cake Phpで簡単問い合わせフォームの作り方Cake Phpで簡単問い合わせフォームの作り方
Cake Phpで簡単問い合わせフォームの作り方
 
Cake Php開発事例
Cake Php開発事例Cake Php開発事例
Cake Php開発事例
 
Cake PhpでやってみようOpen Id入門
Cake PhpでやってみようOpen Id入門Cake PhpでやってみようOpen Id入門
Cake PhpでやってみようOpen Id入門
 
一六社ブログ-プラグイン作成入門
一六社ブログ-プラグイン作成入門一六社ブログ-プラグイン作成入門
一六社ブログ-プラグイン作成入門
 
Cake Php パン屋へ行こう
Cake Php パン屋へ行こうCake Php パン屋へ行こう
Cake Php パン屋へ行こう
 
Cake Php キャッシュのやり方
Cake Php キャッシュのやり方Cake Php キャッシュのやり方
Cake Php キャッシュのやり方
 
開発ツールの紹介(080316)
開発ツールの紹介(080316)開発ツールの紹介(080316)
開発ツールの紹介(080316)
 
CakePHPで開発する時に統一しておきたいコーディング内容(080316)
CakePHPで開発する時に統一しておきたいコーディング内容(080316)CakePHPで開発する時に統一しておきたいコーディング内容(080316)
CakePHPで開発する時に統一しておきたいコーディング内容(080316)
 

Recently uploaded

2024年5月25日Serverless Meetup大阪 アプリケーションをどこで動かすべきなのか.pptx
2024年5月25日Serverless Meetup大阪 アプリケーションをどこで動かすべきなのか.pptx2024年5月25日Serverless Meetup大阪 アプリケーションをどこで動かすべきなのか.pptx
2024年5月25日Serverless Meetup大阪 アプリケーションをどこで動かすべきなのか.pptx
ssuserbefd24
 
研究紹介スライド: オフライン強化学習に基づくロボティックスワームの制御器の設計
研究紹介スライド: オフライン強化学習に基づくロボティックスワームの制御器の設計研究紹介スライド: オフライン強化学習に基づくロボティックスワームの制御器の設計
研究紹介スライド: オフライン強化学習に基づくロボティックスワームの制御器の設計
atsushi061452
 

Recently uploaded (12)

5/22 第23回 Customer系エンジニア座談会のスライド 公開用 西口瑛一
5/22 第23回 Customer系エンジニア座談会のスライド 公開用 西口瑛一5/22 第23回 Customer系エンジニア座談会のスライド 公開用 西口瑛一
5/22 第23回 Customer系エンジニア座談会のスライド 公開用 西口瑛一
 
ロボットマニピュレーションの作業・動作計画 / rosjp_planning_for_robotic_manipulation_20240521
ロボットマニピュレーションの作業・動作計画 / rosjp_planning_for_robotic_manipulation_20240521ロボットマニピュレーションの作業・動作計画 / rosjp_planning_for_robotic_manipulation_20240521
ロボットマニピュレーションの作業・動作計画 / rosjp_planning_for_robotic_manipulation_20240521
 
Intranet Development v1.0 (TSG LIVE! 12 LT )
Intranet Development v1.0 (TSG LIVE! 12 LT )Intranet Development v1.0 (TSG LIVE! 12 LT )
Intranet Development v1.0 (TSG LIVE! 12 LT )
 
情報を表現するときのポイント
情報を表現するときのポイント情報を表現するときのポイント
情報を表現するときのポイント
 
論文紹介:Deep Occlusion-Aware Instance Segmentation With Overlapping BiLayers
論文紹介:Deep Occlusion-Aware Instance Segmentation With Overlapping BiLayers論文紹介:Deep Occlusion-Aware Instance Segmentation With Overlapping BiLayers
論文紹介:Deep Occlusion-Aware Instance Segmentation With Overlapping BiLayers
 
論文紹介:ViTPose: Simple Vision Transformer Baselines for Human Pose Estimation
論文紹介:ViTPose: Simple Vision Transformer Baselines for Human Pose Estimation論文紹介:ViTPose: Simple Vision Transformer Baselines for Human Pose Estimation
論文紹介:ViTPose: Simple Vision Transformer Baselines for Human Pose Estimation
 
2024年5月25日Serverless Meetup大阪 アプリケーションをどこで動かすべきなのか.pptx
2024年5月25日Serverless Meetup大阪 アプリケーションをどこで動かすべきなのか.pptx2024年5月25日Serverless Meetup大阪 アプリケーションをどこで動かすべきなのか.pptx
2024年5月25日Serverless Meetup大阪 アプリケーションをどこで動かすべきなのか.pptx
 
部内勉強会(IT用語ざっくり学習) 実施日:2024年5月17日(金) 対象者:営業部社員
部内勉強会(IT用語ざっくり学習) 実施日:2024年5月17日(金) 対象者:営業部社員部内勉強会(IT用語ざっくり学習) 実施日:2024年5月17日(金) 対象者:営業部社員
部内勉強会(IT用語ざっくり学習) 実施日:2024年5月17日(金) 対象者:営業部社員
 
20240523_IoTLT_vol111_kitazaki_v1___.pdf
20240523_IoTLT_vol111_kitazaki_v1___.pdf20240523_IoTLT_vol111_kitazaki_v1___.pdf
20240523_IoTLT_vol111_kitazaki_v1___.pdf
 
研究紹介スライド: オフライン強化学習に基づくロボティックスワームの制御器の設計
研究紹介スライド: オフライン強化学習に基づくロボティックスワームの制御器の設計研究紹介スライド: オフライン強化学習に基づくロボティックスワームの制御器の設計
研究紹介スライド: オフライン強化学習に基づくロボティックスワームの制御器の設計
 
クラウド時代におけるSREとUPWARDの取組ーUPWARD株式会社 CTO門畑
クラウド時代におけるSREとUPWARDの取組ーUPWARD株式会社 CTO門畑クラウド時代におけるSREとUPWARDの取組ーUPWARD株式会社 CTO門畑
クラウド時代におけるSREとUPWARDの取組ーUPWARD株式会社 CTO門畑
 
Amazon Cognitoで実装するパスキー (Security-JAWS【第33回】 勉強会)
Amazon Cognitoで実装するパスキー (Security-JAWS【第33回】 勉強会)Amazon Cognitoで実装するパスキー (Security-JAWS【第33回】 勉強会)
Amazon Cognitoで実装するパスキー (Security-JAWS【第33回】 勉強会)
 

JavaScript&Firebug入門