1
00:00:00,600 --> 00:00:03,770
今のところ、優勢なアペラシオンがなぜ刺激的であるのかを話しました。

2
00:00:03,960 --> 00:00:05,100
なぜあなたは気にする必要があります。

3
00:00:05,100 --> 00:00:09,420
それを使用するさまざまなサイトは、ゲームのすべてのエキサイティングなものを無限の可能性があります。

4
00:00:09,570 --> 00:00:12,710
しかし、我々はまだ実際にDOMが何であるかについては話していません。

5
00:00:12,810 --> 00:00:16,380
だから私たちはこのビデオでそれを行い、ちょうどそれを定義しようとします。

6
00:00:16,380 --> 00:00:17,180
Dio am。

7
00:00:17,220 --> 00:00:20,040
DomはDocumentオブジェクトモデルを表します。

8
00:00:20,190 --> 00:00:24,100
これらの3つの言葉の意味は、来るべきスライドでもう少し意味をなさないでしょう。

9
00:00:24,100 --> 00:00:26,780
しかし、それをより高いレベルで定義することから始めましょう。

10
00:00:26,820 --> 00:00:30,560
ドームはあなたのJavaScriptとあなたの年齢の間のインターフェイスです。

11
00:00:30,570 --> 00:00:37,080
Tim Mounty

12
00:00:37,080 --> 00:00:42,870
SSそれは基本的に特別なjavascriptオブジェクトjavascriptメソッドの束であり、私たちはHとやり取りすることができます。 M. S.

13
00:00:42,870 --> 00:00:48,930
我々は要素を追加することができるものを変えることができると評価する要素を削除する色を変える色を変えるそれらのHと相互作用するあらゆる種類の刺激的な方法 M. S. 評価する。

14
00:00:49,380 --> 00:00:54,270
このスライドでは、DOMがどのように構築され、なぜドキュメントオブジェクトモデルと呼ばれるのかについて少し話をします。

15
00:00:54,330 --> 00:00:56,070
 

16
00:00:56,070 --> 00:01:02,180
1とのタグを持っていますそれ。

17
00:01:02,180 --> 00:01:09,210
だから私たちは、電子メールのページをロードすると、ブラウザのように見え、それはちょうどいくつかの単純な彼のためにタイトルとテキストと私のヘッダーをテキストとして、私のリンクとH -

18
00:01:09,210 --> 00:01:09,950
 

19
00:01:10,260 --> 00:01:16,360
ですから、ブラウザでこれを開くと、これが表示されますが、シーンの裏にDOMが作成されます。

20
00:01:16,380 --> 00:01:19,190
これはここから作られたものです。

21
00:01:19,320 --> 00:01:24,270
だから私が意味するのは、この時代のティムはたくさんのJavaScriptオブジェクトになっているということです。

22
00:01:24,270 --> 00:01:27,440
各オブジェクトは、これらの要素の1つをモデル化します。

23
00:01:27,450 --> 00:01:31,340
これが、オブジェクトモデルをドキュメントオブジェクトモデルの一部にするところです。

24
00:01:31,650 --> 00:01:37,530
だから、再びブラウザに各チームをロードすることを繰り返すだけで、ブラウザは私たちにこのようなことを表示します。

25
00:01:37,530 --> 00:01:38,060
 

26
00:01:38,220 --> 00:01:43,890
しかし、実際には私たちの犬Rustyをjavascriptオブジェクトを使ってモデル化したように、javascriptオブジェクトを持つ各要素のこのモデルを実際に作ります。

27
00:01:44,220 --> 00:01:47,490
 

28
00:01:47,490 --> 00:01:50,770
彼は財産名と他の品種と年齢を持っていました。

29
00:01:50,850 --> 00:01:55,080
これらのオブジェクトは、コンテンツが異なる以外は基本的に同じものです。

30
00:01:55,110 --> 00:02:03,120
彼らはタグの種類のようなものを持っているだろうテキストソースの属性色の背景色のテキストサイズすべてのオブジェクトのすべてが含まれているすべての異なるプロパティ。

31
00:02:03,120 --> 00:02:07,290
 

32
00:02:07,290 --> 00:02:11,460
これらのオブジェクトを扱うのに多くの時間を費やすつもりですので、詳細は重要ではありません。

33
00:02:11,640 --> 00:02:14,970
私がここで強調したいのは、それぞれの時間Lをロードすることです。 これはブラウザに表示され、ブラウザはそのTim

