WEBVTT

00:00:00.921 --> 00:00:06.523
지금까지는 페이지 상에
존재하는 요소들을 수정해봤어요

00:00:06.523 --> 00:00:09.909
만약 페이지에
새로운 요소를 넣고 싶다면요?

00:00:09.909 --> 00:00:12.985
'innerHTML'로
할 수 있어요

00:00:12.985 --> 00:00:18.926
여기서 한 것 처럼
태그 안에 문자열을 쓰는거에요

00:00:18.926 --> 00:00:21.068
약간 지저분해
질수도 있어요

00:00:21.068 --> 00:00:25.540
특히 태그들이 서로 다른 속성과
스타일과 클래스를 가진다면요

00:00:25.540 --> 00:00:31.097
그래서 대신에
굉장히 예쁜 방식을 쓸 거에요

00:00:31.097 --> 00:00:35.393
처음부터 요소를 만들어서
페이지에 넣을 거에요

00:00:35.393 --> 00:00:40.685
페이지에 고양이 그림을
넣고 싶다고 해봐요

00:00:40.685 --> 00:00:44.018
왜냐하면
좀 더 필요할 것 같으니까요

00:00:44.018 --> 00:00:48.620
첫번째 단계는
''요소를 만드는 거에요

00:00:48.620 --> 00:00:50.786
저걸 만들고
싶어요

00:00:50.786 --> 00:00:54.520
그럼 이 요소를 넣을
변수를 만들어요

00:00:54.520 --> 00:00:55.980
'catEl'

00:00:55.980 --> 00:01:00.935
그 다음에는 이걸 쓸거에요
'document.createElement'

00:01:00.935 --> 00:01:03.615
그리고 우리가 만드는
태그의 이름을 넣어요

00:01:03.615 --> 00:01:06.615
'img'

00:01:06.615 --> 00:01:12.065
이제 브라우저가 이미지 태그를
만들었다고 할 수 있죠

00:01:12.065 --> 00:01:15.069
여기 어딘가
돌아다니고 있을거에요

00:01:15.069 --> 00:01:19.111
다음 단계는
경로를 추가하는 거에요

00:01:19.111 --> 00:01:23.308
그러니까
'catEl.src ='

00:01:23.308 --> 00:01:29.376
그리고 여기서
경로를 가져와서

00:01:29.376 --> 00:01:34.764
'alt'를 추가해야해요
좀 더 접근이 용이하게요

00:01:34.764 --> 00:01:42.081
지금까지 하진 않았지만
'alt'태그를 추가해줘야해요

00:01:42.081 --> 00:01:47.178
이제 우리가 만든
태그에 'src'가 있고

00:01:47.178 --> 00:01:58.144
"Photo of cute cat"
이라는 'alt'도 있어요

00:01:58.144 --> 00:02:04.928
좋아요 이게 지금까지
자바스크립트로 만든 거에요

00:02:04.928 --> 00:02:08.983
우리가 만든 ''태그는
아직 어딘가 돌아다니고 있어요

00:02:08.983 --> 00:02:11.764
왜냐하면 브라우저에게 이걸
어디 놓을지 지정하지 않았으니까요

00:02:11.764 --> 00:02:15.832
그리고 DOM에는 이걸
넣을 수 있는 곳들이 아주 많아요

00:02:15.832 --> 00:02:18.342
가장 쉬운
방법으로 해보죠

00:02:18.342 --> 00:02:21.342
페이지 하단에
보이게 하는거에요

00:02:21.342 --> 00:02:26.304
이건 태그의
뒤에 붙여주면 될거에요

00:02:26.304 --> 00:02:29.860
그러니까
'document.body.appendChild(catEl);'

00:02:29.860 --> 00:02:31.197
하하
저기 있네요!

00:02:31.197 --> 00:02:32.711
게다가
꽤 크기까지 해요

00:02:32.711 --> 00:02:34.979
정말 큰 고양이네요
무서워라

00:02:34.979 --> 00:02:41.198
여러분은 'appendChild'를
아무 DOM에다가 붙일 수 있어요

00:02:41.198 --> 00:02:47.337
그럼 그 DOM의
마지막에 이 요소를 붙일 거에요

00:02:47.337 --> 00:02:52.115
이걸 보면 DOM을
트리 형태로 생각할 수 있어요

00:02:52.115 --> 00:02:57.873
태그가
트리의 노드이고

00:02:57.873 --> 00:03:00.076
거기에 여러 자식 노드가 있어요
이나 처럼요

00:03:00.076 --> 00:03:04.395
여러분은 이 자식 노드 다음에
다른 자식 노드를 더하는 거에요

00:03:04.395 --> 00:03:09.074
그러니까 그건 여기있는
태그 다음에 올 거에요

00:03:09.074 --> 00:03:11.950
DOM방식을 사용하면
이론적으로는

00:03:11.950 --> 00:03:15.531
DOM트리 안의 어디든
요소들을 붙일 수 있어요

00:03:15.531 --> 00:03:19.447
우리는 가장 쉽고
가장 뻔한 곳에 넣었어요

00:03:19.447 --> 00:03:22.016
좋아요
하나 더 해봐요

00:03:22.016 --> 00:03:28.283
여기에는 'innerHTML'을 써서
안에 태그를 썼어요

