1
00:00:00,270 --> 00:00:01,320
歡迎回來。

2
00:00:01,320 --> 00:00:07,770
在這段視頻中，我們要花費時間來談論選擇使用JavaScript和娃娃元素的不同方式。

3
00:00:08,100 --> 00:00:12,600
我們談論的實際選擇之前，我們只是需要審查該文件一次。

4
00:00:12,720 --> 00:00:20,160
請記住，我們整個宿舍的所有對象我們的元素的所有陳述都住這個文件對象的內部。

5
00:00:20,220 --> 00:00:23,850
它的頂層對象或根節點。

6
00:00:25,140 --> 00:00:27,760
如此迅速，讓我們打開任何瀏覽器窗口。

7
00:00:27,870 --> 00:00:32,060
我將使用谷歌，讓我們試著輸入這四條線。

8
00:00:32,430 --> 00:00:40,300
於是打開控制台，輸入文檔點你是L和它告訴我們，我們是在頁面的URL。

9
00:00:40,610 --> 00:00:46,400
你可以做文檔點鏈接，這就是在頁面上每一個環節的完整列表。

10
00:00:46,410 --> 00:01:00,610
每一個錨標記我們可以做的文檔和瓦迪這是它裡面生活在人體所有其他元素的整個身體，我們可以做點文件頭。

11
00:01:00,660 --> 00:01:03,340
因此，我們在過去幾年的視頻已經看到了這一點。

12
00:01:03,360 --> 00:01:10,570
說我再次向您顯示的原因是，所有我們要還學習選擇的所有方法都住在文檔中。

13
00:01:10,620 --> 00:01:17,250
所以我們在這個視頻了解一切都將開始文件點東西。

14
00:01:17,280 --> 00:01:21,250
所以，我會告訴你什麼是那些出頭的。

15
00:01:21,270 --> 00:01:24,030
還有我們要談談在這個視頻五個主要方法。

16
00:01:24,030 --> 00:01:25,860
他們都內置到文檔中。

17
00:01:25,860 --> 00:01:27,920
他們都開始文件點。

18
00:01:28,020 --> 00:01:37,050
你可以看到他們在這裡得到由id元素度日類名的元素度日標籤名queery選擇和queery選擇要素。

19
00:01:37,050 --> 00:01:46,020
如果所有你能想到回到我的視頻上添加方法的對象，我們基本上可以存儲一個函數作為一個值，而不是一個對象一樣。

20
00:01:46,140 --> 00:01:53,280
我們必須像狗貓空間空間，我們不得不說，我們加入到我們的狗空間物體的方法。

21
00:01:53,310 --> 00:01:55,080
這正是這裡發生了什麼。

22
00:01:55,260 --> 00:02:00,060
這五種方法已全部文檔對象補充說。

23
00:02:00,900 --> 00:02:07,100
所以，在我們真正在這裡開始我想告訴你，我要去用於演示目的轟-G電子郵件。

24
00:02:07,230 --> 00:02:10,660
這是一個非常非常簡單的頁面只是有幾個元素。

25
00:02:10,890 --> 00:02:16,020
因此，我們正常的頭幾乎是空的除了一個標題或正文。

26
00:02:16,020 --> 00:02:20,350
然後身體向H-1的內部是一個打招呼。

27
00:02:20,580 --> 00:02:21,910
另一個說再見。

28
00:02:22,140 --> 00:02:30,160
再用三層的盟友，而不是UL和這三個盟友列表項一二三個略有不同。

29
00:02:30,180 --> 00:02:35,450
第一個有一個ID亮點和最後已稱為粗體的類。

30
00:02:35,670 --> 00:02:36,720
所以，我們要使用它。

31
00:02:36,720 --> 00:02:40,430
事實上，其中一些是H-1中的一些元素是盟友。

32
00:02:40,440 --> 00:02:41,430
有些課程。

33
00:02:41,430 --> 00:02:42,550
一個具有標識。

