Your SlideShare is downloading. ×
0
1
DOM の勉強会
2014/3/26( 木 )
DMM.com ラボ
佐々木健
2
ある日の雑談
「最近のウェブの技術を理解するには DOM を理解する
のが楽なんじゃないかと〜」
↓
「 DOM って何それ?、とりあえず勉強会しよう」
ということで DOM の勉強会をします。
3
ドム
先週末に作りました。
プラニッパ必須です。
これさえあればガンプラは
誰でも作れます。
詳しくは専門家に聞いてく
ださい。
4
豆知識:ドムとリックドムの違い
ドム リックドム
形式番号 MS-09 MS-09R R※ が付いた
重量 62.5t 43.8t ※ 軽くなった
出力 1,269kw 1,199kw ※ 出力ダウン
推力 58,200kg 53,000k...
5
これじゃない??
ごめんなさい
6
DOM とは?
Object Model (DOM) は、 W3C から勧告されている
HTML 文書や XML 文書をアプリケーションから
利用するための API である。
Level 1 から Level 3 まで勧告されている。
fr...
7
別の観点から、、、、
ブラウザの中身ってどうなってるの?
ブラウザは、データを読みこむと、先ず、
レンダリング、を行なう。
レンダリングエンジンはHTMLドキュメントを
解析し、タグを「コンテンツ ツリー」というツ
リー内のDOMノードに変...
8
こういう感じに格納される
<TABLE>
<TBODY>
<TR>
<TD>Shady Grove</TD>
<TD>Aeolian</TD>
</TR>
<TR>
<TD>Over the River, Charlie</TD>
<TD>...
9
実際に見てみよう
●
最近のブラウザはDOMノードを確認したり操作したりするこ
とができる。
–
DOM Inspector
●
http://ja.wikipedia.org/wiki/DOM_Inspector
●
chromeのデベロ...
10
Sample: basic.html
●
HTML の情報がどのように格納されてる
か確認する。
–
html.body.section.article.div とか
●
値を変化させると表示が変わることを確
認する。
11
Sample: basic-cut.html
●
HTML5 ではタグの省略ができる。
●
比較してみる。
●
タグが省略されても同じ情報が格納され
てていることを確認してみる。
12
豆知識 HTML5 の定義
●
HTML の規格は、 HTML 4 までは、構文を定義していた。
●
HTML5 では従来の HTML の構文だけでなく、 XML(XTHML)
や DOM2HTML 等、データ構造そのものも考慮にいれてい...
13
DOM は API
●
Application Programming Interface
●
操作するための手法を定義している
●
JavaScript で操作できる。
●
chrome の JavaScript コンソールをいじってみ...
14
document.body 以下を childNodes
で掘り進む
document.body
document.body.childNodes
document.body.childNodes[4].childNodes[1].chi...
15
getElementById でショートカット
document.getElementById("sample")
document.getElementById("sample").innerText
document.getEleme...
16
GetElementsByTagName で
掘り進む
document.getElementsByTagName("article")
[0].getElementsByTagName("div")[0].innerText
docum...
17
Style も操作可能
document.getElementById("sample").style
document.getElementById("sample").style.color =
"yellow"
18
まとめ
DOM API を操作することにより、ウェブコンテン
ツの動的な操作が可能になるよ。
19
なんとなくわかりやすそうな比喩
PHP+MySQL の WebDB システムと、
ブラウザ上のシステムの比較
データベース データベース操
作
ロジック
WebDB システム MySQL SQL PHP
ブラウザシステ
ム
DOM ノード...
20
結局???
DOM ってなんなの?
API なの?データスキームなの?
CSS は DOM に含まれるの?
W3C での定義以外もあるの?
JavaScript って Mozilla のものじゃ??
興味を持ったら自分でも勉強してね!!
...
Upcoming SlideShare
Loading in...5
×

DOMの勉強会

4,719

Published on

DMM.comラボの社内勉強会資料。
DOMの勉強をしてみた。

Published in: Technology
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,719
On Slideshare
0
From Embeds
0
Number of Embeds
22
Actions
Shares
0
Downloads
10
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide

