1
00:00:00,600 --> 00:00:03,770
지금까지 우리는 별명이 왜 흥미로운 지에 대해 이야기했습니다.

2
00:00:03,960 --> 00:00:05,100
왜 신경 써야 하죠.

3
00:00:05,100 --> 00:00:09,420
끝없는 가능성을 사용하는 다른 사이트는 모든 흥미 진진한 게임을 게임으로 만듭니다.

4
00:00:09,570 --> 00:00:12,710
그러나 우리는 여전히 DOM이 실제로 무엇인지에 대해 이야기하지 않았습니다.

5
00:00:12,810 --> 00:00:16,380
그래서 우리는이 비디오에서 그것을 정의 해 보겠습니다.

6
00:00:16,380 --> 00:00:17,180
디오.

7
00:00:17,220 --> 00:00:20,040
Dom은 Document 개체 모델을 나타냅니다.

8
00:00:20,190 --> 00:00:24,100
이 세 단어의 의미는 다가올 슬라이드에서 조금 더 의미가 있습니다.

9
00:00:24,100 --> 00:00:26,780
그러나 더 높은 수준에서 정의하자.

10
00:00:26,820 --> 00:00:30,560
Dom은 자바 스크립트와 나이 사이의 인터페이스입니다.

11
00:00:30,570 --> 00:00:48,930
Tim Mounty SS 기본적으로 우리는 H.M.S.와 상호 작용하는 데 사용할 수있는 특수한 javascript 객체 인 javascript 메서드를 사용합니다. 우리는 우리가 요소를 추가 할 수있는 것들을 바꿀 수 있다고 평가한다. 요소를 제거한다. 색을 바꾼다. H.M.S.와 상호 작용할 수있는 흥미 진진한 방법들을 애니메이션화한다. 평가.

12
00:00:49,380 --> 00:00:56,070
이 슬라이드에서는 DOM이 어떻게 구성되고 왜 문서 객체 모델이라고 불리는 지에 대해 조금 이야기합니다.

13
00:00:56,070 --> 00:01:09,950
그래서 우리는 전자 메일 페이지를로드 할 때 브라우저에서 이와 같이 보입니다. 그러면 텍스트로 내 링크가있는 제목과 태그가 있고 텍스트로 내 머리글이있는 H-1이 있으므로 텍스트를 간단히 편집 할 수 있습니다. 그것.

14
00:01:10,260 --> 00:01:16,360
그래서 이것을 브라우저에서 열면이 장면이 보입니다 만 장면 뒤에는 DOM이 만들어집니다.

15
00:01:16,380 --> 00:01:19,190
바로 여기에서 건설되었습니다.

16
00:01:19,320 --> 00:01:24,270
그래서 저는이 나이 Tim이 많은 자바 스크립트 객체로 바뀌 었음을 의미합니다.

17
00:01:24,270 --> 00:01:27,440
각 객체는 이러한 요소 중 하나를 모델링합니다.

18
00:01:27,450 --> 00:01:31,340
그것이 우리가 객체 모델을 문서 객체 모델의 일부로 가져 오는 곳입니다.

19
00:01:31,650 --> 00:01:38,060
다시 한번 우리가 브라우저에 각 팀을로드하는 것을 되풀이하기 위해 브라우저는 우리에게 이와 같은 것을 표시합니다.

20
00:01:38,220 --> 00:01:47,490
하지만 실제로 javascript 객체를 사용하여 내 개 Rusty를 모델링 한 것처럼 자바 스크립트 객체가있는 모든 단일 요소의 모델을 실제로 만듭니다.

21
00:01:47,490 --> 00:01:50,770
그는 재산의 이름과 다른 품종과 나이를 가졌습니다.

22
00:01:50,850 --> 00:01:55,080
이러한 객체는 내용이 다르다는 것을 제외하고는 근본적으로 같은 것입니다.

23
00:01:55,110 --> 00:02:07,290
그들은 태그 텍스트 소스 속성의 종류와 같은 것을 가지게 될 것입니다. 배경색은 텍스트 크기입니다. 각각의 객체 안에 모두 들어있는 모든 속성이 있습니다.

24
00:02:07,290 --> 00:02:11,620
우리는이 객체들로 작업하는 데 많은 시간을 할애해야하므로 세부 사항은 중요하지 않습니다.

25
00:02:11,640 --> 00:02:14,970
여기에서 강조하고 싶은 것은 우리가 각 팀을로드하는 것입니다.