34
00:02:42,630 --> 00:02:48,210
我們將利用這些不同的屬性以不同的方式和不同的組合來選擇它們。

35
00:02:48,300 --> 00:02:54,680
所以，我在這裡使用相同的代碼中的例子，我畫一個綠框，以便您可以在接下來的幾個幻燈片中看到。

36
00:02:54,690 --> 00:02:57,810
無論周圍的綠色框中選擇。

37
00:02:58,410 --> 00:03:00,680
OK讓我們開始使用第一種方法。

38
00:03:00,780 --> 00:03:02,640
通過ID獲取元素。

39
00:03:02,970 --> 00:03:05,310
所以，它的名字是一點點的不言自明的。

40
00:03:05,550 --> 00:03:11,750
這需要在ID名稱和它要與該ID相匹配的一個元素返回。

41
00:03:11,820 --> 00:03:15,220
請記住，一個ID只能出現一次一個頁面上。

42
00:03:15,240 --> 00:03:18,560
因此，這裡是由ID為例圩區文件GET元素。

43
00:03:18,600 --> 00:03:26,940
亮點是要選擇這個盟友有標識的亮點，因此選擇對象，然後返回給我們。

44
00:03:27,030 --> 00:03:29,450
我很快就會顯示在公會。

45
00:03:29,520 --> 00:03:40,000
因此，我們將打開控制台，通過ID亮點文檔類型GET元素，這就是我們的ID名稱。

46
00:03:40,100 --> 00:03:43,020
讓我們把它保存到一個變量稱為標記。

47
00:03:43,020 --> 00:03:43,730
按下回車鍵。

48
00:03:43,890 --> 00:03:45,260
讓我們來看看標籤。

49
00:03:45,690 --> 00:03:49,940
你可以看到它為我們提供了一個具有ID等於突出的第一行。

50
00:03:50,040 --> 00:03:52,670
因此，我們通過一個ID選擇的東西。

51
00:03:52,800 --> 00:03:59,430
再次是它展示給我們，彷彿它實際上他年齡很好，但這樣的結果實際上是一個JavaScript對象。

52
00:03:59,430 --> 00:04:02,980
因此，我們可以做到這一點取消了再次Diyar上的標籤。

53
00:04:03,330 --> 00:04:05,030
而這實際上是什麼樣子。

54
00:04:05,040 --> 00:04:06,320
所有這些性能。

55
00:04:06,480 --> 00:04:13,670
因此，這是一個不錯的快捷方式讓我們直觀地看到我們選擇，但實際上它是一個對象表示。

56
00:04:13,860 --> 00:04:16,740
好吧所以這是所有有通過ID來獲得元素。

57
00:04:17,070 --> 00:04:30,310
我們把我們一個字符串參數，我們希望有一個ID的名稱傳遞的方法，然後它去，發現有相同的ID匹配的元素，它返回的對象表示給我們。

58
00:04:31,320 --> 00:04:36,780
下一個是通過獲取類名元素，因此它的名字告訴你，正是它。

59
00:04:36,840 --> 00:04:38,690
只是想通過ID獲取元素。

60
00:04:38,820 --> 00:04:43,540
雖然這是略有不同的獲取複數與類名一個S的元素。

61
00:04:43,620 --> 00:04:46,990
記住一類，因為我們希望在頁面上可以出現多次。

62
00:04:47,100 --> 00:04:56,130
所以，我們通過像粗體一個字符串，那將返回所有匹配的類名粗體顯示頁面上的所有元素的列表。

63
00:04:56,160 --> 00:05:04,150
在這種情況下，有他們兩個，但如果有跡象表明有這樣的類，我們將得到所有10000列表頁，對於1萬的元素。

64
00:05:04,380 --> 00:05:19,610
所以，讓我們證明這一點所以會按類名打分文檔獲得元素，你可以看到，如果我們這裡得到這個小自動完成，所以我們可以選擇我們想要得到由類名，然後我們想要的類名稱加粗的元素之一。

