1
00:00:01,470 --> 00:00:02,790
다시 오신 것을 환영합니다.

2
00:00:02,790 --> 00:00:05,340
그래서이 비디오는 조금 달라질 것입니다.

3
00:00:05,340 --> 00:00:11,410
우리는 돔을 조작하는 새로운 방법을 소개하지는 않겠지 만 우리가 배운 것을 취하고 코드를 약간 수행 할 것입니다.

4
00:00:11,640 --> 00:00:13,860
그래서 Google의 홈 페이지를 가지고 놀 것입니다.

5
00:00:13,950 --> 00:00:20,080
그래서 나는 당신이 비디오를 본 후에 나 자신과 함께이 일을하거나 구글을 열 것을 권한다.

6
00:00:20,340 --> 00:00:23,780
그리고 우리는 로고 변경과 같은 재미있는 일을 할 것입니다.

7
00:00:23,940 --> 00:00:32,220
우리는 고양이 애호가가 모든 링크를 변경하여 그들이 닷컴이나 그와 비슷한 곳으로 간다는 것을 알기 위해 이번에 새끼 고양이의 사진을 찍을 것입니다.

8
00:00:32,250 --> 00:00:43,710
이 단원에서 강조하고 싶은 한 가지 점은 루프를 사용하여 여러 요소를 조작 할 수 있으므로 항상 한 가지를 선택하고 색상을 변경하거나 이미지를 하나 선택하고 소스를 변경하지 않아도된다는 것입니다.

9
00:00:43,770 --> 00:00:49,440
우리는 모든 이미지를 선택하고 그리스트를 반복 할 수 있으며 각각의 이미지를 소스로 바꿀 수 있습니다.

10
00:00:49,470 --> 00:00:51,080
그래서 여기서 어떻게 할 수 있는지 보여 드리겠습니다.

11
00:00:51,300 --> 00:00:52,790
그래서 우리는 간단하게 시작할 것입니다.

12
00:00:53,100 --> 00:00:55,050
이 로고를 선택하여 시작하겠습니다.

13
00:00:55,380 --> 00:01:01,730
이 일반 로고 대신 Google 기념일 로고가있는 날에 Google에있는 경우 빠른 쪽지입니다.

14
00:01:01,860 --> 00:01:03,640
여기에는 이미지가 없을 수도 있습니다.

15
00:01:03,780 --> 00:01:06,850
때때로 그들은 멋진 애니메이션이나 대화 형 게임을 가지고 있습니다.

16
00:01:06,930 --> 00:01:10,390
그리고 그 경우 캔버스 요소와 같은 것일 수 있습니다.

17
00:01:10,470 --> 00:01:14,980
그래서 당신이 검사 할 때 그것을 만난다면 괜찮습니다. 당신은이 부분을 볼 수 있습니다.

18
00:01:15,010 --> 00:01:22,100
우리는 이미 이미지 소스를 변경하는 방법을 보았습니다.하지만 다른 사람들의 웹 사이트에서 그렇게 할 수 있다는 것을 보여주고 싶습니다.

19
00:01:22,530 --> 00:01:26,680
이미지이고 ID가있어서 쉽게 만들 수 있습니다.

20
00:01:26,850 --> 00:01:28,290
HP 로고.

21
00:01:28,410 --> 00:01:38,660
이제 우리의 로고가 쿼리 선택기 HP 로고와 동일한 문서라는 것을 선택하겠습니다.

22
00:01:38,880 --> 00:01:42,090
물론 ID별로 요소를 사용할 수도있었습니다.

23
00:01:42,390 --> 00:01:46,210
그래서 우리는 그것과 동등한 로고로 끝납니다.

24
00:01:46,320 --> 00:01:47,890
그래서 우리는 그것을 선택했습니다.

25
00:01:48,030 --> 00:01:51,540
그리고 우리가 이미지를 바꾸고 싶다면 소스를 바꿀 것입니다.

