요소를 처음부터 만들어보기 (비디오 버전)

지금까지는 페이지 상에
존재하는 요소들을 수정해봤어요

만약 페이지에
새로운 요소를 넣고 싶다면요?

'innerHTML'로
할 수 있어요

여기서 한 것 처럼
태그 안에 문자열을 쓰는거에요

약간 지저분해
질수도 있어요

특히 태그들이 서로 다른 속성과
스타일과 클래스를 가진다면요

그래서 대신에
굉장히 예쁜 방식을 쓸 거에요

처음부터 요소를 만들어서
페이지에 넣을 거에요

페이지에 고양이 그림을
넣고 싶다고 해봐요

왜냐하면
좀 더 필요할 것 같으니까요

첫번째 단계는
''요소를 만드는 거에요

저걸 만들고
싶어요

그럼 이 요소를 넣을
변수를 만들어요

'catEl'

그 다음에는 이걸 쓸거에요
'document.createElement'

그리고 우리가 만드는
태그의 이름을 넣어요

'img'

이제 브라우저가 이미지 태그를
만들었다고 할 수 있죠

여기 어딘가
돌아다니고 있을거에요

다음 단계는
경로를 추가하는 거에요

그러니까
'catEl.src ='

그리고 여기서
경로를 가져와서

'alt'를 추가해야해요
좀 더 접근이 용이하게요

지금까지 하진 않았지만
'alt'태그를 추가해줘야해요

이제 우리가 만든
태그에 'src'가 있고

"Photo of cute cat"
이라는 'alt'도 있어요

좋아요 이게 지금까지
자바스크립트로 만든 거에요

우리가 만든 ''태그는
아직 어딘가 돌아다니고 있어요

왜냐하면 브라우저에게 이걸
어디 놓을지 지정하지 않았으니까요

그리고 DOM에는 이걸
넣을 수 있는 곳들이 아주 많아요

가장 쉬운
방법으로 해보죠

페이지 하단에
보이게 하는거에요

이건 태그의
뒤에 붙여주면 될거에요

그러니까
'document.body.appendChild(catEl);'

하하
저기 있네요!

게다가
꽤 크기까지 해요

정말 큰 고양이네요
무서워라

여러분은 'appendChild'를
아무 DOM에다가 붙일 수 있어요

그럼 그 DOM의
마지막에 이 요소를 붙일 거에요

이걸 보면 DOM을
트리 형태로 생각할 수 있어요

태그가
트리의 노드이고

거기에 여러 자식 노드가 있어요
이나 처럼요

여러분은 이 자식 노드 다음에
다른 자식 노드를 더하는 거에요

그러니까 그건 여기있는
태그 다음에 올 거에요

DOM방식을 사용하면
이론적으로는

DOM트리 안의 어디든
요소들을 붙일 수 있어요

우리는 가장 쉽고
가장 뻔한 곳에 넣었어요

좋아요
하나 더 해봐요

여기에는 'innerHTML'을 써서
안에 태그를 썼어요

대신에
'createElement'를 쓸 수 있어요

그러니까 'var strongEl =
document.createElement("strong");'

철자가 틀렸는데
철자는 매우 중요해요

비어있는 태그를
어딘가 떠다니게 만들었어요

첫번째로 할 것은
텍스트를 지정하는 거에요

그러니까
'strongEl.textContent = "cat";'

그렇죠?

대신에 우리는
다른 걸로도 할 수 있어요

'textNode'라는 걸
만들어서 말이죠

DOM트리의 여러 DOM노드는
특별한 노드를 가질 수 있어요

'textNode'를
그들의 자식으로 말이죠

이 노드들은 요소는 아니지만
DOM트리의 노드에요

이걸 '잎 노드'라고
불러요

왜냐하면 트리의
마지막에 오는 노드니까요

그러니까 'var stongText =
document.createTextNode('

여기다 텍스트를 넣을게요
"cat"

이 방법을
쓰게 된다면

이제 돌아다니는
두 개의 노드를 만든 거에요

태그와

"cat"을 담은
'textNode'죠

이걸 서로
연결시켜줘야 해요

이
"cat"의 부모가 돼야해요

그러면 이렇게
'strongEl.appendChild(strongText);'

좋아요 이제
안에 "cat"이 있어요

이걸 원하는 곳에 넣어야해요
아직 떠다니고 있으니까요

우리는 'nameEls'의
'for'문안에 있고

각 'nameEl'에다가
태그를 붙이고 싶어요

그럼 여기
'nameEls[i].appendChild(strongEl);'

이제 두 개를 볼 수 있네요
저번 것이 아직 있기 때문이죠

그러니까 태그에
이 있는데 또 붙어있어요

이 부분은 'innerHTML'에
빈 문자열을 넣으면 돼요

이게 붙은 안을
지워줄거에요

지금 봤듯이 이건 'innerHTML'보다
훨씬 더 많은 코드를 써야해요

그러면
왜 이렇게 하는 걸까요?

많은 개발자들은 이런 방식으로
수정하는 걸 좋아하지 않아요

왜냐하면 코드를
더 많이 써야하니까요

보통 개발자들은
jQuery같은 라이브러리를 써요

그들이 DOM을
수정할 때요

개발자로서는 코드를 덜 쓰고도
같은 기능을 만들 수 있게 돼요

왜냐하면 대신에
라이브러리 함수를 쓰니까요

저는 이런 식으로
코드를 쓰는 걸 좋아해요

어떻게 DOM트리를
수정하는지 볼 수 있으니까요

한번에
하나씩 말이죠

그리고
더 깔끔해 보여요

innerHTML안에 문자열로
다 집어넣는 것보다 말이죠

하지만 여러분은
싫어할 수도 있어요

어떤 방법으로든 이제 여러분은
이런 게 있다는 걸 알아요

만약 여러분이 필요하다면
사용할 수 있고

jQuery같은 라이브러리가
뒤에서 뭘 하는지 알 수 있어요