1
00:00:00,000 --> 00:00:02,000
[Powered by Google Translate] [DOM]

2
00:00:02,000 --> 00:00:04,000
[トミーM​​acWilliams] [ハーバード大学]

3
00:00:04,000 --> 00:00:07,000
【これはCS50です。] [CS50.TV]

4
00:00:07,000 --> 00:00:10,000
このビデオでは、DOMを見てみるつもりです。

5
00:00:10,000 --> 00:00:14,000
ブラウザがWebページをダウンロードする場合には、何らかの形でメモリ内に表現する必要がある。

6
00:00:14,000 --> 00:00:17,000
ドキュメント·オブジェクト·モデル、またはDOM、

7
00:00:17,000 --> 00:00:20,000
ブラウザは、メモリ内のWebページを表します方法について説明します。

8
00:00:20,000 --> 00:00:24,000
このビデオでは、我々は、JavaスクリプトのコンテキストでDOMを見てみましょう

9
00:00:24,000 --> 00:00:26,000
しかし、DOMは言語に依存しない概念です。

10
00:00:26,000 --> 00:00:30,000
例えば、PHPは同様に独自のDOM実装を持っています。

11
00:00:30,000 --> 00:00:32,000
しかしながら、DOMは頻繁にJavaScriptによって利用される

12
00:00:32,000 --> 00:00:36,000
JavaScriptは、私たちがその場でウェブページの内容を変更することができますので、

13
00:00:36,000 --> 00:00:39,000
とDOMは、私たちはウェブページの一部にアクセスすることができます。

14
00:00:39,000 --> 00:00:43,000
のは、例えばウェブページを見てみましょう。

15
00:00:43,000 --> 00:00:48,000
さて、このページはDOMで表現する方法を見てみましょう。

16
00:00:48,000 --> 00:00:51,000
そして、すべての木は上部のルートノードを持っている必要があります。

17
00:00:51,000 --> 00:00:54,000
この文書では、HTML要素は、ルートノードである

18
00:00:54,000 --> 00:00:56,000
ので、それは最初に表示される要素です。

19
00:00:56,000 --> 00:01:00,000
私たちのツリーにルートノードを追加しましょう​​。

20
00:01:00,000 --> 00:01:03,000
のが再びHTMLドキュメントを見てみましょう。

21
00:01:03,000 --> 00:01:09,000
bodyタグはHTMLタグの内側にネストされていることに注意してください。

22
00:01:09,000 --> 00:01:14,000
これは、body要素は、HTML要素の子であることを意味します。

23
00:01:14,000 --> 00:01:17,000
私たちは、身体葉することにより当社のDOMツリーでこれを表すことができます

24
00:01:17,000 --> 00:01:20,000
HTMLから下降。

25
00:01:20,000 --> 00:01:22,000
ことをしてみましょう。

26
00:01:22,000 --> 00:01:24,000
私たちは、HTMLの下に体を持っている。

27
00:01:24,000 --> 00:01:28,000
今、私たちは、体がそれ自身の2人の子供を持っていることがわかります

28
00:01:28,000 --> 00:01:31,000
h1要素とul要素。

29
00:01:31,000 --> 00:01:34,000
これは我々がそれらの要素の両方に接続できることを意味し

30
00:01:34,000 --> 00:01:36,000
body要素に、なるように行うみましょう。

31
00:01:36,000 --> 00:01:40,000
私たちは、H1およびULを持っている。

32
00:01:40,000 --> 00:01:43,000
最後に、ul要素は、3以上の子を持つ

33
00:01:43,000 --> 00:01:50,000
これは我々のDOMツリーを完成させますので、李、李、李追加してみましょう。

34
00:01:50,000 --> 00:01:56,000
これは私たちのDOMツリーを完了し、これはブラウザがWebページを保存している方法です。

35
00:01:56,000 --> 00:02:02,000
それでは、我々は、JavaScriptを使用して、このツリーを走査する方法を見てみましょう。

36
00:02:02,000 --> 00:02:10,000
我々は、文書と呼ばれる特別なJavaScript変数を使用して、このツリーにアクセスすることができます。

37
00:02:10,000 --> 00:02:13,000
このドキュメントオブジェクトのプロパティの1つ

38
00:02:13,000 --> 00:02:16,000
bodyプロパティであり、このオブジェクトが表す

39
00:02:16,000 --> 00:02:19,000
私たちの例のWebページのbody要素。

40
00:02:19,000 --> 00:02:23,000
我々は、body要素のすべての子を取得したい場合

41
00:02:23,000 --> 00:02:26,000
そのh1タグとULタグは、あなたが覚えているである

42
00:02:26,000 --> 00:02:37,000
我々はdocument.body.childNodesを言うことができる。

43
00:02:37,000 --> 00:02:41,000
そして、これは私たちのh1要素の両方を含む配列をお返しします

44
00:02:41,000 --> 00:02:46,000
彼らは身体の両方の直接の子にいるのでとul要素。

45
00:02:46,000 --> 00:02:50,000
私たちは、ul要素を表す変数を作成したい場合

46
00:02:50,000 --> 00:02:57,000
我々は、ここまでVRR ULは=その後、このコードと言うことができます

47
00:02:57,000 --> 00:03:00,000
そして今のchildNodesは単に配列であるため、

48
00:03:00,000 --> 00:03:07,000
私たちは、[1]は、その配列の2番目の要素を取得すると、それにインデックスすることができます。

49
00:03:07,000 --> 00:03:13,000
この新しいULオブジェクトに我々は、そのIDのような要素のさまざまなプロパティにアクセスすることができます。