26
00:01:51,540 --> 00:01:55,530
우리는 set 속성을 사용할 필요가 있고 여기에 이미지 만 있습니다.

27
00:01:56,190 --> 00:01:57,650
좋은 새끼 고양이.

28
00:01:57,660 --> 00:01:59,070
너는이 기단을 가져갈거야.

29
00:01:59,060 --> 00:02:04,540
나는 그것을 복사 할 것이고, 나는이 로고의 출처를 업데이트 할 것이다.

30
00:02:04,650 --> 00:02:10,210
공포 대신 로고 도트 속성을 설정합니까?

31
00:02:10,380 --> 00:02:12,630
우리는 근원을 쓰려고합니다.

32
00:02:12,810 --> 00:02:21,160
그리고 두 번째 논쟁은 새로운 소식통입니다. 그리고 저는 enter를 치고 멋진 작은 고양이 Roquette가 나타납니다.

33
00:02:21,210 --> 00:02:22,760
이런 메시지가 나타날 수 있습니다.

34
00:02:22,860 --> 00:02:24,720
사용하는 이미지에 따라 다릅니다.

35
00:02:24,900 --> 00:02:26,770
그래서 간단히 설명하겠습니다.

36
00:02:26,910 --> 00:02:36,470
우리가 볼 수있는 것처럼 TTP가로드 된 페이지에 있고 B에 소스를 설정 한 이미지가 H TTP임을 언급하는 것입니다.

37
00:02:36,570 --> 00:02:40,700
그리고 그것을 짧게하기 위해 HTP는 HGP보다 더 안전합니다.

38
00:02:40,710 --> 00:02:46,400
그래서 모든 HTP가되어야한다는 불평입니다. 그렇습니다.

39
00:02:46,410 --> 00:02:49,560
그건 정말 간단한 버전이지만 여전히 우리가 할 수 있습니다.

40
00:02:49,560 --> 00:02:53,630
우리가 여기에서하려고하는 것이 Google을 가지고 노는 것에 대한 거대한 문제는 아닙니다.

41
00:02:53,670 --> 00:03:00,990
그것은 당신이 당신 자신의 응용 프로그램에서 이와 같은 일을한다면 그것은 문제가 될 것이라고 생각하고 싶을지라도 무언가입니다.

42
00:03:01,020 --> 00:03:03,070
그래서 여기에 내용으로 돌아갑니다.

43
00:03:03,280 --> 00:03:11,230
이 고양이의 너비와 높이가 원래 Google 로고와 동일한 공간을 차지하도록 변경되었습니다.

44
00:03:11,460 --> 00:03:19,800
나는 실제로 그 높이가 원래 92이고 2 백 72이 있음을 볼 수있다.

45
00:03:20,280 --> 00:03:22,130
그리고 그것이 바로 여기서 일어나는 일입니다.

46
00:03:22,170 --> 00:03:36,300
당신은 내가 이것을 바꿀 수 있는지, 로고 도트 스타일의 점을 찍을 수 있고 문자열을 가져 와서 단지 500 픽셀이되도록 변경할 수 있는지 알 수 있습니다.

47
00:03:36,810 --> 00:03:39,720
당신은 그것이 펼쳐지는 것을 볼 수 있고 나는 똑같은 일을 할 수 있습니다.

48
00:03:39,750 --> 00:03:41,530
1,000 픽셀로 변경하십시오.

49
00:03:41,970 --> 00:03:45,750
멋진 스트레치 키티를 얻고 너비를 바꿀 수 있습니다.

50
00:03:45,870 --> 00:03:51,900
나는 높이를 의미하고 500이나 가난한 고양이를 만들자.

51
00:03:51,900 --> 00:03:55,410
그것은 단지 온통 뻗어 가고 있습니다.

52
00:03:55,590 --> 00:03:59,550
그러니 조금 더 적절한 것으로 높이를 재설정하십시오.

53
00:03:59,730 --> 00:04:13,070
높이를 약 100 픽셀로, 폭을 약 200으로합시다.

