DOMを知って コーディングをもっと楽しむ       德田 和規(nori) / 5509
DOMを知って コーディングをもっと楽しむ       德田 和規(nori) / 5509
DOMってなんだろ
DOMってなんだろ
DOMってなんだろ• ドキュメントオブジェクトモデル
DOMってなんだろ• ドキュメントオブジェクトモデル• HTMLをひとつのツリー構造として見る
DOMってなんだろ• ドキュメントオブジェクトモデル• HTMLをひとつのツリー構造として見る• ツリー構造 = 家系図
ドキュメントオブジェクトモデル
ドキュメントオブジェクトモデル• ドキュメント = HTML
ドキュメントオブジェクトモデル• ドキュメント = HTML• オブジェクト = HTML要素
ドキュメントオブジェクトモデル• ドキュメント = HTML• オブジェクト = HTML要素• モデル = 捉え方
ドキュメントオブジェクトモデル• ドキュメント = HTML• オブジェクト = HTML要素• モデル = 捉え方
ドキュメントオブジェクトモデル• ドキュメント = HTML• オブジェクト = HTML要素• モデル = 捉え方
HTMLをひとつのツリー構造として見るたとえば以下のようなHTML<html>  <head>     <title>title</title>  </head>  <body>     <h1>heading1</h1>     <div> ...
HTMLをひとつのツリー構造として見るたとえば以下のようなHTML<html>  <head>     <title>title</title>  </head>  <body>     <h1>heading1</h1>     <div> ...
HTMLをひとつのツリー構造として見るたとえば以下のようなHTML<html>  <head>     <title>title</title>  </head>  <body>     <h1>heading1</h1>     <div> ...
HTMLをひとつのツリー構造として見るたとえば以下のようなHTML<html>  <head>     <title>title</title>  </head>  <body>     <h1>heading1</h1>     <div> ...
HTMLをひとつのツリー構造として見るたとえば以下のようなHTML<html>  <head>     <title>title</title>  </head>  <body>     <h1>heading1</h1>     <div> ...
HTMLをひとつのツリー構造として見るたとえば以下のようなHTML<html>  <head>     <title>title</title>  </head>  <body>     <h1>heading1</h1>     <div> ...
HTMLをひとつのツリー構造として見るDOMツリーにするとこんな感じ
HTMLをひとつのツリー構造として見るDOMツリーにするとこんな感じ
HTMLをひとつのツリー構造として見るDOMツリーにするとこんな感じ
ツリー = 家系図ちょっと見方を変えてみましょう
ツリー = 家系図ちょっと見方を変えてみましょう
セレクタとの関係オレンジの丸で囲んだ人(要素)を中心とすると他の人(要素)との関係はこんな感じ
セレクタとの関係オレンジの丸で囲んだ人(要素)を中心とすると他の人(要素)との関係はこんな感じ
セレクタとの関係オレンジの丸で囲んだ人(要素)を中心とすると他の人(要素)との関係はこんな感じ
起点からのアクセスjQueryを使えば起点から簡単にアクセスできる
起点からのアクセスjQueryを使えば起点から簡単にアクセスできる         $(‘h1’)
起点からのアクセスjQueryを使えば起点から簡単にアクセスできる                   $(‘h1’).parent()         $(‘h1’)
起点からのアクセスjQueryを使えば起点から簡単にアクセスできる                   $(‘h1’).parent()                                  $(‘h1’).next()      ...
起点からのアクセスjQueryを使えば起点から簡単にアクセスできる                   $(‘h1’).parent()                                  $(‘h1’).next()      ...
起点からのアクセスjQueryを使えば起点から簡単にアクセスできる                                   $(‘h1’).parent()                                      ...
起点からのアクセスjQueryを使えば起点から簡単にアクセスできる      $(‘h1’).parent().parent()                                        $(‘h1’).parent()  ...
起点からのアクセス jQueryを使えば起点から簡単にアクセスできる                       $(‘h1’).parent().parent()$(‘h1’)   .parent()   .parent()         ...
起点からのアクセス jQueryを使えば起点から簡単にアクセスできる                        $(‘h1’).parent().parent()$(‘h1’)   .parent()   .parent()        ...
Upcoming SlideShare
Loading in …5
×

Dom

1,466 views

Published on

