1
00:00:00,270 --> 00:00:01,320
다시 오신 것을 환영합니다.

2
00:00:01,320 --> 00:00:07,770
이 비디오에서는 자바 스크립트와 인형을 사용하여 요소를 선택하는 다양한 방법에 대해 이야기 할 시간을가집니다.

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
나는 Google을 사용하고이 네 줄을 입력 해 보겠습니다.

8
00:00:32,430 --> 00:00:40,300
그래서 콘솔을 열고 당신이 입력하는 문서 점을 입력하면 우리가있는 페이지의 URL을 보여줍니다.

9
00:00:40,610 --> 00:00:46,400
문서 도트 링크를 할 수 있으며 페이지의 모든 단일 링크의 전체 목록입니다.

10
00:00:46,410 --> 00:01:00,610
우리가 할 수있는 모든 앵커 태그는 Vadi와이 몸 안의 다른 모든 요소가 몸 전체에 있다는 것을 문서화 할 수 있으며 우리는 문서 점 머리를 할 수 있습니다.

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
이 비디오에서 우리가 이야기 할 5 가지 주요 방법이 있습니다.

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에 의해 요소를 얻습니다. 클래스 이름에 의해 요소를 가져옵니다. 태그 이름으로 큐리 선택기와 큐리 선택기로 요소를 가져옵니다.

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
이 5 가지 메소드는 모두 문서 객체에 추가되었습니다.

23
00:02:00,900 --> 00:02:07,100
따라서 실제로 시작하기 전에 데모 목적으로 사용할 H-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과 3 명의 동맹국 대신에 3 명의 동맹국이 항목 1과 2를 약간 씩 나열합니다.

29
00:02:30,180 --> 00:02:35,450
처음에는 ID 강조 표시가 있고 마지막에는 bolded라는 클래스가 있습니다.

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
하나는 ID가 있습니다.

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
이제 첫 번째 방법부터 시작해 보겠습니다.

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별로 요소를 가져 오는 예제 문서입니다.

43
00:03:18,600 --> 00:03:26,940
하이라이트가 ID 강조 표시가있는이 동맹을 선택하여 개체를 선택한 다음 다시 표시합니다.

44
00:03:27,030 --> 00:03:29,450
나는 그것을 평의회에서 신속하게 보여줄 것입니다.

45
00:03:29,520 --> 00:03:40,000
ID 이름 인 id 하이라이트로 문서 유형 get 요소에 콘솔을 열어 보겠습니다.

46
00:03:40,100 --> 00:03:43,020
tag라는 변수에 저장해 봅시다.

47
00:03:43,020 --> 00:03:43,730
들어가십시오.

48
00:03:43,890 --> 00:03:45,260
TAG를 살펴 보겠습니다.

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
실제로 실제로 노화 된 것처럼 보이지만 사실이 결과는 실제로 자바 스크립트 객체입니다.

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 개있는 경우 목록에 모두 10000 개를 가져옵니다.

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
둘 다 굵은 체와 동등한 두 가지 거짓 목록입니다.

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
우리는 outflank 태그를 할 수 있지만 각각에 대해 각 루프 태그 도트를 수행 할 수는 없습니다.

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
그리고 이드의 요소를 얻는 것만으로도이 멋진 문자열 표현을 보여 주지만 장면 뒤에는 실제로 객체입니다.

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
그것은 Ally 또는 H-1과 같은 주어진 태그 이름과 일치하는 요소의 목록을 반환합니다.

88
00:06:56,810 --> 00:07:06,040
그래서이 경우 저는 document dight를 실행하고 있습니다 태그 이름 Alhaj가이 페이지에 존재하는 세 명의 동맹 자 목록을 나에게 돌려 줄 것입니다.

89
00:07:06,500 --> 00:07:30,200
다시 한번 var 태그가 태그 이름으로 요소를 가져온 문서와 같고 Alhaj를 먼저 살펴보고 태그를 살펴 보겠습니다. 또한이 목록을 알기 쉽게 배열 한 것은 3 개의 동맹을 가진 노드 목록이며이를 증명하지는 못할 것입니다. 이번에는 너에게.

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 조 timl 그들은 실제로 그 모든 속성을 가진 자바 스크립트 개체입니다.

93
00:07:39,200 --> 00:07:42,230
그래서 저는 H-1에 대해서도 똑같이 할 수 있습니다.

94
00:07:42,410 --> 00:07:50,120
그래서 우리는 모든 h 개의 것들을 선택하고 우리는 태그들을 보았고 우리는 h와 그것들을 얻었습니다.

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
태그 이름 본문으로 요소를 가져 오면 하나의 요소가 포함 된 목록이 나에게 반환됩니다.

98
00:08:04,250 --> 00:08:16,490
또는 머리 또는 시간 요소 또는 제목이나 내가 원하는대로 할 수도 있지만 중요한 부분은 하나의 요소 만 있어도 여전히 목록을 반환하는 경우에도 목록을 반환한다는 것입니다.

99
00:08:16,580 --> 00:08:32,960
그래서 시체를 선택하기 위해 우리는 var body 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
이것은 큐리 선택기라고하며 쿼리 선택기는 오래 동안 존재하지 않은 새로운 방법입니다.

