• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
DOMの勉強会
 

DOMの勉強会

on

  • 3,710 views

DMM.comラボの社内勉強会資料。

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

Statistics

Views

Total Views
3,710
Views on SlideShare
1,189
Embed Views
2,521

Actions

Likes
4
Downloads
8
Comments
0

13 Embeds 2,521

http://tsuchinoko.dmmlabs.com 2104
http://www.pochi.cc 235
http://feedly.com 152
http://grape 11
http://s.deeeki.com 6
http://reader.aol.com 3
http://www.feedspot.com 3
http://digg.com 2
http://inoreader.com 1
http://reader.aol.co.jp 1
http://webcache.googleusercontent.com 1
http://www.newsblur.com 1
https://twitter.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as OpenOffice

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    DOMの勉強会 DOMの勉強会 Presentation Transcript

    • 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,000kg ※ 推力ダウン 武装 ビームバズーカ追加 戦歴 先行量産型( 1 〜 3 号機) はオデッサの戦いにて全滅 3 分も経たずに 12 機が撃墜。
    • 5 これじゃない?? ごめんなさい
    • 6 DOM とは? Object Model (DOM) は、 W3C から勧告されている HTML 文書や XML 文書をアプリケーションから 利用するための API である。 Level 1 から Level 3 まで勧告されている。 from wikipedia http://ja.wikipedia.org/wiki/Document_Object_Model はあ??? まったくわからん。
    • 7 別の観点から、、、、 ブラウザの中身ってどうなってるの? ブラウザは、データを読みこむと、先ず、 レンダリング、を行なう。 レンダリングエンジンはHTMLドキュメントを 解析し、タグを「コンテンツ ツリー」というツ リー内のDOMノードに変換する。 参考 : ブラウザの仕組み : 最新ウェブブラウザの内部構造 http://www.html5rocks.com/ja/tutorials/internals/howbrowserswork/
    • 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 実際に見てみよう ● 最近のブラウザはDOMノードを確認したり操作したりするこ とができる。 – DOM Inspector ● http://ja.wikipedia.org/wiki/DOM_Inspector ● chromeのデベロッパーツールで見てみる。 – URL欄の右をクリックして「ツール」から開ける。 Sample CodeはGitHubに置いた↓ https://github.com/sasakipochi/dom-study
    • 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 等、データ構造そのものも考慮にいれてい る。 ● HTML5 においては、 HTML 構文は規格の一部分。 ● 同じ実体を HTML 構文でも XML 構文でも表現できる。
    • 13 DOM は API ● Application Programming Interface ● 操作するための手法を定義している ● JavaScript で操作できる。 ● chrome の JavaScript コンソールをいじってみる これも URL 欄の右の「ツール」から開ける
    • 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 getElementById でショートカット document.getElementById("sample") document.getElementById("sample").innerText document.getElementById("sample").innerText = "Change!!!!"
    • 16 GetElementsByTagName で 掘り進む document.getElementsByTagName("article") [0].getElementsByTagName("div")[0].innerText document.getElementsByTagName("article") [0].getElementsByTagName("div")[0].innerText = "hoge"
    • 17 Style も操作可能 document.getElementById("sample").style document.getElementById("sample").style.color = "yellow"
    • 18 まとめ DOM API を操作することにより、ウェブコンテン ツの動的な操作が可能になるよ。
    • 19 なんとなくわかりやすそうな比喩 PHP+MySQL の WebDB システムと、 ブラウザ上のシステムの比較 データベース データベース操 作 ロジック WebDB システム MySQL SQL PHP ブラウザシステ ム DOM ノード DOM ツリー DOM オブジェク ト DOM API JavaScript あくまで比喩です。 逆にわかりにくくなったらごめんなさい。
    • 20 結局??? DOM ってなんなの? API なの?データスキームなの? CSS は DOM に含まれるの? W3C での定義以外もあるの? JavaScript って Mozilla のものじゃ?? 興味を持ったら自分でも勉強してね!! 歴史、バージョン、モジュール等に注意して読み解いていくと わかっていくはず。 定義も変化してます。