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

2
00:00:02,000 --> 00:00:04,000
[토미 MacWilliams] [하버드 대학]

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
브라우저가 웹 페이지를 다운로드 할 때, 어떻게 든 메모리에 표현해야합니다.

6
00:00:14,000 --> 00:00:17,000
문서 개체 모델 또는 DOM,

7
00:00:17,000 --> 00:00:20,000
브라우저가 메모리에 웹 페이지를 나타내는 방법에 대해 설명합니다.

8
00:00:20,000 --> 00:00:24,000
이 비디오에서는, 우리는 자바 스크립트의 컨텍스트에서 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 자주 자바 스크립트가 사용됩니다

12
00:00:32,000 --> 00:00:36,000
자바 스크립트는 우리가 즉석에서 웹 페이지의 내용을 변경할 수 있기 때문에하는 것은,

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
이 본문 요소는 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
이제 우리는 그 몸이 자신의 두 아이가 볼 수 있습니다

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
본문 요소에, 그럼 그렇게하자.

31
00:01:36,000 --> 00:01:40,000
우리는 H1 및 UL이 있습니다.

32
00:01:40,000 --> 00:01:43,000
마지막으로, UL 요소는 더 많은 아이들이

33
00:01:43,000 --> 00:01:50,000
그리고 이것은 우리의 DOM 트리를 완료되므로, 리튬, 리튬, 리튬 추가하자.

34
00:01:50,000 --> 00:01:56,000
이것은 우리의 DOM 트리를 완료하고,이 브라우저가 웹 페이지를 저장하는 방법이다.

35
00:01:56,000 --> 00:02:02,000
이제 우리가 자바 스크립트를 사용하여이 트리를 탐색하는 방법을 살펴 보자.

36
00:02:02,000 --> 00:02:10,000
우리는 문서라는 특별한 자바 스크립트 변수를 사용하여이 트리에 액세스 할 수 있습니다.

37
00:02:10,000 --> 00:02:13,000
본 문서 객체의 하나의 속성

38
00:02:13,000 --> 00:02:16,000
Body 속성이며,이 개체를 나타냅니다

39
00:02:16,000 --> 00:02:19,000
우리의 예제 웹 페이지의 body 요소.

40
00:02:19,000 --> 00:02:23,000
우리는 본문 요소의 모든 자식을 취득하려는 경우

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]와 그것으로 인덱스가 배열의 두 번째 요소를 얻으려면 할 수 있습니다.

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
본문 요소가 될 것입니다.

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 리 태그이었다.

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
이 함수는 하나의 인수를

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
우리는 클래스 바의 모든 요소를​​ 다시받을거야.

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]