1
00:00:00,300 --> 00:00:03,940
だから私たちはDommについてなぜあなたが興味を持っているのかを議論しました。

2
00:00:03,990 --> 00:00:07,640
ドキュメントオブジェクトモデルが何を意味するのかについても話しました。

3
00:00:07,680 --> 00:00:13,320
それは、トップレベルのオブジェクトであるjavascriptオブジェクトを使用して、ページ上の各要素の単なるモデルであるという事実は、ドキュメントと呼ばれます。

4
00:00:13,350 --> 00:00:15,130
 

5
00:00:15,240 --> 00:00:18,340
だからそれは素晴らしいですが、私たちはまだそれで何かをする方法を見ていません。

6
00:00:18,390 --> 00:00:23,460
だからこのビデオでは、犬を使って物事を操作するプロセスを簡単に紹介します。

7
00:00:23,790 --> 00:00:29,630
だから私は2つのキーワードを選択して操作するために全体のプロセスを煮詰めました。

8
00:00:29,670 --> 00:00:36,540
だから、セレクタを書いてセレクタを書いて、特別なクラスや、すべてのイメージタグや、すべてのイメージタグを選択する場所を評価するのと同じように、我々は要素を選択してから、背景色の紫色の境界線のようなスタイルを適用します。

9
00:00:36,540 --> 00:00:43,620
 

10
00:00:43,710 --> 00:00:47,840
 

11
00:00:47,850 --> 00:00:51,380
私たちは要素を選択しますが、私たちは非常に異なる方法でそれを行います。

12
00:00:51,480 --> 00:00:56,910
私たちはjavascriptコードを書いて要素を選択し、それらを元に戻し、次にそれらのプロパティを変更して何かを選択して操作します。

13
00:00:56,910 --> 00:01:01,260
 

14
00:01:01,290 --> 00:01:06,810
次のスライドでは、このH-1のヘッダーをどのように選ぶことができるのか、それをどのようにピンクに変えることができるのかを説明します。

15
00:01:06,810 --> 00:01:09,750
 

16
00:01:09,750 --> 00:01:14,070
私は最後の数ビデオでこれをたくさん言ってきましたが、私はあなたがコンセプトと同じくらいシンタックスに集中することを望んでいません。

17
00:01:14,160 --> 00:01:15,290
 

18
00:01:15,330 --> 00:01:18,930
次のいくつかのビデオは、選択し操作することの重要な部分に入ります。

19
00:01:18,930 --> 00:01:21,150
これは、それがどのように動作するかの概要です。

20
00:01:21,150 --> 00:01:25,600
このスライドでは、Cと同じようにH1を選択する方法を示します。

21
00:01:25,620 --> 00:01:28,580
特定の要素を選択するには、さまざまな方法があります。

22
00:01:28,800 --> 00:01:36,270
この場合、このコード文書ドット照会セレクタH-1はこのページ上のH-1を選択することになる。

23
00:01:36,270 --> 00:01:36,920
 

24
00:01:37,050 --> 00:01:40,960
だから私はこの緑色のボックスでここで強調表示しているので、あなたは何が選択されているか見ることができます。

25
00:01:41,340 --> 00:01:48,640
だからvar H-1これは、クエリーセレクタ8：1をドキュメント化するために必要な変数です。

26
00:01:48,690 --> 00:01:52,420
だから、クエリセレクタにもっと多くの時間を費やして、それが何であり、どのように動作するのかを定義します。

27
00:01:52,470 --> 00:01:59,920
しかし、このH1を表すオブジェクトを返し、それをH-1変数に保存します。

28
00:01:59,970 --> 00:02:02,190
それが選択プロセスです。

29
00:02:02,190 --> 00:02:08,340
次の部分はそれを操作するようにそれを操作しています私はあらゆる種類のことを行うことができ、私がここでやることは色をピンクに変えることです。

30
00:02:08,340 --> 00:02:11,170
 

31
00:02:11,490 --> 00:02:18,470
そこで、H-1ドットスタイルを表すオブジェクトを持つ変数であるH-1を書きます。

32
00:02:18,510 --> 00:02:24,690
これは1つのプロパティで、そのスタイルプロパティは他のプロパティと色の束を持つ巨大なオブジェクトであり、その一つです。

33
00:02:24,690 --> 00:02:25,580
 

34
00:02:25,920 --> 00:02:28,920
だから、H-1はスタイルはしますが、色はピンクに等しくなります。

35
00:02:28,920 --> 00:02:30,240
そしてそれが私たちがしなければならないことです。

36
00:02:30,270 --> 00:02:35,400
ブラウザはそのプロパティをピンクに変更して、それをピンク色にすることで表示されるものを自動的に更新することを確認します。

37
00:02:35,820 --> 00:02:37,500
 

38
00:02:37,500 --> 00:02:41,140
そこでここで選択して操作しました。