50
00:03:13,000 --> 00:03:17,000
私たちは、文字列リストに等しいことになるだろうul.idを言うなら

51
00:03:17,000 --> 00:03:20,000
それは我々が我々のHTMLページに持っているものだから。

52
00:03:20,000 --> 00:03:24,000
また、このケースであることを行っている、そのタグ名、取得することができます

53
00:03:24,000 --> 00:03:32,000
要素の種類には、この場合、ULには、です。

54
00:03:32,000 --> 00:03:36,000
我々はまた、親またはそれより上のノードを、得ることができ、この場合に

55
00:03:36,000 --> 00:03:38,000
body要素になるだろう。

56
00:03:38,000 --> 00:03:43,000
我々ははdocument.bodyと同じになるだろう。のparentNodeを、言うなら。

57
00:03:43,000 --> 00:03:46,000
もちろん、このULは、自身の子供を持って、

58
00:03:46,000 --> 00:03:50,000
そう、我々はまだ言うことができます。のchildNodesをこの要素に、

59
00:03:50,000 --> 00:03:55,000
私たちのリストの3項目があるので、そしてこの配列は現在、長さ3を持っている必要があります

60
00:03:55,000 --> 00:04:02,000
最後に、おそらく最も有用なプロパティがあることを行っている。innerHTMLプロパティは、

61
00:04:02,000 --> 00:04:06,000
これはリストの実際の内容となり、その私たちの例のページで

62
00:04:06,000 --> 00:04:08,000
それらの3のliタグがあった。

63
00:04:08,000 --> 00:04:11,000
もちろん、我々は要素にアクセスする、大規模な文書を持っている場合

64
00:04:11,000 --> 00:04:14,000
この方法で本当に面倒なことを行っているので、

65
00:04:14,000 --> 00:04:17,000
結局我々はdocument.body.childNodesような事を言う必要があるでしょう

66
00:04:17,000 --> 00:04:21,000
ブラケット何か。他のchildNodesブラケット何か、

67
00:04:21,000 --> 00:04:23,000
そしてそれは本当に面倒得るために起こっている。

68
00:04:23,000 --> 00:04:27,000
代わりに、私たちが本当にやりたいこと、文書を照会することができるである

69
00:04:27,000 --> 00:04:30,000
これだけ我々はキーワードを使用してインターネット上で物事を検索好き

70
00:04:30,000 --> 00:04:33,000
私たちは本当に簡潔にこの文書を検索するいくつかの方法が必要

71
00:04:33,000 --> 00:04:37,000
我々は気に唯一の要素は、横断せずに戻る

72
00:04:37,000 --> 00:04:39,000
底までツリー全体トップ。

73
00:04:39,000 --> 00:04:42,000
幸いにも、最近のブラウザは、私たちがこれを行うことができ

74
00:04:42,000 --> 00:04:47,000
querySelectorAllと呼ばれる特殊な機能を持つ、

75
00:04:47,000 --> 00:04:49,000
この関数は、1つの引数を取ります

76
00:04:49,000 --> 00:04:53,000
そのCSSセレクタであり、それが私たちに戻ることが起こっている

77
00:04:53,000 --> 00:04:56,000
そのセレクタに一致するすべての要素。

78
00:04:56,000 --> 00:04:59,000
それはあなたがDOMを照会するための全く新しい構文を学習する必要がないことを意味します。

79
00:04:59,000 --> 00:05:02,000
代わりにあなたがすでに知っている知識を適用することができます

80
00:05:02,000 --> 00:05:04,000
CSSセレクタについて。

81
00:05:04,000 --> 00:05:07,000
の文書を照会のいくつかの例を見てみましょう。

82
00:05:07,000 --> 00:05:13,000
我々はquerySelectorAllを言うし、それをこの文字列＃foo 'を渡す場合

83
00:05:13,000 --> 00:05:18,000
それは私たちにID fooを持つ要素をお返しするために起こっている。

84
00:05:18,000 --> 00:05:23,000
またのdocument.getElementByIdを言うことができる

85
00:05:23,000 --> 00:05:28,000
そのハッシュタグなしでそれを文字列fooのを渡します。

86
00:05:28,000 --> 00:05:31,000
あなたは、まったく同じオブジェクトを取得するつもりだ。

87
00:05:31,000 --> 00:05:37,000
代わりに、我々はdocument.querySelectorAllに文字列。バーを渡した場合

88
00:05:37,000 --> 00:05:42,000
私たちは、クラスbarを持つ要素のすべてを取り戻すつもりだ。

89
00:05:42,000 --> 00:05:45,000
また、CSSセレクタを組み合わせることができます。

90
00:05:45,000 --> 00:05:51,000
我々は文字列＃fooのIMGで渡す場合

91
00:05:51,000 --> 00:05:54,000
画像のすべての要素を私たちに戻って与えるために起こっていること

92
00:05:54,000 --> 00:05:58,000
それは、ID fooを持つ要素の子です。

93
00:05:58,000 --> 00:06:03,000
あなたは、我々はいくつかの本当に強力な検索機能を持っているセレクターを組み合わせることで、見ることができるように。

94
00:06:03,000 --> 00:06:06,000
しかし、ボンネットの下に、DOMは、本当にただの木です

95
00:06:06,000 --> 00:06:10,000
これらのセレクタは、ある程度その離れて抽象的に私達を許可

96
00:06:10,000 --> 00:06:14,000
我々は常に、DOMツリーの構造全体を気にしないので。

97
00:06:14,000 --> 00:06:18,000
それは、迅速なDOMの概要、及びご参加いただきありがとうございました。

98
00:06:18,000 --> 00:06:20,000
[CS50.TV]