26
00:02:15,120 --> 00:02:22,610
브라우저에 표시되고 브라우저는 Tim L을 사용하여 각 요소를 가져 와서 객체로 변환합니다.

27
00:02:22,680 --> 00:02:24,510
그래서 그것은 객체 모델 부분을 포함합니다.

28
00:02:24,540 --> 00:02:25,860
그 서류는 요?

29
00:02:26,070 --> 00:02:38,930
여기서 볼 수있는 것은 이것이 우리가 DOM으로부터 얻는 구조 타입의 작은 다이어그램입니다. 모든 것이 H.T. 우리를 문서라고 부릅니다.

30
00:02:39,120 --> 00:02:41,200
그래서 우리는 어떤 웹 페이지로도 갈 수 있습니다.

31
00:02:41,220 --> 00:02:45,190
그래서 나는 Google을 열었고 나는 죄수를 입력 할 것입니다. 문서라는 단어.

32
00:02:45,390 --> 00:02:49,470
그리고 내가 그렇게 할 때, 나는이 큰 물건을 되 찾는 큰 일을 얻는다.

33
00:02:49,470 --> 00:02:51,900
그것을 제외하고는 자바 스크립트 객체처럼 보이지 않습니다.

34
00:02:51,900 --> 00:02:53,740
실제로 우리가 기대하는 것이 아닙니다.

35
00:02:53,760 --> 00:02:56,030
브라우저가 저를 숨기는 것이기 때문입니다.

36
00:02:56,130 --> 00:03:04,480
실제로 그것이 나를 보여주고있는 것은 HQ 메일이 텍스트처럼 보이지만이 티모에서 모델링 된 실제 물건을 보여주지 않습니다.

37
00:03:04,740 --> 00:03:19,990
그래서 우리는 콘솔 객체의 또 다른 메소드 인 cancel dot D I R을 사용할 필요가 있습니다. 그리고 우리는 그것을 취소 할 것입니다. 이것이 할 모든 문서는 우리가 잘 알고있는이 객체 구문으로 전체 문서 객체를 출력하는 것입니다.

38
00:03:20,070 --> 00:03:30,220
그래서 우리는 여기에 훨씬 더 많은 정보가 있다는 것을 제외하고는 우리가 우리 자신의 것으로 쓰고있는 것과 같은 그냥 일반적인 객체 인 것을 볼 수 있습니다.

39
00:03:30,510 --> 00:03:41,040
그래서 우리는 글꼴이나 이미지 링크와 같은 것을 가지고 있지만 우리는 또한 몸과 같은 것을 가지고 있으며이 몸은 몸 전체를 나타냅니다.

40
00:03:41,040 --> 00:03:44,320
여기에서 볼 수있는 모든 요소는 몸 안에 있습니다.

41
00:03:44,340 --> 00:03:51,050
그래서 시체를 열면 Child의 노드라고 불리는 것을 포함하여 여러 가지 속성이 있다는 것을 알 수 있습니다.

42
00:03:51,150 --> 00:03:58,590
그래서 자식 노드는 div 태그가 있고 div 태그 안에는 div 태그가 있다는 것을 보여줍니다.

43
00:03:58,590 --> 00:04:00,710
그리고 우리가 요소들에 가면 우리는 그것을 볼 것입니다.

44
00:04:00,710 --> 00:04:03,360
여기 몸의 몸이 있습니다.

45
00:04:03,420 --> 00:04:07,990
첫 번째 div에는 스크립트 태그가 있고 두 번째 div가 있습니다.

46
00:04:08,430 --> 00:04:15,890
그러면 세 번째 div를 열면 두 번째 div가 있으면 두 개의 div가 더 많이 표시됩니다.

47
00:04:15,900 --> 00:04:28,360
그리고 우리가 영사관으로 가서 두 번째 div를 본 다음 우리가 볼 수있는 자식 노드를 봅니다. 두 개의 div가 더 있습니다. 따라서 볼 수 있듯이 dom은 정말 빠르게 커집니다.

48
00:04:28,500 --> 00:04:34,730
수백 가지의 서로 다른 속성과 메서드, 다양한 노드와 중첩 된 개체의 전체적인 구조가 있습니다.

49
00:04:34,890 --> 00:04:36,250
그것은 너무 많은 것들입니다.

50
00:04:36,270 --> 00:04:42,060
제가이 수업의 시작 부분에서 언급 한 그 시대 중 하나입니다. 여기서 모든 것을 알지 못하는 것이 편안해야합니다.