65
00:05:20,130 --> 00:05:21,650
讓我們把它保存到一個變量。

66
00:05:21,650 --> 00:05:28,400
標籤不標籤，但標籤，因為我們會得到多個標籤回來，如果我們看一下什麼是標籤。

67
00:05:28,730 --> 00:05:32,660
這既是帶班等於加粗2謊言的列表。

68
00:05:32,690 --> 00:05:34,730
從技術上講它不是一個數組。

69
00:05:34,730 --> 00:05:38,330
這是一種叫做節點列表是陣列等。

70
00:05:38,390 --> 00:05:40,450
我喜歡把它看作是一個輕量級的數組。

71
00:05:40,520 --> 00:05:43,700
因此，它附帶了一些，你會期望從一個數組的事情。

72
00:05:43,820 --> 00:05:46,430
但是一些更高級的功能，實際上是缺少。

73
00:05:46,430 --> 00:05:52,000
因此，例如，我們可以訪問使用索引標籤0這樣的元素。

74
00:05:52,220 --> 00:05:59,240
我們可以做標記包抄，但我們不能對每個迴路標記點為每做一次。

75
00:05:59,720 --> 00:06:02,930
如果我只是這樣做它會告訴我的標籤是每個。

76
00:06:02,930 --> 00:06:03,990
這不是一個功能。

77
00:06:04,250 --> 00:06:11,450
所以，這是因為沒有為對數組定義，這些都不是數組這些節點列表中定義的foreach。

78
00:06:11,750 --> 00:06:19,450
而只是像id來獲取元素它向我們展示了這個漂亮的字符串表示，但在幕後，它實際上是一個對象。

79
00:06:19,460 --> 00:06:25,740
所以，再一次只是為了證明給你點安慰和DIR我們做標籤的為零。

80
00:06:26,270 --> 00:06:31,960
它實際上是這個大的複雜的瘋狂對象，噸屬性。

81
00:06:32,540 --> 00:06:35,130
行，所以讓我們通過類名的元素。

82
00:06:35,270 --> 00:06:36,320
它返回一個列表。

83
00:06:36,380 --> 00:06:37,600
不完全是一個數組。

84
00:06:37,610 --> 00:06:44,110
它包含匹配，我們提供給定的類名在頁面上的每一個元素。

85
00:06:44,120 --> 00:06:46,860
接下來我們有度日標記名稱的元素。

86
00:06:46,880 --> 00:06:51,050
所以這一次的作品就像通過ID獲取元素或度日類名的元素。

87
00:06:51,140 --> 00:06:56,800
除了它返回匹配像盟友或H-1給定標記名稱的元素的列表。

88
00:06:56,810 --> 00:07:06,040
因此，在這種情況下，我運行的文件dight度日標籤名·哈吉元素那將退還給我這個網頁上存在的三個盟友的列表。

89
00:07:06,500 --> 00:07:30,200
所以，再一次讓我們證明VAR標籤等於該度日標記名稱的元素，讓我們先做·哈吉，讓我們來看看標籤的文檔，我們得到這個名單還沒有完全數組它是有三個盟友節點列表，我不會證明這一點給你這一次。

90
00:07:30,290 --> 00:07:31,950
我去的那DJR領事。

91
00:07:32,090 --> 00:07:35,300
但是，這些都是他們不只是字符串或不是對象。

92
00:07:35,300 --> 00:07:39,030
^ h添升它們實際上是與所有這些屬性的JavaScript對象。

93
00:07:39,200 --> 00:07:42,230
因此，我可以做同樣的事情為H-1。

94
00:07:42,410 --> 00:07:50,120
所以，我們選擇所有的H 1和我們來看看標籤，我們可以得到到h 1和名單。

95
00:07:50,270 --> 00:07:53,650
這不只是限於我們的身體裡面看到的標籤。

96
00:07:53,660 --> 00:07:55,100
我還可以做這樣的事情。

