Location via proxy:
[ UP ]
[Report a bug]
[Manage cookies]
No cookies
No scripts
No ads
No referrer
Show this form
Submit Search
Submit Search
Upload
DOMの勉強会
•
Download as ODP, PDF
•
7 likes
•
7,099 views
DMM.comラボの社内勉強会資料。 DOMの勉強をしてみた。
Read less
Read more
1 of 20
Download now
More Related Content
DOMの勉強会
1.
1 DOM の勉強会 2014/3/26( 木
) DMM.com ラボ 佐々木健
2.
2 ある日の雑談 「最近のウェブの技術を理解するには DOM を理解する のが楽なんじゃないかと〜」 ↓ 「
DOM って何それ?、とりあえず勉強会しよう」 ということで DOM の勉強会をします。
3.
3 ドム 先週末に作りました。 プラニッパ必須です。 これさえあればガンプラは 誰でも作れます。 詳しくは専門家に聞いてく ださい。
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 これじゃない?? ごめんなさい
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 別の観点から、、、、 ブラウザの中身ってどうなってるの? ブラウザは、データを読みこむと、先ず、 レンダリング、を行なう。 レンダリングエンジンはHTMLドキュメントを 解析し、タグを「コンテンツ ツリー」というツ リー内のDOMノードに変換する。 参考 :
ブラウザの仕組み : 最新ウェブブラウザの内部構造 http://www.html5rocks.com/ja/tutorials/internals/howbrowserswork/
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 実際に見てみよう ● 最近のブラウザはDOMノードを確認したり操作したりするこ とができる。 – DOM Inspector ● http://ja.wikipedia.org/wiki/DOM_Inspector ● chromeのデベロッパーツールで見てみる。 – URL欄の右をクリックして「ツール」から開ける。 Sample CodeはGitHubに置いた↓ https://github.com/sasakipochi/dom-study
10.
10 Sample: basic.html ● HTML の情報がどのように格納されてる か確認する。 – html.body.section.article.div
とか ● 値を変化させると表示が変わることを確 認する。
11.
11 Sample: basic-cut.html ● HTML5 ではタグの省略ができる。 ● 比較してみる。 ● タグが省略されても同じ情報が格納され てていることを確認してみる。
12.
12 豆知識 HTML5 の定義 ● HTML
の規格は、 HTML 4 までは、構文を定義していた。 ● HTML5 では従来の HTML の構文だけでなく、 XML(XTHML) や DOM2HTML 等、データ構造そのものも考慮にいれてい る。 ● HTML5 においては、 HTML 構文は規格の一部分。 ● 同じ実体を HTML 構文でも XML 構文でも表現できる。
13.
13 DOM は API ● Application
Programming Interface ● 操作するための手法を定義している ● JavaScript で操作できる。 ● chrome の JavaScript コンソールをいじってみる これも URL 欄の右の「ツール」から開ける
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 getElementById でショートカット document.getElementById("sample") document.getElementById("sample").innerText document.getElementById("sample").innerText = "Change!!!!"
16.
16 GetElementsByTagName で 掘り進む document.getElementsByTagName("article") [0].getElementsByTagName("div")[0].innerText document.getElementsByTagName("article") [0].getElementsByTagName("div")[0].innerText = "hoge"
17.
17 Style も操作可能 document.getElementById("sample").style document.getElementById("sample").style.color = "yellow"
18.
18 まとめ DOM API を操作することにより、ウェブコンテン ツの動的な操作が可能になるよ。
19.
19 なんとなくわかりやすそうな比喩 PHP+MySQL の WebDB
システムと、 ブラウザ上のシステムの比較 データベース データベース操 作 ロジック WebDB システム MySQL SQL PHP ブラウザシステ ム DOM ノード DOM ツリー DOM オブジェク ト DOM API JavaScript あくまで比喩です。 逆にわかりにくくなったらごめんなさい。
20.
20 結局??? DOM ってなんなの? API なの?データスキームなの? CSS
は DOM に含まれるの? W3C での定義以外もあるの? JavaScript って Mozilla のものじゃ?? 興味を持ったら自分でも勉強してね!! 歴史、バージョン、モジュール等に注意して読み解いていくと わかっていくはず。 定義も変化してます。
Download now