54
00:04:13,080 --> 00:04:16,590
좋아, 이제는 더 많은 연습을 위해 우리를 위해 일할 것이다.

55
00:04:16,590 --> 00:04:34,130
이미지 테두리 주위에 테두리를 두어 스타일 테두리가 같고 2 픽셀의 단색 보라색 테두리를 만들고 그 이미지 주위에 훌륭한 파트너가 있습니다.

56
00:04:34,410 --> 00:04:45,750
이제는 여러 요소를 한꺼번에 선택하고 루프를 사용하여 개별적으로 조작하지 않고이를 조작하는 비디오의 시작 부분에서 소개 한 내용으로 넘어 갑시다.

57
00:04:45,750 --> 00:04:48,980
그래서 우리가 할 일은 페이지의 모든 앵커 태그를 선택하는 것입니다.

58
00:04:48,990 --> 00:04:50,740
이 페이지에는 많은 링크가 있습니다.

59
00:04:50,820 --> 00:04:57,290
우리는 각각 하나씩 가지고 ref 속성을 변경하여 그들이가는 곳 이라기보다는 다른 웹 사이트로 이동합니다.

60
00:04:57,510 --> 00:05:02,830
시작하려면 모든 앵커 태그를 선택해야합니다. 이렇게하려면 여러 가지 방법이 필요합니다.

61
00:05:02,880 --> 00:05:07,170
나는 그것을 링크라고 부르 겠고 링크는 우리가 문서를 할 것입니다.

62
00:05:07,170 --> 00:05:23,470
우리는 질의 문자를 모두 할 수 있지만 태그 이름 앵커 태그로 요소를 가져오고 링크를 보면이 페이지에서 꽤 많은 것을 볼 수 있으므로이 과정을 반복 할 것입니다.

63
00:05:23,550 --> 00:05:35,750
우리는 링크를 할 수 없습니다. 존재하지 않는 도트 집합 속성은 링크가 속성이 아닌 함수에서 시작한다는 것을 알려줍니다.

64
00:05:35,880 --> 00:05:40,860
그리고 그 속성은 개별 요소와 링크에만 존재하기 때문입니다.

65
00:05:40,860 --> 00:05:42,640
이 노드 집합입니다.

66
00:05:42,750 --> 00:05:47,960
그래서 나는 객체와 같은 다른 배열을 통해 반복하는 것처럼 반복해야합니다.

67
00:05:48,330 --> 00:05:51,590
따라서 실제 어레이가 아니기 때문에 각각 사용할 수는 없습니다.

68
00:05:51,660 --> 00:05:54,880
그래서 for 루프를 사용해야하거나 기술적으로 while 루프를 사용할 수 있습니다.

69
00:05:54,900 --> 00:05:56,310
대부분의 사람들은 for 회 돌이를 사용합니다.

70
00:05:56,490 --> 00:06:14,160
그래서 equals가 0 인 것은 길이보다 작은 링크이고 1을 더하고 루프 내에서 각 개별 링크에 액세스 할 것입니다. 안녕하세요.

71
00:06:14,340 --> 00:06:18,040
그리고 텍스트 콘텐츠를 인쇄 해 봅시다.

72
00:06:18,060 --> 00:06:22,850
따라서 텍스트 콘텐츠를 링크하면 해당 로그가 취소됩니다.

73
00:06:24,090 --> 00:06:35,140
이것은 많은 요소들을 반복하면서 콘솔에서 출력하는 것이 아니라 어쨌든 그것을 디스플레이하거나 색상을 바꾸는 것에 대해 뭔가를 바꾸는 일반적인 패턴입니다.

74
00:06:35,420 --> 00:06:40,050
따라서 enter를 누르면 페이지의 모든 링크의 텍스트 콘텐츠임을 알 수 있습니다.

75
00:06:40,200 --> 00:06:50,460
따라서 사진과 같은 것들을 알게되고 구글 플러스 드라이브를 재생하십시오.이 모든 링크는이 페이지의 어딘가에 있습니다. 그것은 구글의 홈페이지입니다.