97
00:07:55,100 --> 00:08:04,250
獲得由標籤名body元素，它是將身體恢復到我的列表，包括一個元素在它的內部。

98
00:08:04,250 --> 00:08:16,490
或者，我也能做到這一點，因為我想要的頭部或時間元素或標題或什麼，但重要的是，它返回即使只有一個它仍然會返回一個列表元素的列表。

99
00:08:16,580 --> 00:08:32,960
因此，要選擇身體，我們可以做這樣的事情得到標記名稱人體的元素，然後只取第一個項目，因為只有一個在列表項VAR身體的ECO文件。

100
00:08:32,960 --> 00:08:38,130
如果我們看一下身體是我們獲得這個巨大的對象，整個身體。

101
00:08:38,390 --> 00:08:38,690
好。

102
00:08:38,690 --> 00:08:40,880
所以這是獲取標記名稱的元素。

103
00:08:40,880 --> 00:08:43,960
只是重申你給它就像一個盟友標籤名。

104
00:08:44,060 --> 00:08:48,510
它去，發現所有與之匹配的元素，並將它們全部返回給你在列表中。

105
00:08:48,560 --> 00:08:50,960
即使只有一個。

106
00:08:51,080 --> 00:08:54,070
所以在這裡我有一個例子與H-1這樣做。

107
00:08:54,200 --> 00:08:57,270
你可以看到，它選擇兩個H一次。

108
00:08:58,190 --> 00:09:00,620
好了，現在我們改變齒輪一點點。

109
00:09:00,710 --> 00:09:05,450
我們不再有一個get元素或得到的東西語法元素。

110
00:09:05,540 --> 00:09:11,360
這就是所謂的queery選擇器和查詢選擇器是未長期存在為所有較新的方法。

111
00:09:11,390 --> 00:09:13,640
這確實使我們的生活輕鬆了許多。

112
00:09:13,670 --> 00:09:23,980
因此，我們實際上可以用它來做到這一點，我們以get元素看到了ID度日類名的元素得到與標記名稱的元素，我們可以使用查詢選擇複製所有的一切。

113
00:09:24,350 --> 00:09:28,260
那麼，它的作用是它需要綜援的風格選擇。

114
00:09:28,370 --> 00:09:34,130
因此，一個綜援風格選擇意味著隨便什麼我們就用它代替綜援的文件選擇器。

115
00:09:34,130 --> 00:09:50,060
因此，在這個例子中，我選擇基於該ID亮點，所以我不能只是寫的字像亮點我與id來獲取元素做了什麼，但我要做的就是使用綜援語法哈希符號或八溴索普然後突出顯示。

116
00:09:50,060 --> 00:09:52,640
因此，這是你如何選擇具有查詢選擇的東西。

117
00:09:52,640 --> 00:09:59,180
如果你想要一個ID就像你用C SS，我們得到這個ID為第一個盟友等於突出。

118
00:09:59,180 --> 00:10:13,070
之前，我去到控制台，然後輸入了這一點，我會告訴你，我們可以做同樣的事情用一個類名var標記等於該queery選擇點折疊這就是我們將如何使用C SS選擇粗體類文檔。

119
00:10:13,350 --> 00:10:18,200
而最重要的是，它實際上只給我們的第一比賽。

120
00:10:18,210 --> 00:10:25,240
因此，即使有已粗體如IT類只給我們第一個，這就是選擇的點的兩個元素。

121
00:10:25,290 --> 00:10:31,990
它永遠只是返回一個元素還有另一種方法，我們很快就會看到，這將返回匹配的所有元素。

122
00:10:32,010 --> 00:10:35,540
因此，查詢選擇器還可以在標籤名像我們這裡。

123
00:10:35,550 --> 00:10:39,140
H-1和返回的第一H-1。

124
00:10:39,600 --> 00:10:47,300
因此，我們可以把我們寫的所有時間，看看SS綜援選擇，我們可以使用語法來選擇使用查詢選擇元素。

125
00:10:47,640 --> 00:10:49,190
所以，我會證明這裡。