Transcript of "DOMの勉強会"

  1. 1. 1 DOM の勉強会 2014/3/26( 木 ) DMM.com ラボ 佐々木健
  2. 2. 2 ある日の雑談 「最近のウェブの技術を理解するには DOM を理解する のが楽なんじゃないかと〜」 ↓ 「 DOM って何それ?、とりあえず勉強会しよう」 ということで DOM の勉強会をします。
  3. 3. 3 ドム 先週末に作りました。 プラニッパ必須です。 これさえあればガンプラは 誰でも作れます。 詳しくは専門家に聞いてく ださい。
  4. 4. 4 豆知識:ドムとリックドムの違い ドム リックドム 形式番号 MS-09 MS-09R R※ が付いた 重量 62.5t 43.8t ※ 軽くなった 出力 1,269kw 1,199kw ※ 出力ダウン 推力 58,200kg 53,000kg ※ 推力ダウン 武装 ビームバズーカ追加 戦歴 先行量産型( 1 〜 3 号機) はオデッサの戦いにて全滅 3 分も経たずに 12 機が撃墜。
  5. 5. 5 これじゃない?? ごめんなさい
  6. 6. 6 DOM とは? Object Model (DOM) は、 W3C から勧告されている HTML 文書や XML 文書をアプリケーションから 利用するための API である。 Level 1 から Level 3 まで勧告されている。 from wikipedia http://ja.wikipedia.org/wiki/Document_Object_Model はあ??? まったくわからん。
  7. 7. 7 別の観点から、、、、 ブラウザの中身ってどうなってるの? ブラウザは、データを読みこむと、先ず、 レンダリング、を行なう。 レンダリングエンジンはHTMLドキュメントを 解析し、タグを「コンテンツ ツリー」というツ リー内のDOMノードに変換する。 参考 : ブラウザの仕組み : 最新ウェブブラウザの内部構造 http://www.html5rocks.com/ja/tutorials/internals/howbrowserswork/
  8. 8. 8 こういう感じに格納される <TABLE> <TBODY> <TR> <TD>Shady Grove</TD> <TD>Aeolian</TD> </TR> <TR> <TD>Over the River, Charlie</TD> <TD>Dorian</TD> </TR> </TBODY> </TABLE> ● W3C document – What is the Document Model http://www.w3.org/TR/1998/REC-DOM-Level-1-19981001/introduction.html
  9. 9. 9 実際に見てみよう ● 最近のブラウザはDOMノードを確認したり操作したりするこ とができる。 – DOM Inspector ● http://ja.wikipedia.org/wiki/DOM_Inspector ● chromeのデベロッパーツールで見てみる。 – URL欄の右をクリックして「ツール」から開ける。 Sample CodeはGitHubに置いた↓ https://github.com/sasakipochi/dom-study
  10. 10. 10 Sample: basic.html ● HTML の情報がどのように格納されてる か確認する。 – html.body.section.article.div とか ● 値を変化させると表示が変わることを確 認する。
  11. 11. 11 Sample: basic-cut.html ● HTML5 ではタグの省略ができる。 ● 比較してみる。 ● タグが省略されても同じ情報が格納され てていることを確認してみる。
  12. 12. 12 豆知識 HTML5 の定義 ● HTML の規格は、 HTML 4 までは、構文を定義していた。 ● HTML5 では従来の HTML の構文だけでなく、 XML(XTHML) や DOM2HTML 等、データ構造そのものも考慮にいれてい る。 ● HTML5 においては、 HTML 構文は規格の一部分。 ● 同じ実体を HTML 構文でも XML 構文でも表現できる。
  13. 13. 13 DOM は API ● Application Programming Interface ● 操作するための手法を定義している ● JavaScript で操作できる。 ● chrome の JavaScript コンソールをいじってみる これも URL 欄の右の「ツール」から開ける
  14. 14. 14 document.body 以下を childNodes で掘り進む document.body document.body.childNodes document.body.childNodes[4].childNodes[1].child Nodes[7].innerText document.body.childNodes[4].childNodes[1].child Nodes[7].innerText = " 変身 !!"
  15. 15. 15 getElementById でショートカット document.getElementById("sample") document.getElementById("sample").innerText document.getElementById("sample").innerText = "Change!!!!"
  16. 16. 16 GetElementsByTagName で 掘り進む document.getElementsByTagName("article") [0].getElementsByTagName("div")[0].innerText document.getElementsByTagName("article") [0].getElementsByTagName("div")[0].innerText = "hoge"
  17. 17. 17 Style も操作可能 document.getElementById("sample").style document.getElementById("sample").style.color = "yellow"
  18. 18. 18 まとめ DOM API を操作することにより、ウェブコンテン ツの動的な操作が可能になるよ。
  19. 19. 19 なんとなくわかりやすそうな比喩 PHP+MySQL の WebDB システムと、 ブラウザ上のシステムの比較 データベース データベース操 作 ロジック WebDB システム MySQL SQL PHP ブラウザシステ ム DOM ノード DOM ツリー DOM オブジェク ト DOM API JavaScript あくまで比喩です。 逆にわかりにくくなったらごめんなさい。
  20. 20. 20 結局??? DOM ってなんなの? API なの?データスキームなの? CSS は DOM に含まれるの? W3C での定義以外もあるの? JavaScript って Mozilla のものじゃ?? 興味を持ったら自分でも勉強してね!! 歴史、バージョン、モジュール等に注意して読み解いていくと わかっていくはず。 定義も変化してます。
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×