Suche senden
Hochladen
DOMの勉強会
•
Als ODP, PDF herunterladen
•
7 gefällt mir
•
7,095 views
Ken SASAKI
Folgen
DMM.comラボの社内勉強会資料。 DOMの勉強をしてみた。
Weniger lesen
Mehr lesen
Technologie
Melden
Teilen
Melden
Teilen
1 von 20
Jetzt herunterladen
Empfohlen
マイクラ自動化枠第3回資料
マイクラ自動化枠第3回資料
Ryo Fujita
独学道場アセンブリの会
独学道場アセンブリの会
Ryota Suenaga
[秋田ハンズオン]網元起動隊資料
[秋田ハンズオン]網元起動隊資料
Hiromichi Koga
マイクラの今までとこれからと時々レッドストーン
マイクラの今までとこれからと時々レッドストーン
先生 赤石
戦車乗りもmBaaSでメール送信できるかもしれない件
戦車乗りもmBaaSでメール送信できるかもしれない件
Wataru Sato
Cloud Core VPSにマイクラ鯖を立てた話
Cloud Core VPSにマイクラ鯖を立てた話
deflis
Packerで自動化
Packerで自動化
Shintaro Hasunuma
ICTSC6 ちょっとだけ数学の話
ICTSC6 ちょっとだけ数学の話
Ken SASAKI
Empfohlen
マイクラ自動化枠第3回資料
マイクラ自動化枠第3回資料
Ryo Fujita
独学道場アセンブリの会
独学道場アセンブリの会
Ryota Suenaga
[秋田ハンズオン]網元起動隊資料
[秋田ハンズオン]網元起動隊資料
Hiromichi Koga
マイクラの今までとこれからと時々レッドストーン
マイクラの今までとこれからと時々レッドストーン
先生 赤石
戦車乗りもmBaaSでメール送信できるかもしれない件
戦車乗りもmBaaSでメール送信できるかもしれない件
Wataru Sato
Cloud Core VPSにマイクラ鯖を立てた話
Cloud Core VPSにマイクラ鯖を立てた話
deflis
Packerで自動化
Packerで自動化
Shintaro Hasunuma
ICTSC6 ちょっとだけ数学の話
ICTSC6 ちょっとだけ数学の話
Ken SASAKI
イケてないIPv6とどう付き合う?
イケてないIPv6とどう付き合う?
Ken SASAKI
スキルパターン作成のお話
スキルパターン作成のお話
Ken SASAKI
オーケストラについて
オーケストラについて
Ken SASAKI
IPv6にどう取り組むか
IPv6にどう取り組むか
Ken SASAKI
ICTトラブルシューティングコンテスト LT資料
ICTトラブルシューティングコンテスト LT資料
Ken SASAKI
ICTSC5 DMM.comラボの紹介+お給料の話
ICTSC5 DMM.comラボの紹介+お給料の話
Ken SASAKI
インフラエンジニアのスキルパターンを作ってみた話
インフラエンジニアのスキルパターンを作ってみた話
Ken SASAKI
20160227-ictsc5-LT
20160227-ictsc5-LT
Yuuki Mori
レスポンシブおっぱいでまなぶスケーラブルグラフィックス
レスポンシブおっぱいでまなぶスケーラブルグラフィックス
minoru nakanou
SONiCインストールしてみた
SONiCインストールしてみた
wataken44
ICTSCって知ってますか?_さくらの夕べ 仙台
ICTSCって知ってますか?_さくらの夕べ 仙台
Yuuki Kadowaki
Index makes your book perfect
Index makes your book perfect
Keiichiro Shikano
JSer Class #2
JSer Class #2
mizuky fujitani
電子出版はどこを 目指すのか・技術書編
電子出版はどこを 目指すのか・技術書編
masayoshi takahashi
Hyper-V を使おう
Hyper-V を使おう
wataken44
ICTSC_DMM_recruit
ICTSC_DMM_recruit
Mikami Takuya
IPv6移行の現状 〜 宅内端末から見た IPv6 と IPv4〜
IPv6移行の現状 〜 宅内端末から見た IPv6 と IPv4〜
Akira Nakagawa
CONBU API の開発
CONBU API の開発
TAKANO Mitsuhiro
カンファレンスネットワークのツクリカタ
カンファレンスネットワークのツクリカタ
Hiromichi Tomatsu
xUnitハンズオン第4回テキスト
xUnitハンズオン第4回テキスト
mizuky fujitani
業務改善できるかな?
業務改善できるかな?
Ken SASAKI
ステマネのお仕事
ステマネのお仕事
Ken SASAKI
Weitere ähnliche Inhalte
Andere mochten auch
イケてないIPv6とどう付き合う?
イケてないIPv6とどう付き合う?
Ken SASAKI
スキルパターン作成のお話
スキルパターン作成のお話
Ken SASAKI
オーケストラについて
オーケストラについて
Ken SASAKI
IPv6にどう取り組むか
IPv6にどう取り組むか
Ken SASAKI
ICTトラブルシューティングコンテスト LT資料
ICTトラブルシューティングコンテスト LT資料
Ken SASAKI
ICTSC5 DMM.comラボの紹介+お給料の話
ICTSC5 DMM.comラボの紹介+お給料の話
Ken SASAKI
インフラエンジニアのスキルパターンを作ってみた話
インフラエンジニアのスキルパターンを作ってみた話
Ken SASAKI
20160227-ictsc5-LT
20160227-ictsc5-LT
Yuuki Mori
レスポンシブおっぱいでまなぶスケーラブルグラフィックス
レスポンシブおっぱいでまなぶスケーラブルグラフィックス
minoru nakanou
SONiCインストールしてみた
SONiCインストールしてみた
wataken44
ICTSCって知ってますか?_さくらの夕べ 仙台
ICTSCって知ってますか?_さくらの夕べ 仙台
Yuuki Kadowaki
Index makes your book perfect
Index makes your book perfect
Keiichiro Shikano
JSer Class #2
JSer Class #2
mizuky fujitani
電子出版はどこを 目指すのか・技術書編
電子出版はどこを 目指すのか・技術書編
masayoshi takahashi
Hyper-V を使おう
Hyper-V を使おう
wataken44
ICTSC_DMM_recruit
ICTSC_DMM_recruit
Mikami Takuya
IPv6移行の現状 〜 宅内端末から見た IPv6 と IPv4〜
IPv6移行の現状 〜 宅内端末から見た IPv6 と IPv4〜
Akira Nakagawa
CONBU API の開発
CONBU API の開発
TAKANO Mitsuhiro
カンファレンスネットワークのツクリカタ
カンファレンスネットワークのツクリカタ
Hiromichi Tomatsu
xUnitハンズオン第4回テキスト
xUnitハンズオン第4回テキスト
mizuky fujitani
Andere mochten auch
(20)
イケてないIPv6とどう付き合う?
イケてないIPv6とどう付き合う?
スキルパターン作成のお話
スキルパターン作成のお話
オーケストラについて
オーケストラについて
IPv6にどう取り組むか
IPv6にどう取り組むか
ICTトラブルシューティングコンテスト LT資料
ICTトラブルシューティングコンテスト LT資料
ICTSC5 DMM.comラボの紹介+お給料の話
ICTSC5 DMM.comラボの紹介+お給料の話
インフラエンジニアのスキルパターンを作ってみた話
インフラエンジニアのスキルパターンを作ってみた話
20160227-ictsc5-LT
20160227-ictsc5-LT
レスポンシブおっぱいでまなぶスケーラブルグラフィックス
レスポンシブおっぱいでまなぶスケーラブルグラフィックス
SONiCインストールしてみた
SONiCインストールしてみた
ICTSCって知ってますか?_さくらの夕べ 仙台
ICTSCって知ってますか?_さくらの夕べ 仙台
Index makes your book perfect
Index makes your book perfect
JSer Class #2
JSer Class #2
電子出版はどこを 目指すのか・技術書編
電子出版はどこを 目指すのか・技術書編
Hyper-V を使おう
Hyper-V を使おう
ICTSC_DMM_recruit
ICTSC_DMM_recruit
IPv6移行の現状 〜 宅内端末から見た IPv6 と IPv4〜
IPv6移行の現状 〜 宅内端末から見た IPv6 と IPv4〜
CONBU API の開発
CONBU API の開発
カンファレンスネットワークのツクリカタ
カンファレンスネットワークのツクリカタ
xUnitハンズオン第4回テキスト
xUnitハンズオン第4回テキスト
Mehr von Ken SASAKI
業務改善できるかな?
業務改善できるかな?
Ken SASAKI
ステマネのお仕事
ステマネのお仕事
Ken SASAKI
The Internet Situation in Myanmar
The Internet Situation in Myanmar
Ken SASAKI
世界のインターネット ミャンマー編
世界のインターネット ミャンマー編
Ken SASAKI
さくらインターネット西新宿セミナールームと私
さくらインターネット西新宿セミナールームと私
Ken SASAKI
インターネットの仕組み enPiT資料
インターネットの仕組み enPiT資料
Ken SASAKI
通販チャレンジ ミャンマー編
通販チャレンジ ミャンマー編
Ken SASAKI
槓の光 for ssmonline #4
槓の光 for ssmonline #4
Ken SASAKI
リモートスクラム開発のノウハウ
リモートスクラム開発のノウハウ
Ken SASAKI
私が好きなITコミュニティイベント
私が好きなITコミュニティイベント
Ken SASAKI
リモートスクラム開発やってみた
リモートスクラム開発やってみた
Ken SASAKI
Wi-Fiのイマ Internet Week 2019 発表資料
Wi-Fiのイマ Internet Week 2019 発表資料
Ken SASAKI
中国のネットワーク勉強会 JANOG44野良BoF資料
中国のネットワーク勉強会 JANOG44野良BoF資料
Ken SASAKI
ダイビングのすゝめ
ダイビングのすゝめ
Ken SASAKI
「入門Kubernetes」輪読会資料 6章
「入門Kubernetes」輪読会資料 6章
Ken SASAKI
監視 〜 ネットワーク勉強会資料
監視 〜 ネットワーク勉強会資料
Ken SASAKI
オーケストラと&オーケストレーション
オーケストラと&オーケストレーション
Ken SASAKI
RFC 〜 ネットワーク勉強会
RFC 〜 ネットワーク勉強会
Ken SASAKI
各種ネットワーク機器と最近の技術動向 〜 ネットワーク勉強会
各種ネットワーク機器と最近の技術動向 〜 ネットワーク勉強会
Ken SASAKI
TCP 〜 ネットワーク勉強会資料
TCP 〜 ネットワーク勉強会資料
Ken SASAKI
Mehr von Ken SASAKI
(20)
業務改善できるかな?
業務改善できるかな?
ステマネのお仕事
ステマネのお仕事
The Internet Situation in Myanmar
The Internet Situation in Myanmar
世界のインターネット ミャンマー編
世界のインターネット ミャンマー編
さくらインターネット西新宿セミナールームと私
さくらインターネット西新宿セミナールームと私
インターネットの仕組み enPiT資料
インターネットの仕組み enPiT資料
通販チャレンジ ミャンマー編
通販チャレンジ ミャンマー編
槓の光 for ssmonline #4
槓の光 for ssmonline #4
リモートスクラム開発のノウハウ
リモートスクラム開発のノウハウ
私が好きなITコミュニティイベント
私が好きなITコミュニティイベント
リモートスクラム開発やってみた
リモートスクラム開発やってみた
Wi-Fiのイマ Internet Week 2019 発表資料
Wi-Fiのイマ Internet Week 2019 発表資料
中国のネットワーク勉強会 JANOG44野良BoF資料
中国のネットワーク勉強会 JANOG44野良BoF資料
ダイビングのすゝめ
ダイビングのすゝめ
「入門Kubernetes」輪読会資料 6章
「入門Kubernetes」輪読会資料 6章
監視 〜 ネットワーク勉強会資料
監視 〜 ネットワーク勉強会資料
オーケストラと&オーケストレーション
オーケストラと&オーケストレーション
RFC 〜 ネットワーク勉強会
RFC 〜 ネットワーク勉強会
各種ネットワーク機器と最近の技術動向 〜 ネットワーク勉強会
各種ネットワーク機器と最近の技術動向 〜 ネットワーク勉強会
TCP 〜 ネットワーク勉強会資料
TCP 〜 ネットワーク勉強会資料
Kürzlich hochgeladen
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
FumieNakayama
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
博三 太田
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
akihisamiyanaga1
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
sugiuralab
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
Yuki Kikuchi
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
Hiroshi Tomioka
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
FumieNakayama
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
UEHARA, Tetsutaro
Kürzlich hochgeladen
(8)
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
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 のものじゃ?? 興味を持ったら自分でも勉強してね!! 歴史、バージョン、モジュール等に注意して読み解いていくと わかっていくはず。 定義も変化してます。
Jetzt herunterladen