111
00:09:11,390 --> 00:09:13,640
그것은 정말로 우리 삶을 훨씬 쉽게 만듭니다.

112
00:09:13,670 --> 00:09:23,980
그래서 우리는 실제로 우리가 본 모든 것을하기 위해 그것을 사용할 수 있습니다. id에 의해 요소를 얻습니다. 클래스 이름으로 요소를 얻습니다. 태그 이름을 가진 요소를 얻습니다. 우리는 모든 것을 쿼리 선택자로 복제 할 수 있습니다.

113
00:09:24,350 --> 00:09:28,260
CSSA 스타일 선택기가 필요합니다.

114
00:09:28,370 --> 00:09:34,130
따라서 CSSA 스타일 선택기는 CSSA 문서 대신 사용할 선택기를 의미합니다.

115
00:09:34,130 --> 00:09:50,060
그래서이 예제에서는 ID 강조 표시를 기반으로 무언가를 선택합니다. 따라서 ID로 요소를 가져온 것처럼 하이라이트라는 단어를 쓸 수는 없지만 해시 기호 또는 Octa와 함께 CSSA 구문을 사용해야합니다 Thorpe를 선택하고 강조 표시합니다.

116
00:09:50,060 --> 00:09:52,640
따라서 쿼리 선택기로 무언가를 선택하는 방법입니다.

117
00:09:52,640 --> 00:09:59,180
C S와 똑같은 ID를 원하면 ID와 하이라이트가 같은 첫 번째 동맹을 얻습니다.

118
00:09:59,180 --> 00:10:13,070
내가 콘솔에 가서 타이핑하기 전에 클래스 이름으로 같은 것을 할 수 있다는 것을 보여줄 것입니다. var 태그는 C S를 사용하여 굵게 표시된 클래스를 선택하는 방법 인 queery selector가 접혀있는 문서와 같습니다.

119
00:10:13,350 --> 00:10:18,200
중요한 점은 실제로 첫 번째 경기 만 제공한다는 것입니다.

120
00:10:18,210 --> 00:10:25,240
따라서 클래스로 굵게 표시된 두 개의 요소가 있지만 첫 번째 요소 만 제공하므로 선택자가됩니다.

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
따라서 우리는 항상 CSSA 선택기를 사용하여 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
Octa Thorgeir.

136
00:11:38,400 --> 00:11:44,180
그렇지 않으면 존재하지 않는 하이라이트라는 태그 이름을 찾아 헤이저 밖으로 내보낼 것입니다.

137
00:11:45,010 --> 00:11:52,020
그리고 내가 입력을 치고 Alhaj를 보았을 때 나는 목록 항목 1 ID가 하이라이트와 같은 첫 번째 동맹국을 얻습니다.

138
00:11:52,500 --> 00:11:55,650
마지막으로 수업을 통해 똑같은 일을 해봅시다.

139
00:11:55,800 --> 00:12:07,270
그래서 저는 CSSA Leichter를 사용하여 클래스를 선택하는 방법을 접었습니다. 그리고 우리가 Ally를 보았을 때 클래스 동등한 글 머리 기호 목록 항목 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
그리고 이것은 더 긴 C 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
그래서 내가 Enter를 누르면 그냥 줘.

147
00:12:41,520 --> 00:12:44,180
일치하는 항목을 찾지 못해서

148
00:12:45,030 --> 00:12:49,200
그래서 Querrey selector가 첫 번째 일치를 반환한다고 말했지만 그게 전부입니다.

149
00:12:49,200 --> 00:12:53,040
때로는 시체를 선택하고 싶을 때 유용합니다.

150
00:12:53,160 --> 00:13:01,380
내가해야 할 일은 질의 선택기 몸체를 말하면, 문서를 찍었을 때와 달리 몸체가 태그 이름 몸체로 요소를 얻는다는 것입니다.

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
그러나 대안은 모두 큐리 선택기입니다.

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이 한 번만 반환하거나이 경우 굵게 표시된 클래스를 사용한다는 문서를 사용하고 있습니다.

157
00:13:28,620 --> 00:13:29,820
그래서 CSS 스타일.

158
00:13:29,850 --> 00:13:34,610
굵게 표시된 점이 필요합니다. 그러면 두 가지 요소가 굵게 표시됩니다.

159
00:13:34,770 --> 00:13:36,930
그럼 그걸 증명해 봅시다 ..

160
00:13:37,050 --> 00:13:40,140
지금까지 모든 동맹국을 선택합시다.

161
00:13:40,140 --> 00:13:43,200
Allies는 쿼리 선택기와 같은 문서입니다.

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
3 개의 맹방이 있음을 알 수 있습니다.

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
그리고 같은 일을한다면 쿼리 선택기로 대신 입력하고 Enter 키를 누릅니다.

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
그래서 당신은 var ally가 document dot query selector와 같은 것을 할 수 있습니다.

179
00:14:51,300 --> 00:14:59,300
하이라이트와 같은 ID와 앨리 (Ally)를 보는 것은 모두 하나의 항목을 가진 목록입니다.

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로 요소를 가져올 수있는 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
지정된 CSSA 선택기와 일치하는 첫 번째 요소를 반환합니다.

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
괜찮아.