34
00:02:15,120 --> 00:02:21,810
Lを受け取り、各要素を取り出してオブジェクトに変換します。

35
00:02:21,900 --> 00:02:22,610
それはオブジェクトモデルの部分をカバーします。

36
00:02:22,680 --> 00:02:24,510
ドキュメントはどうですか？

37
00:02:24,540 --> 00:02:25,860
 

38
00:02:26,070 --> 00:02:31,950
ですから、これは、DOMから取得した構造のタイプの小さな図です。トップレベルのオブジェクトです。すべてがHのモデル全体に​​含まれています。 T. 私たちをmounseersと呼んでいます。

39
00:02:31,950 --> 00:02:38,250
 

40
00:02:38,250 --> 00:02:38,930
だから、私たちはどんなウェブページにも行くことができます。

41
00:02:39,120 --> 00:02:41,200
だから、私はGoogleをオープンにしています。 ドキュメントという言葉。

42
00:02:41,220 --> 00:02:45,190
そして私がそれをするとき、私はこの大きな目的を生み出す大きなものを手に入れます。

43
00:02:45,390 --> 00:02:49,470
それ以外はjavascriptオブジェクトのようには見えません。

44
00:02:49,470 --> 00:02:51,900
それは本当に私たちが期待するものではありません。

45
00:02:51,900 --> 00:02:53,740
それはブラウザが私を隠しているからです。

46
00:02:53,760 --> 00:02:56,030
 

47
00:02:56,130 --> 00:03:01,860
実際に私が見せているのは、HQメールがテキストのように見えるが、このティモでモデル化された実際のオブジェクトを私に見せているわけではない。

48
00:03:01,860 --> 00:03:04,480
Rを使う必要があります。私たちはそれをキャンセルします。

49
00:03:04,740 --> 00:03:11,550
ですから、コンソールオブジェクトのもう一つのメソッドであるcancel dot D I 私。 R. これが行うすべてのドキュメントは、私たちがよく知っているこのオブジェクト構文でドキュメントオブジェクト全体をプリントアウトすることです。

50
00:03:11,550 --> 00:03:17,430
 

51
00:03:17,430 --> 00:03:19,990
 

52
00:03:20,070 --> 00:03:25,680
だから、私たちが独自に書いたような普通のオブジェクトであることがわかります。そこにはもっと多くの情報がある以外は、犬のオブジェクトのRustyと同じです。

53
00:03:25,710 --> 00:03:30,220
 

54
00:03:30,510 --> 00:03:40,050
だから私たちはフォントや画像リンクのようなものを持っていますが、私たちはまた身体のようなものを持っており、この身体は全身を表しています。

55
00:03:40,050 --> 00:03:41,040
だから、あなたがここで見るすべての要素は体の中にあります。

56
00:03:41,040 --> 00:03:44,320
 

57
00:03:44,340 --> 00:03:49,710
だから私が体を開くと、あなたはChildのノードと呼ばれるものを含む他の多くのプロパティがあることがわかります。

58
00:03:49,710 --> 00:03:51,050
 

59
00:03:51,150 --> 00:03:57,960
だから子ノードはdivがあることを私たちに示しています。スクリプトタグがあり、bodyの中に別のdivがあります。

60
00:03:57,960 --> 00:03:58,590
私たちが要素に行くと、それが分かります。

61
00:03:58,590 --> 00:04:00,710
体の中にある体はここにあります。

62
00:04:00,710 --> 00:04:03,360
最初のdivにスクリプトタグがあり、2番目のdivがあります。

63
00:04:03,420 --> 00:04:07,990
 

64
00:04:08,430 --> 00:04:15,480
そして、3番目のdivを開くと、2番目のdivに2つ以上のdivがあると予想されます。

65
00:04:15,480 --> 00:04:15,890
 

66
00:04:15,900 --> 00:04:23,390
私たちが領事に行き、2番目のdivを見てから、子ノードを見てみましょう。もう2つのdivがあります。見て分かるように、domは本当に巨大になります。

67
00:04:23,430 --> 00:04:28,360
数百、数百の異なるプロパティとメソッド、異なるノード、そしてネストされたオブジェクトのこの狂った構造全体があります。

68
00:04:28,500 --> 00:04:32,610
 

69
00:04:32,610 --> 00:04:34,730
それはただのものだ。

70
00:04:34,890 --> 00:04:36,250
 

