1
00:00:00,921 --> 00:00:06,523
지금까지는 페이지 상에
존재하는 요소들을 수정해봤어요

2
00:00:06,523 --> 00:00:09,909
만약 페이지에
새로운 요소를 넣고 싶다면요?

3
00:00:09,909 --> 00:00:12,985
'innerHTML'로
할 수 있어요

4
00:00:12,985 --> 00:00:18,926
여기서 한 것 처럼
태그 안에 문자열을 쓰는거에요

5
00:00:18,926 --> 00:00:21,068
약간 지저분해
질수도 있어요

6
00:00:21,068 --> 00:00:25,540
특히 태그들이 서로 다른 속성과
스타일과 클래스를 가진다면요

7
00:00:25,540 --> 00:00:31,097
그래서 대신에
굉장히 예쁜 방식을 쓸 거에요

8
00:00:31,097 --> 00:00:35,393
처음부터 요소를 만들어서
페이지에 넣을 거에요

9
00:00:35,393 --> 00:00:40,685
페이지에 고양이 그림을
넣고 싶다고 해봐요

10
00:00:40,685 --> 00:00:44,018
왜냐하면
좀 더 필요할 것 같으니까요

11
00:00:44,018 --> 00:00:48,620
첫번째 단계는
''요소를 만드는 거에요

12
00:00:48,620 --> 00:00:50,786
저걸 만들고
싶어요

13
00:00:50,786 --> 00:00:54,520
그럼 이 요소를 넣을
변수를 만들어요

14
00:00:54,520 --> 00:00:55,980
'catEl'

15
00:00:55,980 --> 00:01:00,935
그 다음에는 이걸 쓸거에요
'document.createElement'

16
00:01:00,935 --> 00:01:03,615
그리고 우리가 만드는
태그의 이름을 넣어요

17
00:01:03,615 --> 00:01:06,615
'img'

18
00:01:06,615 --> 00:01:12,065
이제 브라우저가 이미지 태그를
만들었다고 할 수 있죠

19
00:01:12,065 --> 00:01:15,069
여기 어딘가
돌아다니고 있을거에요

20
00:01:15,069 --> 00:01:19,111
다음 단계는
경로를 추가하는 거에요

21
00:01:19,111 --> 00:01:23,308
그러니까
'catEl.src ='

22
00:01:23,308 --> 00:01:29,376
그리고 여기서
경로를 가져와서

23
00:01:29,376 --> 00:01:34,764
'alt'를 추가해야해요
좀 더 접근이 용이하게요

24
00:01:34,764 --> 00:01:42,081
지금까지 하진 않았지만
'alt'태그를 추가해줘야해요

25
00:01:42,081 --> 00:01:47,178
이제 우리가 만든
태그에 'src'가 있고

26
00:01:47,178 --> 00:01:58,144
"Photo of cute cat"
이라는 'alt'도 있어요

27
00:01:58,144 --> 00:02:04,928
좋아요 이게 지금까지
자바스크립트로 만든 거에요

28
00:02:04,928 --> 00:02:08,983
우리가 만든 ''태그는
아직 어딘가 돌아다니고 있어요

29
00:02:08,983 --> 00:02:11,764
왜냐하면 브라우저에게 이걸
어디 놓을지 지정하지 않았으니까요

30
00:02:11,764 --> 00:02:15,832
그리고 DOM에는 이걸
넣을 수 있는 곳들이 아주 많아요

31
00:02:15,832 --> 00:02:18,342
가장 쉬운
방법으로 해보죠

32
00:02:18,342 --> 00:02:21,342
페이지 하단에
보이게 하는거에요

33
00:02:21,342 --> 00:02:26,304
이건 태그의
뒤에 붙여주면 될거에요

34
00:02:26,304 --> 00:02:29,860
그러니까
'document.body.appendChild(catEl);'

35
00:02:29,860 --> 00:02:31,197
하하
저기 있네요!

36
00:02:31,197 --> 00:02:32,711
게다가
꽤 크기까지 해요

37
00:02:32,711 --> 00:02:34,979
정말 큰 고양이네요
무서워라

38
00:02:34,979 --> 00:02:41,198
여러분은 'appendChild'를
아무 DOM에다가 붙일 수 있어요

39
00:02:41,198 --> 00:02:47,337
그럼 그 DOM의
마지막에 이 요소를 붙일 거에요

40
00:02:47,337 --> 00:02:52,115
이걸 보면 DOM을
트리 형태로 생각할 수 있어요

41
00:02:52,115 --> 00:02:57,873
태그가
트리의 노드이고

42
00:02:57,873 --> 00:03:00,076
거기에 여러 자식 노드가 있어요
이나 처럼요

43
00:03:00,076 --> 00:03:04,395
여러분은 이 자식 노드 다음에
다른 자식 노드를 더하는 거에요

44
00:03:04,395 --> 00:03:09,074
그러니까 그건 여기있는
태그 다음에 올 거에요

45
00:03:09,074 --> 00:03:11,950
DOM방식을 사용하면
이론적으로는

46
00:03:11,950 --> 00:03:15,531
DOM트리 안의 어디든
요소들을 붙일 수 있어요

47
00:03:15,531 --> 00:03:19,447
우리는 가장 쉽고
가장 뻔한 곳에 넣었어요

48
00:03:19,447 --> 00:03:22,016
좋아요
하나 더 해봐요

49
00:03:22,016 --> 00:03:28,283
여기에는 'innerHTML'을 써서
안에 태그를 썼어요