00:03:28.283 --> 00:03:31.443
대신에
'createElement'를 쓸 수 있어요

00:03:31.443 --> 00:03:39.623
그러니까 'var strongEl =
document.createElement("strong");'

00:03:39.623 --> 00:03:43.824
철자가 틀렸는데
철자는 매우 중요해요

00:03:43.824 --> 00:03:48.663
비어있는 태그를
어딘가 떠다니게 만들었어요

00:03:48.663 --> 00:03:51.879
첫번째로 할 것은
텍스트를 지정하는 거에요

00:03:51.879 --> 00:03:56.573
그러니까
'strongEl.textContent = "cat";'

00:03:56.573 --> 00:03:57.746
그렇죠?

00:03:57.746 --> 00:04:01.816
대신에 우리는
다른 걸로도 할 수 있어요

00:04:01.816 --> 00:04:04.581
'textNode'라는 걸
만들어서 말이죠

00:04:04.581 --> 00:04:08.504
DOM트리의 여러 DOM노드는
특별한 노드를 가질 수 있어요

00:04:08.504 --> 00:04:10.726
'textNode'를
그들의 자식으로 말이죠

00:04:10.726 --> 00:04:14.998
이 노드들은 요소는 아니지만
DOM트리의 노드에요

00:04:14.998 --> 00:04:16.501
이걸 '잎 노드'라고
불러요

00:04:16.501 --> 00:04:20.088
왜냐하면 트리의
마지막에 오는 노드니까요

00:04:20.088 --> 00:04:27.548
그러니까 'var stongText =
document.createTextNode('

00:04:27.548 --> 00:04:31.816
여기다 텍스트를 넣을게요
"cat"

00:04:31.816 --> 00:04:33.736
이 방법을
쓰게 된다면

00:04:33.736 --> 00:04:39.749
이제 돌아다니는
두 개의 노드를 만든 거에요

00:04:39.749 --> 00:04:41.937
 태그와


00:04:41.937 --> 00:04:46.860
"cat"을 담은
'textNode'죠

00:04:46.860 --> 00:04:50.110
이걸 서로
연결시켜줘야 해요

00:04:50.110 --> 00:04:55.102
이
"cat"의 부모가 돼야해요

00:04:55.102 --> 00:05:01.504
그러면 이렇게
'strongEl.appendChild(strongText);'

00:05:03.389 --> 00:05:10.445
좋아요 이제
안에 "cat"이 있어요

00:05:12.512 --> 00:05:17.852
이걸 원하는 곳에 넣어야해요
아직 떠다니고 있으니까요

00:05:17.852 --> 00:05:22.286
우리는 'nameEls'의
'for'문안에 있고

00:05:23.186 --> 00:05:27.073
각 'nameEl'에다가
태그를 붙이고 싶어요

00:05:27.073 --> 00:05:34.565
그럼 여기
'nameEls[i].appendChild(strongEl);'

00:05:36.219 --> 00:05:42.742
이제 두 개를 볼 수 있네요
저번 것이 아직 있기 때문이죠

00:05:42.742 --> 00:05:47.410
그러니까 태그에
이 있는데 또 붙어있어요

00:05:47.410 --> 00:05:52.496
이 부분은 'innerHTML'에
빈 문자열을 넣으면 돼요

00:05:52.496 --> 00:05:56.320
이게 붙은 안을
지워줄거에요

00:05:57.938 --> 00:06:03.459
지금 봤듯이 이건 'innerHTML'보다
훨씬 더 많은 코드를 써야해요

00:06:05.105 --> 00:06:07.397
그러면
왜 이렇게 하는 걸까요?

00:06:07.397 --> 00:06:10.783
많은 개발자들은 이런 방식으로
수정하는 걸 좋아하지 않아요

00:06:10.783 --> 00:06:13.794
왜냐하면 코드를
더 많이 써야하니까요

00:06:13.794 --> 00:06:17.026
보통 개발자들은
jQuery같은 라이브러리를 써요

00:06:17.026 --> 00:06:19.656
그들이 DOM을
수정할 때요

00:06:19.656 --> 00:06:26.800
개발자로서는 코드를 덜 쓰고도
같은 기능을 만들 수 있게 돼요

00:06:26.800 --> 00:06:29.780
왜냐하면 대신에
라이브러리 함수를 쓰니까요

00:06:29.780 --> 00:06:32.446
저는 이런 식으로
코드를 쓰는 걸 좋아해요

00:06:32.446 --> 00:06:36.226
어떻게 DOM트리를
수정하는지 볼 수 있으니까요

00:06:36.226 --> 00:06:38.276
한번에
하나씩 말이죠

00:06:38.276 --> 00:06:39.913
그리고
더 깔끔해 보여요

00:06:39.913 --> 00:06:43.043
innerHTML안에 문자열로
다 집어넣는 것보다 말이죠

00:06:43.043 --> 00:06:44.772
하지만 여러분은
싫어할 수도 있어요

00:06:44.772 --> 00:06:47.188
어떤 방법으로든 이제 여러분은
이런 게 있다는 걸 알아요

00:06:47.188 --> 00:06:49.529
만약 여러분이 필요하다면
사용할 수 있고

00:06:49.529 --> 00:06:54.664
jQuery같은 라이브러리가
뒤에서 뭘 하는지 알 수 있어요