51
00:04:42,420 --> 00:04:46,450
이제 대부분의 개발자는 여기에서 속성의 절반을 알지 못한다고 말할 수 있습니다.

52
00:04:46,500 --> 00:04:49,200
나는 그들이 약 10 % 정도를 가지고 일한다고 말한다.

53
00:04:49,200 --> 00:04:52,630
우리가 거의 사용할 필요가없는 것들이 많이 있습니다.

54
00:04:52,680 --> 00:04:57,280
언젠가 언젠가 뭔가가 생겨 나서 우리는 전에 한 번도 해보지 않은 것을해야합니다.

55
00:04:57,330 --> 00:05:03,690
우리는 그것을 google 해 놓았습니다. 그래서 우리는 알 수없는 변화 속성이 무엇인지 알았습니다.

56
00:05:03,750 --> 00:05:04,560
나는 전혀 몰랐다.

57
00:05:04,680 --> 00:05:06,500
그리고 그것은 개발자가되는 것이 정말입니다.

58
00:05:06,510 --> 00:05:14,380
지금까지 자바 스크립트로 우리는 변수에 대해 배울 함수와 객체에 대해 배울 수있는 작은 통제 된 세상에서 조금만 노력해 왔습니다.

59
00:05:14,610 --> 00:05:21,440
그리고 일을하는 방법에는 제한이 없으며 DOM에 대해 알아야 할 매우 구체적인 지식 집합이 있습니다.

60
00:05:21,450 --> 00:05:25,500
이제 우리는이 거대한 생태계가 너무 많은 재산에서 일할 수있게되었습니다.

61
00:05:25,620 --> 00:05:28,020
그래서 저는 여기에 너무 많은 것을 반복해서 말하고 싶습니다.

62
00:05:28,170 --> 00:05:32,100
우리는 중요한 부분에 초점을 맞추 겠지만 목표는 암기하는 것이 아닙니다.

63
00:05:32,130 --> 00:05:34,780
목표는 모든 단일 속성을 습득하지 않는 것입니다.

64
00:05:34,920 --> 00:05:39,560
다시 한 번 유능한 웹 개발자가되기 위해 필요한 모든 것이 10 %입니다.

65
00:05:40,000 --> 00:05:43,080
좋아, 돌아 가자. 나는이 한 번 더 나아가고 싶다.

66
00:05:43,080 --> 00:05:44,450
우리가 이야기 한 것을 요약 해주십시오.

67
00:05:44,700 --> 00:05:48,030
그래서 DOM은 문서 객체 모델을 의미합니다.

68
00:05:48,150 --> 00:05:52,150
그것은 당신의 자바 스크립트와 당신의 H.M.S 사이의 인터페이스입니다.

69
00:05:52,280 --> 00:05:55,180
우리가 자바 스크립트를 사용하여 상호 작용할 수있는 방법입니다.

70
00:05:55,260 --> 00:06:19,110
우리가 페이지에 새 요소를 추가하거나 링크의 ref 속성을 변경하거나 우리 몸의 배경 이미지를 변경하거나 양식에서 값을 얻는 방법 또는 사용자 정의 유효성 검사와 애니메이션 및 대화 형 작업을 수행하는 방법입니다 어떤 코드를 클릭하는 요소는 문서 개체 모델이 자바 스크립트를 HMS와 연결한다는 사실에서 비롯된 모든 다른 가능성을 모두 실행합니다 접속하다 .

71
00:06:19,260 --> 00:06:27,470
그래서 문서 객체 모델의 객체 모델 부분은 H.T.에서 모델링 요소 인 자바 스크립트 객체의 묶음임을 알려줍니다. 양.

72
00:06:27,870 --> 00:06:32,980
여기에 ATAC가 있습니다. 여기에 atec을 나타내는 객체가 있습니다.

73
00:06:33,180 --> 00:06:37,770
그리고 나서 우리는이 H1 태그를 나타내는 또 다른 객체로 끝납니다.

74
00:06:37,980 --> 00:06:43,740
마지막으로 문서 객체 모델이라고 부르는 이유는 모든 것이 문서라는 하나의 객체 안에 있기 때문입니다.

75
00:06:43,830 --> 00:06:46,850
그것은 그 밖의 모든 것이 사는 루트 노드입니다.

76
00:06:47,070 --> 00:06:49,030
다음 비디오에서는 코드를 작성하기 시작합니다.