50
00:03:28,283 --> 00:03:31,443
대신에
'createElement'를 쓸 수 있어요

51
00:03:31,443 --> 00:03:39,623
그러니까 'var strongEl =
document.createElement("strong");'

52
00:03:39,623 --> 00:03:43,824
철자가 틀렸는데
철자는 매우 중요해요

53
00:03:43,824 --> 00:03:48,663
비어있는 태그를
어딘가 떠다니게 만들었어요

54
00:03:48,663 --> 00:03:51,879
첫번째로 할 것은
텍스트를 지정하는 거에요

55
00:03:51,879 --> 00:03:56,573
그러니까
'strongEl.textContent = "cat";'

56
00:03:56,573 --> 00:03:57,746
그렇죠?

57
00:03:57,746 --> 00:04:01,816
대신에 우리는
다른 걸로도 할 수 있어요

58
00:04:01,816 --> 00:04:04,581
'textNode'라는 걸
만들어서 말이죠

59
00:04:04,581 --> 00:04:08,504
DOM트리의 여러 DOM노드는
특별한 노드를 가질 수 있어요

60
00:04:08,504 --> 00:04:10,726
'textNode'를
그들의 자식으로 말이죠

61
00:04:10,726 --> 00:04:14,998
이 노드들은 요소는 아니지만
DOM트리의 노드에요

62
00:04:14,998 --> 00:04:16,501
이걸 '잎 노드'라고
불러요

63
00:04:16,501 --> 00:04:20,088
왜냐하면 트리의
마지막에 오는 노드니까요

64
00:04:20,088 --> 00:04:27,548
그러니까 'var stongText =
document.createTextNode('

65
00:04:27,548 --> 00:04:31,816
여기다 텍스트를 넣을게요
"cat"

66
00:04:31,816 --> 00:04:33,736
이 방법을
쓰게 된다면

67
00:04:33,736 --> 00:04:39,749
이제 돌아다니는
두 개의 노드를 만든 거에요

68
00:04:39,749 --> 00:04:41,937
 태그와


69
00:04:41,937 --> 00:04:46,860
"cat"을 담은
'textNode'죠

70
00:04:46,860 --> 00:04:50,110
이걸 서로
연결시켜줘야 해요

71
00:04:50,110 --> 00:04:55,102
이
"cat"의 부모가 돼야해요

72
00:04:55,102 --> 00:05:01,504
그러면 이렇게
'strongEl.appendChild(strongText);'

73
00:05:03,389 --> 00:05:10,445
좋아요 이제
안에 "cat"이 있어요

74
00:05:12,512 --> 00:05:17,852
이걸 원하는 곳에 넣어야해요
아직 떠다니고 있으니까요

75
00:05:17,852 --> 00:05:22,286
우리는 'nameEls'의
'for'문안에 있고

76
00:05:23,186 --> 00:05:27,073
각 'nameEl'에다가
태그를 붙이고 싶어요

77
00:05:27,073 --> 00:05:34,565
그럼 여기
'nameEls[i].appendChild(strongEl);'

78
00:05:36,219 --> 00:05:42,742
이제 두 개를 볼 수 있네요
저번 것이 아직 있기 때문이죠

79
00:05:42,742 --> 00:05:47,410
그러니까 태그에
이 있는데 또 붙어있어요

80
00:05:47,410 --> 00:05:52,496
이 부분은 'innerHTML'에
빈 문자열을 넣으면 돼요

81
00:05:52,496 --> 00:05:56,320
이게 붙은 안을
지워줄거에요

82
00:05:57,938 --> 00:06:03,459
지금 봤듯이 이건 'innerHTML'보다
훨씬 더 많은 코드를 써야해요

83
00:06:05,105 --> 00:06:07,397
그러면
왜 이렇게 하는 걸까요?

84
00:06:07,397 --> 00:06:10,783
많은 개발자들은 이런 방식으로
수정하는 걸 좋아하지 않아요

85
00:06:10,783 --> 00:06:13,794
왜냐하면 코드를
더 많이 써야하니까요

86
00:06:13,794 --> 00:06:17,026
보통 개발자들은
jQuery같은 라이브러리를 써요

87
00:06:17,026 --> 00:06:19,656
그들이 DOM을
수정할 때요

88
00:06:19,656 --> 00:06:26,800
개발자로서는 코드를 덜 쓰고도
같은 기능을 만들 수 있게 돼요

89
00:06:26,800 --> 00:06:29,780
왜냐하면 대신에
라이브러리 함수를 쓰니까요

90
00:06:29,780 --> 00:06:32,446
저는 이런 식으로
코드를 쓰는 걸 좋아해요

91
00:06:32,446 --> 00:06:36,226
어떻게 DOM트리를
수정하는지 볼 수 있으니까요

92
00:06:36,226 --> 00:06:38,276
한번에
하나씩 말이죠

93
00:06:38,276 --> 00:06:39,913
그리고
더 깔끔해 보여요

94
00:06:39,913 --> 00:06:43,043
innerHTML안에 문자열로
다 집어넣는 것보다 말이죠

95
00:06:43,043 --> 00:06:44,772
하지만 여러분은
싫어할 수도 있어요

96
00:06:44,772 --> 00:06:47,188
어떤 방법으로든 이제 여러분은
이런 게 있다는 걸 알아요

97
00:06:47,188 --> 00:06:49,529
만약 여러분이 필요하다면
사용할 수 있고

98
00:06:49,529 --> 00:06:54,664
jQuery같은 라이브러리가
뒤에서 뭘 하는지 알 수 있어요