71
00:04:36,270 --> 00:04:39,570
私がこのクラスの冒頭で言及した時代のうちのひとつで、あなたはすべてを知らずに快適にしなければならないでしょう。

72
00:04:39,570 --> 00:04:42,060
ほとんどの開発者がここでプロパティの半分を知っているわけではないことを、私は今話すことができます。

73
00:04:42,420 --> 00:04:46,450
私は彼らが最大で約10％で働いていると言いたい。

74
00:04:46,500 --> 00:04:49,200
私たちが使うことはほとんどないほどのものがここにあります。

75
00:04:49,200 --> 00:04:52,630
そして、いつか何かが現れ、私たちがこれまでにやったことがない何かをしなければならない。

76
00:04:52,680 --> 00:04:57,150
私たちはそれをgoogleして、大丈夫だと分かりましたので、それは未硬化の変更プロパティのためです。

77
00:04:57,330 --> 00:05:03,690
私は今まで知らなかった。

78
00:05:03,750 --> 00:05:04,560
そして、それは本当に開発者になることです。

79
00:05:04,680 --> 00:05:06,500
 

80
00:05:06,510 --> 00:05:11,190
これまではjavascriptを使って、変数について学んだ関数やオブジェクトについて知っている小さな制御された世界の中で少しでも作業してきました。

81
00:05:11,190 --> 00:05:14,380
 

82
00:05:14,610 --> 00:05:19,110
物事を行う方法は限られていますが、DOMで知る必要がある知識のサブセットが非常に限られています。

83
00:05:19,110 --> 00:05:21,440
今、私たちはこの巨大な巨大な生態系を持っています。

84
00:05:21,450 --> 00:05:25,500
だから私はここにそれほど多くのことがあることを繰り返し言いたい。

85
00:05:25,620 --> 00:05:28,020
私たちは重要な部分に焦点を当てるつもりですが、目的は暗記することではありません。

86
00:05:28,170 --> 00:05:32,100
目標はすべての単一の財産を習得することではありません。

87
00:05:32,130 --> 00:05:34,780
もう一度10％も有能なウェブ開発者である必要があります。

88
00:05:34,920 --> 00:05:39,560
さて、戻ってみましょう、私はもうこの1回以上行きたいです。

89
00:05:40,000 --> 00:05:43,080
私たちが話したことを要約してください。

90
00:05:43,080 --> 00:05:44,450
したがって、DOMはドキュメントオブジェクトモデルの略です。

91
00:05:44,700 --> 00:05:48,030
あなたのJavascriptとあなたのHとのインターフェースです M. S. それは私たちがjavascriptを使って物事をインタラクティブにする方法です。

92
00:05:48,150 --> 00:05:52,150
 

93
00:05:52,280 --> 00:05:55,180
 

94
00:05:55,260 --> 00:06:01,800
 

95
00:06:01,800 --> 00:06:07,320
これは、新しい要素をページに追加する方法や、リンクのref属性を変更する方法、私たちの体の背景イメージを変更する方法、フォームから値を取得する方法、カスタム検証やアニメーション、インタラクティブな操作いくつかのコードをクリックする要素は、これらすべての異なる可能性をすべて実行します。これは、ドキュメントオブジェクトモデルがJavaScriptをHに接続するという事実から生じます。 M. S. アクセス。

96
00:06:07,320 --> 00:06:13,160
ですから、ドキュメントオブジェクトモデルのオブジェクトモデル部分は、Hのモデル要素であるjavascriptオブジェクトの束であることを示しています。

97
00:06:13,410 --> 00:06:18,960
T. 量。

98
00:06:19,260 --> 00:06:24,930
だから私たちはATACを持っています。

99
00:06:24,930 --> 00:06:27,470
そして、ここで見ているこのH1タグを表す別のオブジェクトで終わります。

100
00:06:27,870 --> 00:06:32,980
最後に、文書オブジェクトモデルと呼ばれるのは、そのすべてが文書と呼ばれるオブジェクトの内部にあるからです。

101
00:06:33,180 --> 00:06:37,770
 

102
00:06:37,980 --> 00:06:42,930
それは根本的なノードで、他のすべてがそこに住んでいます。

103
00:06:42,930 --> 00:06:43,740
次のビデオでは、いくつかのコードを書き始めます。

104
00:06:43,830 --> 00:06:46,850
 

105
00:06:47,070 --> 00:06:49,030