76
00:06:50,520 --> 00:07:05,570
따라서 위쪽 화살표를 치면 곧바로 사물을 인쇄하고이 루프로 돌아가서 실제로 스타일을 변경하여 시작하여 길이를 더 쉽게 볼 수있게 만들어 보겠습니다. 다른 색상으로 만들어서 주변에 테두리를 만들어 보겠습니다. .

77
00:07:05,910 --> 00:07:19,990
그래서 나는 로그를 쓰고 나는 lynx 스타일로 할거야, 그리고 우리는 백그라운드를 바꾸어서 분홍색으로 만들겠다고 내 콘솔을 제거 할 것입니다.

78
00:07:20,800 --> 00:07:25,050
그리고 엔터를 누르면 콘솔을 닫을 수 있습니다.

79
00:07:25,080 --> 00:07:27,790
페이지의 모든 링크가 이제 분홍색입니다.

80
00:07:27,810 --> 00:07:29,120
배경이 핑크색입니다.

81
00:07:29,280 --> 00:07:31,680
여기이게 바로 링크입니다.

82
00:07:31,750 --> 00:07:34,490
이 모든 사람들은 로그인 버튼에있는 항목입니다.

83
00:07:34,830 --> 00:07:35,890
그것은 또한 링크입니다.

84
00:07:36,270 --> 00:07:37,910
그러니 한 가지 더 해보 죠.

85
00:07:38,010 --> 00:07:39,140
다시 반복하자.

86
00:07:39,210 --> 00:07:43,870
위쪽 화살표를 치고 몇 가지 일을 해보고 스타일을합시다.

87
00:07:43,910 --> 00:07:52,060
테두리는 하나의 픽셀과 같으며 보라색을 나타냅니다.

88
00:07:52,410 --> 00:08:04,980
그리고 다음 줄 링크에서 나는 스타일을 만들고 오렌지색으로 색을 바꾸자.

89
00:08:05,520 --> 00:08:07,880
그래서 그 두 명은 진입합니다.

90
00:08:07,890 --> 00:08:16,010
그리고 우리는 우리 페이지에서 분홍색 배경 작은 보라색 테두리뿐만 아니라 일반 테두리가 정말 아름 다운 링크를 얻을 것을 볼 수 있습니다.

91
00:08:16,110 --> 00:08:18,090
그것은 아주 멋지다.

92
00:08:18,180 --> 00:08:20,610
그리고 우리는 거기에 오렌지색 텍스트도 넣습니다.

93
00:08:21,240 --> 00:08:27,640
그러나 우리가 그들을 클릭하면 트랩이 아직 변경되지 않았 음을 알 수 있습니다. 왜냐하면 우리가 트랩을 변경하지 않았기 때문입니다.

94
00:08:27,750 --> 00:08:31,230
그래서 나는 그들 모두를 WDW로 바꾸기를 원합니다.

95
00:08:31,270 --> 00:08:36,590
닷컴이된다는 것은 사기범에게 가야합니다. 이미 내 링크를 선택했습니다.

96
00:08:36,630 --> 00:08:41,620
이 거대한 콜렉션과 저는 이미 루프를 작성하여 재사용 할 것입니다.

97
00:08:42,540 --> 00:08:45,680
그리고 이것을 반복하면 많은 일을하게 될 것입니다.

98
00:08:45,690 --> 00:08:51,070
그래서 우리가 각각을 사용할 수없는 4 개의 루프를 작성할 수 있다면 편안해질 것입니다.

99
00:08:51,090 --> 00:08:52,610
그래서 for 루프를 사용해야합니다.

100
00:08:52,680 --> 00:08:53,770
우리는 항상 이것을합니다.

101
00:08:53,790 --> 00:08:59,050
그리고 여기부터 우리가 Jey 쿼리에 도달 할 때까지이 유형의 라인을 많이 작성하게 될 것입니다.