126
00:10:49,410 --> 00:10:53,830
讓我明確了這一點，我們選擇這首。

127
00:10:53,830 --> 00:10:54,630
H-1。

128
00:10:54,750 --> 00:10:56,310
因此，所有我需要做的。

129
00:10:56,340 --> 00:11:05,900
VAR H-1等於文檔查詢選擇H-1。

130
00:11:06,450 --> 00:11:13,700
如果我們看一下H1又是它是一個不錯的字符串表示，但它實際上是代表這整個元素的對象。

131
00:11:14,220 --> 00:11:18,160
所以，接下來，讓我們嘗試過基於一個ID的選擇。

132
00:11:18,210 --> 00:11:21,270
所以我只是去複製，而這條線比H-1。

133
00:11:21,270 --> 00:11:29,280
這將是一個盟友，而不是選擇先H-1將選擇具有ID亮點中的第一項。

134
00:11:29,640 --> 00:11:37,160
而且因為它是一個ID，當然這只是一個有一個頁面上這個想法項目，我們需要這樣的過程中，只有一個項目。

135
00:11:37,170 --> 00:11:38,220
八Thorgeir。

136
00:11:38,400 --> 00:11:44,180
否則，它會尋找一個標籤名叫做亮點不存在，H.J。他出去。

137
00:11:45,010 --> 00:11:52,020
如果我按下回車鍵，看看·哈吉我得到了與列表項一個識別碼第一盟友等於亮點。

138
00:11:52,500 --> 00:11:55,650
最後，讓我們做同樣的事情用一個類。

139
00:11:55,800 --> 00:12:07,270
於是我就用綜援Leichter點折疊這是我們如何選擇一個類，如果我們看一下盟友我得到平等級符號列表項目2第二個盟友。

140
00:12:07,440 --> 00:12:09,350
因此，有其他的東西，我們可以選擇。

141
00:12:09,510 --> 00:12:13,190
這不只是基於掀起了標記名稱或ID或一類。

142
00:12:13,200 --> 00:12:25,770
這些都是最常見的，但我們可以做其他的事情是這樣，這將不是我的網頁上工作，但我可以選擇一個盟友內部的所有錨標籤一類特殊的。

143
00:12:25,770 --> 00:12:29,550
而這是一個較長的ÇSS選擇，但它在美國是有效。

144
00:12:29,620 --> 00:12:35,730
因此，所有的錨標籤具有嵌套在盟友內部的，而且是完全有效的類特殊。

145
00:12:35,730 --> 00:12:37,920
再次，我沒有這個設置我的頁面上。

146
00:12:37,920 --> 00:12:40,900
所以，如果我打回車只是要給我。

147
00:12:41,520 --> 00:12:44,180
沒有，因為它沒有找到任何匹配。

148
00:12:45,030 --> 00:12:49,200
因此，正如我提到的奎裡選擇返回的第一場比賽，就是這樣。

149
00:12:49,200 --> 00:12:53,040
有時，如果你想選擇機體對實例非常有用。

150
00:12:53,160 --> 00:13:01,380
所有我需要做的是說查詢選擇身體，讓你不像當我做圩區文件度日標籤名body元素的身上。

151
00:13:01,380 --> 00:13:05,030
他們給了我一個清單，然後他們要問的第一個元素。

152
00:13:05,220 --> 00:13:08,520
如果我使用的查詢選擇我就把身體的時候了。

153
00:13:08,730 --> 00:13:11,570
但另一種是queery選擇所有。

154
00:13:11,640 --> 00:13:13,570
因此，它的工作原理完全一樣。

155
00:13:13,590 --> 00:13:17,840
這需要一個C一組選擇，但它返回所有匹配的元素。

156
00:13:17,850 --> 00:13:28,520
因此，在這種情況下，我使用的文件，查詢選擇所有的H-1的回報都是H一次或在這種情況下，我使用粗體類。

157
00:13:28,620 --> 00:13:29,820
所以綜援風格。