39
00:02:42,120 --> 00:02:43,560
だからもう一つの例があります。

40
00:02:43,610 --> 00:02:45,230
もう少し複雑です。

41
00:02:45,240 --> 00:02:50,610
私たちは毎秒、青と白の間の体の背景色を変えている非常に簡単なアニメーションをやっています。

42
00:02:50,910 --> 00:02:52,940
 

43
00:02:52,950 --> 00:02:58,620
だから私たちが最初にする必要があるのは、ボディを選択してそれを選択することです。

44
00:02:58,740 --> 00:03:03,300
ドキュメントダンプクエリーセレクタを使用した別の行があります。このセレクタは、次のビデオドキュメントのクエリーセレクタ本体に戻ってきます。

45
00:03:03,300 --> 00:03:06,720
 

46
00:03:06,780 --> 00:03:11,880
だから、私はボディ変数に保存するオブジェクトの表現を実際に私に与えてくれるbody要素を私に与えます。

47
00:03:11,880 --> 00:03:15,450
 

48
00:03:15,450 --> 00:03:20,490
それから私はこの変数を青色にしました。これは、私が青から白、または白から青に移行するかどうかを知る必要があるため、私が使用するブール値です。

49
00:03:20,640 --> 00:03:23,940
 

50
00:03:24,030 --> 00:03:28,870
だから、それは偽として始まり、私は数年前にカバーした一定の間隔を使用しています。

51
00:03:28,920 --> 00:03:32,230
どのように動作するか覚えていないと、基本的に2つの議論があります。

52
00:03:32,340 --> 00:03:38,880
最初の関数は関数を実行するためのコードで、2つ目はミリ秒単位の数値または時間です。

53
00:03:39,150 --> 00:03:44,880
したがって、このミリ秒数は1000秒または1秒で、1秒ごとにこのコードを呼び出します。

54
00:03:44,880 --> 00:03:46,230
 

55
00:03:46,560 --> 00:03:51,080
したがって、このコードが行うことは、バックグラウンドが現在青色であるかどうかをチェックすることです。

56
00:03:51,180 --> 00:03:56,330
背景が白の場合は白に変更し、青の場合は白に変更します。

57
00:03:56,610 --> 00:04:00,030
だから、私たちは青いです。

58
00:04:00,120 --> 00:04:01,640
だからそれは変わるだけです。

59
00:04:01,650 --> 00:04:02,900
それは偽として始まります。

60
00:04:02,910 --> 00:04:07,890
だから、ページが読み込まれるのは初めてですが、背景は白ですが、青は偽です。

61
00:04:07,920 --> 00:04:15,240
だから、この行は動かないが、これはそうでなければボディはスタイルの暗い背景が青色のこの16進数の色に等しくなる。

62
00:04:15,240 --> 00:04:16,570
 

63
00:04:16,770 --> 00:04:18,840
そのため、背景が青色に変わります。

64
00:04:19,140 --> 00:04:22,960
それで、青の変数をfalseからtrueに変更するだけです。

65
00:04:23,130 --> 00:04:27,690
それは、感嘆符またはnot演算子でそれを行う良いソート方法です。

66
00:04:27,780 --> 00:04:32,550
だからこのコードは次回は青がすでに真であることを再度実行します。

67
00:04:32,850 --> 00:04:36,870
だから、このコードは本体のスタイルを実行しますが、背景は白です。

68
00:04:36,870 --> 00:04:38,550
今は白に戻っています。

69
00:04:38,670 --> 00:04:42,980
これは実行されず、次に変更すると青色がfalseに戻ります。

70
00:04:43,290 --> 00:04:44,980
それは永遠に続く。

71
00:04:45,090 --> 00:04:49,740
だから、毎秒変化する背景色ほど気を散らすようなものを望むことはありません。

72
00:04:50,190 --> 00:04:56,160
しかしこれは、H1を黒からピンクに変えるだけではなく、もっと複雑なことをすることができることを示しています。

73
00:04:57,450 --> 00:05:03,930
これをすべて2つの単語にまとめる選択操作選択要素を表すいくつかのオブジェクトを取得し、次にそれらに対して何かを行います。

74
00:05:03,930 --> 00:05:06,260
 

75
00:05:06,750 --> 00:05:11,010
したがって、このユニットの残りの部分は、選択のさまざまな方法に焦点を当て、次に操作方法が異なります。

76
00:05:11,010 --> 00:05:12,370
 

77
00:05:12,390 --> 00:05:16,830
次のビデオは、javascriptを使用して要素を選択するさまざまな方法について深く掘り下げていきます。

78
00:05:17,190 --> 00:05:19,470
私たちはすでに奇妙なセレクターを見てきました。

79
00:05:19,500 --> 00:05:21,450
私たちはそれを拡張して、さらにいくつかを学びます