Published in: Technology, Self Improvement
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,466
On SlideShare
0
From Embeds
0
Number of Embeds
313
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Dom

    1. 1. DOMを知って コーディングをもっと楽しむ 德田 和規(nori) / 5509
    2. 2. DOMを知って コーディングをもっと楽しむ 德田 和規(nori) / 5509
    3. 3. DOMってなんだろ
    4. 4. DOMってなんだろ
    5. 5. DOMってなんだろ• ドキュメントオブジェクトモデル
    6. 6. DOMってなんだろ• ドキュメントオブジェクトモデル• HTMLをひとつのツリー構造として見る
    7. 7. DOMってなんだろ• ドキュメントオブジェクトモデル• HTMLをひとつのツリー構造として見る• ツリー構造 = 家系図
    8. 8. ドキュメントオブジェクトモデル
    9. 9. ドキュメントオブジェクトモデル• ドキュメント = HTML
    10. 10. ドキュメントオブジェクトモデル• ドキュメント = HTML• オブジェクト = HTML要素
    11. 11. ドキュメントオブジェクトモデル• ドキュメント = HTML• オブジェクト = HTML要素• モデル = 捉え方
    12. 12. ドキュメントオブジェクトモデル• ドキュメント = HTML• オブジェクト = HTML要素• モデル = 捉え方
    13. 13. ドキュメントオブジェクトモデル• ドキュメント = HTML• オブジェクト = HTML要素• モデル = 捉え方
    14. 14. HTMLをひとつのツリー構造として見るたとえば以下のようなHTML<html> <head> <title>title</title> </head> <body> <h1>heading1</h1> <div> <h2>heading2</h2> <p>hogehoge</p> </div> </body></html>
    15. 15. HTMLをひとつのツリー構造として見るたとえば以下のようなHTML<html> <head> <title>title</title> </head> <body> <h1>heading1</h1> <div> <h2>heading2</h2> <p>hogehoge</p> </div> </body></html>
    16. 16. HTMLをひとつのツリー構造として見るたとえば以下のようなHTML<html> <head> <title>title</title> </head> <body> <h1>heading1</h1> <div> <h2>heading2</h2> <p>hogehoge</p> </div> </body></html>
    17. 17. HTMLをひとつのツリー構造として見るたとえば以下のようなHTML<html> <head> <title>title</title> </head> <body> <h1>heading1</h1> <div> <h2>heading2</h2> <p>hogehoge</p> </div> </body></html>
    18. 18. HTMLをひとつのツリー構造として見るたとえば以下のようなHTML<html> <head> <title>title</title> </head> <body> <h1>heading1</h1> <div> <h2>heading2</h2> <p>hogehoge</p> </div> </body></html>
    19. 19. HTMLをひとつのツリー構造として見るたとえば以下のようなHTML<html> <head> <title>title</title> </head> <body> <h1>heading1</h1> <div> <h2>heading2</h2> <p>hogehoge</p> </div> </body></html>
    20. 20. HTMLをひとつのツリー構造として見るDOMツリーにするとこんな感じ
    21. 21. HTMLをひとつのツリー構造として見るDOMツリーにするとこんな感じ
    22. 22. HTMLをひとつのツリー構造として見るDOMツリーにするとこんな感じ
    23. 23. ツリー = 家系図ちょっと見方を変えてみましょう
    24. 24. ツリー = 家系図ちょっと見方を変えてみましょう
    25. 25. セレクタとの関係オレンジの丸で囲んだ人(要素)を中心とすると他の人(要素)との関係はこんな感じ
    26. 26. セレクタとの関係オレンジの丸で囲んだ人(要素)を中心とすると他の人(要素)との関係はこんな感じ
    27. 27. セレクタとの関係オレンジの丸で囲んだ人(要素)を中心とすると他の人(要素)との関係はこんな感じ
    28. 28. 起点からのアクセスjQueryを使えば起点から簡単にアクセスできる
    29. 29. 起点からのアクセスjQueryを使えば起点から簡単にアクセスできる $(‘h1’)
    30. 30. 起点からのアクセスjQueryを使えば起点から簡単にアクセスできる $(‘h1’).parent() $(‘h1’)
    31. 31. 起点からのアクセスjQueryを使えば起点から簡単にアクセスできる $(‘h1’).parent() $(‘h1’).next() $(‘h1’)
    32. 32. 起点からのアクセスjQueryを使えば起点から簡単にアクセスできる $(‘h1’).parent() $(‘h1’).next() $(‘h1’) $(‘h1’).next().children(‘p’)
    33. 33. 起点からのアクセスjQueryを使えば起点から簡単にアクセスできる $(‘h1’).parent() $(‘h1’).next() $(‘h1’) $(‘h1’).next().children(‘h2’) $(‘h1’).next().children(‘p’)
    34. 34. 起点からのアクセスjQueryを使えば起点から簡単にアクセスできる $(‘h1’).parent().parent() $(‘h1’).parent() $(‘h1’).next() $(‘h1’) $(‘h1’).next().children(‘h2’) $(‘h1’).next().children(‘p’)
    35. 35. 起点からのアクセス jQueryを使えば起点から簡単にアクセスできる $(‘h1’).parent().parent()$(‘h1’) .parent() .parent() $(‘h1’).parent() .children(‘head’) $(‘h1’).next() $(‘h1’) $(‘h1’).next().children(‘h2’) $(‘h1’).next().children(‘p’)
    36. 36. 起点からのアクセス jQueryを使えば起点から簡単にアクセスできる $(‘h1’).parent().parent()$(‘h1’) .parent() .parent() $(‘h1’).parent() .children(‘head’) $(‘h1’).next()$(‘h1’) .parent() .parent() $(‘h1’) .children(‘head’) .children(‘title’) $(‘h1’).next().children(‘h2’) $(‘h1’).next().children(‘p’)

    ×