DOMの勉強会

DOMの勉強会 2014/3/26(木) DMM.comラボ 佐々木健 1

ある日の雑談 「最近のウェブの技術を理解するには DOMを理解するのが楽なんじゃないか と〜」 ↓ 「DOMって何それ？、とりあえず勉強 会しよう」 2

ドム 先週末に作りました。 プラニッパ必須です。 これさえあればガンプラは誰でも作れます。 詳しくは専門家に聞いてください。 3

豆知識：ドムとリックドムの違い ドム リックドム 形式番号 MS-09 MS-09R ※Rが付いた 重量 62.5t 43.8t ※軽くなった 出力 1,269kw 1,199kw ※出力ダウン 推力 58,200kg 53,000kg ※推力ダウン 武装 戦歴 ビームバズーカ追加 先行量産型（1〜3号機）は オデッサの戦いにて全滅 3分も経たずに12機が撃墜。 4

これじゃない？？ ごめんなさい 5

DOMとは？ Object Model (DOM) は、W3Cから勧告されている HTML文書やXML文書をアプリケーションから 利用するためのAPIである。 Level 1 から Level 3 まで勧告されている。 from wikipedia http://ja.wikipedia.org/wiki/Document_Object_Model はあ？？？ まったくわからん。 6

• http://ja.wikipedia.org/wiki/Document_Object_Model

別の観点から、、、、 ブラウザの中身ってどうなってるの？ ブラウザは、データを読みこむ と、先ず、 レンダリング、を行なう。 レンダリングエンジンはHTML 参考: ブラウザの仕組み: 最新ウェブブラウザの内部構造 http://www.html5rocks.com/ja/tutorials/internals/howbrowserswork/ 7

• http://www.html5rocks.com/ja/tutorials/internals/howbrowserswork/

こういう感じに格納される <TABLE> <TBODY> <TR> <TD>Shady Grove</TD> <TD>Aeolian</TD> </TR> <TR> W3C documentthe – What is the Document Model <TD>Over River, http://www.w3.org/TR/1998/REC-DOM-Level-1-19981001/introduction.html Charlie</TD> 8

• http://www.w3.org/TR/1998/REC-DOM-Level-1-19981001/introduction.html

実際に見てみよう 最近のブラウザはDOMノードを 確認したり操作したりすること ができる。 DOM Inspector http://ja.wikipedia.org/wiki/DOM _Inspector ● – ● 9

• http://ja.wikipedia.org/wiki/DOM

Sample: basic.html HTMLの情報がどのように格納されてるか確 認する。 html.body.section.article.div とか ● – 値を変化させると表示が変わることを確認 する。 ● 10

Sample: basic-cut.html ● ● HTML5ではタグの省略ができる。 比較してみる。 タグが省略されても同じ情報が格納されて ていることを確認してみる。 ● 11

豆知識 HTML5の定義 HTMLの規格は、HTML 4までは、構文を定 義していた。 ● HTML5では従来のHTMLの構文だけでな く、XML(XTHML)やDOM2HTML等、データ 構造そのものも考慮にいれている。 ● HTML5においては、HTML構文は規格の一 部分。 ● 12 ● 同じ実体をHTML構文でもXML構文でも表現

DOMはAPI ● ● ● Application Programming Interface 操作するための手法を定義している JavaScriptで操作できる。 chromeのJavaScriptコンソールをいじって 13 みる ●

document.body 以下をchildNodes で掘り進む document.body document.body.childNodes document.body.childNodes[4].childNodes[1].childNod document.body.childNodes[4].childNodes[1].childNod 14

getElementByIdでショートカット document.getElementById("sample") document.getElementById("sample").innerText document.getElementById("sample").innerText = "Cha 15

GetElementsByTagNameで 掘り進む document.getElementsByTagName("article")[0].getEle document.getElementsByTagName("article")[0].getEle 16

Styleも操作可能 document.getElementById("sample").style document.getElementById("sample").style.color = "ye 17

まとめ DOM APIを操作することにより、ウェブコンテンツの 18

なんとなくわかりやすそうな比喩 PHP+MySQLのWebDBシステムと、 ブラウザ上のシステムの比較 WebDBシステム ブラウザシステ ム データベース データベース操 作 ロジック MySQL SQL PHP DOM API DOMノード DOMツリー DOMオブジェクト あくまで比喩です。 逆にわかりにくくなったらごめんなさい。 JavaScript 19

結局？？？ DOMってなんなの？ APIなの？データスキームなの？ CSSはDOMに含まれるの？ W3Cでの定義以外もあるの？ JavaScriptってMozillaのものじゃ？？ 興味を持ったら自分でも勉強してね！！ 歴史、バージョン、モジュール等に注意して読み解いていくと わかっていくはず。 定義も変化してます。 20