158
00:13:29,850 --> 00:13:34,610
我需要斑點加粗，並且給我帶班等於粗體兩個元素。

159
00:13:34,770 --> 00:13:36,930
因此，讓我們證明在CON ..

160
00:13:37,050 --> 00:13:40,140
讓我們選擇所有的盟友為止。

161
00:13:40,140 --> 00:13:43,200
盟軍等於記錄該查詢選擇。

162
00:13:43,440 --> 00:13:46,560
所有的盟友。

163
00:13:46,870 --> 00:13:48,300
這會給我所有的人。

164
00:13:48,510 --> 00:13:49,820
我看著盟友。

165
00:13:50,040 --> 00:13:52,010
你可以看到它有三個盟友。

166
00:13:52,380 --> 00:13:54,370
最後一次，我知道我是一個破紀錄。

167
00:13:54,390 --> 00:13:55,660
這些對象。

168
00:13:55,740 --> 00:13:57,200
他們不是HMO。

169
00:13:57,270 --> 00:14:01,410
它們是從HMO構造的JavaScript對象。

170
00:14:02,220 --> 00:14:08,450
如果我做同樣的事情，但我查詢選擇去做，而不是我回車。

171
00:14:08,760 --> 00:14:12,180
如果我看的盟友它不是一個列表是唯一的一個。

172
00:14:12,510 --> 00:14:14,520
如果我這樣做是為了一類，所以同樣的事情。

173
00:14:14,550 --> 00:14:17,670
因此，讓我們做了加粗類。

174
00:14:17,670 --> 00:14:23,320
我們只把它加粗，並有你記錄粗體的查詢選擇點。

175
00:14:24,060 --> 00:14:27,920
我看這只是第一個項目列表項了。

176
00:14:27,990 --> 00:14:35,630
如果我做的查詢選擇所有然後我在那裡得到他們兩個的列表。

177
00:14:35,860 --> 00:14:42,940
常常為我的學生困惑的一點是，你仍然可以使用查詢選擇所有即使有你要找的只有一個元素的。

178
00:14:43,120 --> 00:14:51,070
因此，像變種盟友等於文檔點查詢選擇，你可以做一些事情。

179
00:14:51,300 --> 00:14:59,300
像所有的亮點ID，而我看著盟友和它的同一個項目的列表。

180
00:14:59,350 --> 00:15:03,700
這只是非常罕見的，你會做，但如果只有一個匹配，它仍然可以工作。

181
00:15:04,080 --> 00:15:06,530
好吧，所以我們在這個視頻涵蓋了大量的地面。

182
00:15:06,900 --> 00:15:10,320
所以，讓我們回到起點，做一個真正快速收官。

183
00:15:10,530 --> 00:15:24,530
一開始我們來談談如何將所有這些方法都是文檔對象的內部，我們可以通過ID使用get元素通過ID選擇，我們可以通過類名與類名得到的元素選擇，並且返回一個列表，它並不是真正的數組。

184
00:15:24,610 --> 00:15:26,370
這就是所謂的節點列表。

185
00:15:26,380 --> 00:15:36,850
我們可以做同樣的事情，但通過標籤名使用GET元素也將返回基於關閉，我們到那時我們有查詢選擇是所有萬事通選擇一個元素類型的節點列表。

186
00:15:36,990 --> 00:15:40,860
它返回給定綜援選擇相匹配的第一個元素。

187
00:15:40,980 --> 00:15:52,210
因此，我們可以用它來做到這一點的ID類名和標籤名獲得元素都沒有，我們可以給它一個ID就像我們在這裡做一個類像我們在這裡做或元素名稱。

188
00:15:52,620 --> 00:15:57,900
再有就是查詢選擇所有除它返回一個列表，它是不是一個數組，它的工作方式相同。

189
00:15:57,900 --> 00:16:01,800
這也是一個給定的選擇器匹配的所有元素迸發的節點。

190
00:16:01,800 --> 00:16:02,040
好吧。