102
00:08:59,310 --> 00:09:02,080
그래서 나는 우리를 연결시킬거야.

103
00:09:02,430 --> 00:09:08,580
그리고 우리는 시작할 것입니다. 그러나 모든 빛이 어디로가는 지 밖으로 인쇄하면 그 로그를 취소 할 것입니다.

104
00:09:10,050 --> 00:09:16,060
그리고 우리는 atra의 log get 속성을 취소 할 것입니다.

105
00:09:18,240 --> 00:09:19,770
그냥 그렇게.

106
00:09:20,400 --> 00:09:25,740
그리고 우리는 기술적으로 그것을 발명 할 필요는 없지만, 당신이보기가 더 쉽습니다.

107
00:09:26,250 --> 00:09:40,290
그리고 우리는 여기에서 볼 수 있도록 끊임없이 로그를 닫는 인쇄본을 놓치고 있습니다. 이제 모든 링크 목록을 얻었습니다. 흥미로운 점은 그 중 일부를 볼 수 있다는 것입니다.

108
00:09:40,380 --> 00:09:45,090
이것은 자바 스크립트 앞으로 0 또는 아니오이 일에 대한 링크입니다.

109
00:09:45,150 --> 00:10:01,710
그래서 그들 중 일부는 비어 있습니다. Tref가없는 곳도 있습니다. Tref 중 일부는 웹 사이트를 분리하거나 일부는 여기 같은 상대 경로이고 일부는 절대적인 것입니다.

110
00:10:01,770 --> 00:10:02,310
승인.

111
00:10:02,490 --> 00:10:04,730
그럼 지금 바꾸자.

112
00:10:04,890 --> 00:10:11,230
Compton-Rock 블로그 링크 나는 속성을 설정 했으므로 속성을 지속적으로 기록 할 필요가 없습니다.

113
00:10:11,430 --> 00:10:17,400
그리고 우리가 우리가 HPF를 W.W로 바꾸고 싶은 HGF를 원하는 것으로 바꾸어 봅시다.

114
00:10:17,430 --> 00:10:25,930
저것은 HTP 콜론 슬래시 BW 도트 Bing 점 com을 다만 그 같이한다.

115
00:10:26,340 --> 00:10:27,930
그리고 우리는 엔터를 쳤다.

116
00:10:27,930 --> 00:10:29,570
그것은 변화된 것처럼 보이지 않습니다.

117
00:10:29,880 --> 00:10:32,650
우리가 링크를 입력하면 우리가 가지고있는 것을 보게됩니다.

118
00:10:32,820 --> 00:10:42,480
모든 사람은 이제 닷컴이되고 우리는 또한 하나를 검사 할 수 있고 요소 검사관에서 볼 수 있습니다 그것은 닷컴이되는 것입니다.

119
00:10:42,780 --> 00:10:45,870
마지막으로 테스트 할 것은 클릭하는 것입니다.

120
00:10:45,990 --> 00:10:52,860
빨리 로그인 버튼을 누르거나 Gmail을 끝내자. 그러면 나를 위해 열리는 것을 볼 수 있습니다.

121
00:10:53,580 --> 00:11:07,470
요약하자면, 우리는 일련의 것들을 링크 컬렉션으로 선택한 다음 for 루프를 사용하여 해당 컬렉션을 반복 한 다음 루프 내에서 각각의 개별 요소에 대해 무언가를 수행 할 수 있습니다. 그러면 각 요소가 모두 반복됩니다.

122
00:11:07,500 --> 00:11:19,500
그래서 배경색을 경계선으로 바 꾸었습니다. 글꼴 색을 변경 했으므로 몇 줄을 써야했고,이 페이지에서 20 ~ 30 개의 다른 길이를 모를 때 적용되었습니다.

123
00:11:19,500 --> 00:11:22,470
이것이 바로 다음 몇 가지 비디오에서 우리가 많이 사용할 패턴입니다.