document 객체에는 많은 속성과 메서드가 존재합니다.
지금 집중할 부분은 CRUD(Create, Read, Update and Delete) 입니다.
(CRUD를 이해한 다음에는 다양한 trivia를 알아야 합니다.)
이 챕터에서는 document 객체를 통해서 HTML 엘리먼트를 만들고(CREATE), 조회하고(READ), 갱신하고(UPDATE), 삭제하는(DELETE) 하는 방법을 학습합니다.
DOM에는 HTML에 적용(APPEND)하는 메서드가 따로 있으니 주의하세요!
CREATE - createElement
해당 문서는 DOM으로 HTML을 조작하는 방법 중 가장 기초적인, 새로운 element를 만드는 방법을 안내합니다.
아래 codesandbox의 console 탭에서 예시 코드를 입력하여 document 객체의 createElement 메서드를 이용하여 div element를 만듭니다.
자바스크립트에서 어떤 작업의 결과를 담으려면 어떻게 해야 할까요? 변수를 선언하고 어떤 작업의 결과를 변수에 할당합니다.
여기서는 div element를 변수 tweetDiv 에 할당합니다.
화면에 어떤 변화도 나타나지 않습니다. 제가 무엇을 놓쳤나요?
위 그림처럼 공중에 떠있는 엘리먼트를 확인하기 위해서는 APPEND 해야 합니다. APPEND 를 이용해 실제 웹 페이지 상에도 보이는 것을 확인할 수 있습니다. 이어지는 콘텐츠 APPEND에서, tweetDiv 를 트리 구조에 연결합니다.
APPEND - append, appendChild
- const tweetDiv = document.createElement('div')
CREATE에서 만든 tweetDiv 라는 변수는 아직 "공중부양"을 하고 있습니다.
이번 콘텐츠에서는 append 라는 메서드를 사용해서, 변수 tweetDiv 를 body 에 넣어보겠습니다.
- document.body.append(tweetDiv)
[코드] 변수 tweetDiv에 담긴 새로운 div 엘리먼트를 body 엘리먼트에 append 합니다.
아무것도 보이지 않는데, 잘못 입력한 건가요?
아니요. 잘 적용된 겁니다.
새롭게 생성한 div 엘리먼트에 아무런 내용을 입력하지 않아서 보이는 내용이 없을 뿐입니다. 크롬의 개발자 도구 Elements 탭에서 내용을 확인하세요.
내용은 어떻게 넣나요?
다음 콘텐츠인 UPDATE에서 좀 더 자세히 설명합니다. 이번 콘텐츠에서는 textContent 라는 메서드를 활용하면 문자열을 입력할 수 있습니다.
다른 트윗처럼 이쁘게 container 안에 넣을 순 없나요?
생성한 tweetDiv 를 container 에 넣기 위해서는, container 를 먼저 찾아야 합니다. 어떻게 container 를 찾을 수 있을까요? 위에서 언급했던 DOM 트리를 순회해서 찾을 수 있습니다. 그러나 보다 더 편리한 방법이 있으니 검색해 보시기 바랍니다.
READ - querySelector, querySelectorAll
. DOM으로 HTML 엘리먼트의 정보를 조회하기 위해서는 querySelector의 첫 번째 인자로 셀렉터(Selector)를 전달하여 확인할 수 있습니다.
셀렉터로는 HTML 태그("div"), id("#tweetList"), class(.tweet) 세 가지가 가장 많이 사용됩니다.
참고로 querySelector는 셀렉터를 조회한다는 의미를 가지고 있습니다.
query의 의미가 "질문하다"라는 것을 알고 있다면 역할을 쉽게 유추하실 수 있습니다. 이 query라는 단어는 개발자 간에 "ㅇㅇㅇ를 조회한다"라는 의미를 "쿼리를 날리다"라는 jargon(특정 영역에서만 사용되는 단어)로 굳어졌기 때문에 알고 있어야 합니다
const oneTweet = document.querySelector('.tweet')
[코드] querySelector로 클래스 이름이 tweet인 HTML 엘리먼트를 조회합니다.
const getOneTweet = document.getElementById('container')
const queryOneTweet = document.querySelector('#container')
console.log(getOneTweet === queryOneTweet) // true
[코드] getElementById와 querySelector로 각각 받아 온 container 요소는 하나의 요소입니다.
querySelector와 querySelectorAll 만 알아도 대부분의 엘리먼트를 조회할 수 있습니다.
다만, 여러분이 어떤 회사에 개발자로 입사한 다음, 아래와 같이 get으로 시작하는 DOM 조회 메서드를 볼 수도 있습니다.
이런 메서드는 querySelector 와 비슷한 역할을 하는 오래된 방식이라고만 이해하면 됩니다.
만약 이전 버전의 브라우저(인터넷 익스플로러) 호환성을 신경 써야 한다면, 이런 옛날 방식을 사용해야 할 수도 있습니다. 실제 동작은 동일하니 이런 메서드가 있다는 것 정도는 알아두세요.
CREATE에서 생성한 div 엘리먼트를 container에 넣을 준비를 마쳤습니다.
다음 코드를 입력하면, container의 맨 마지막 자식 엘리먼트로 tweetDiv를 추가합니다.
const container = document.querySelector('#container')
const tweetDiv = document.createElement('div')
container.append(tweetDiv)
새롭게 추가된 tweetDiv 는 별도의 class 가 지정되어 있지 않아, CSS를 이용한 스타일링이 적용되지 않습니다.
이어지는 콘텐츠에서는, 새롭게 생성한 tweetDiv 에 class 를 붙여 스타일링을 적용합니다.
UPDATE - textContent, classList.add
앞선 콘텐츠 CREATE, APPEND, READ를 통해 새로운 DOM 객체를 만들고, 기존의 DOM 객체에 붙이고, DOM 객체를 선택해서 조회하는 방법을 학습했습니다.
이번 콘텐츠 UPDATE에서는 기존에 생성한 빈 div 태그를 업데이트하여, 보다 다양한 작업을 할 수 있습니다. textContent 를 사용해서, 비어있는 div 엘리먼트에 문자열을 입력합니다.
console.log(oneDiv) // <div></div> oneDiv.textContent = 'dev'; console.log(oneDiv) // <div>dev</div>[코드] textContent를 이용해 문자열을 입력합니다.
앞서 생성한 div 엘리먼트를 container에 append 했을 때, CSS 스타일링이 적용되지 않았습니다. CSS 스타일링이 적용될 수 있도록, div 엘리먼트에 class를 추가합니다.
oneDiv.classList.add('tweet') console.log(oneDiv) // <div class="tweet">dev</div>[코드] classList.add를 이용해 'tweet' 클래스를 추가합니다.
생성한 엘리먼트에 텍스트를 채웠고, 클래스를 추가하여 스타일링을 적용했습니다.
이번에는 append를 이용해 container의 자식 요소로 추가합니다.
const container = document.querySelector('#container') container.append(oneDiv)[코드] append를 이용해 container의 자식 요소에 oneDiv를 추가합니다.
Q) class와 id 말고는 다른 attribute를 추가할 수는 없나요?
MDN에서 setAttribute 라는 메서드를 검색해 보세요.
DELETE - remove, removeChild
먼저 삭제하려는 엘리먼트의 위치를 알고 있는 경우에 사용하는 방법입니다. 앞서 생성하고 추가한 tweetDiv 를 삭제합니다. remove 메서드를 사용하세요.
여러 개의 자식 엘리먼트를 지우려면, 어떻게 해야 할까요? innerHTML 을 이용하면, 아주 간단하게 모든 자식 엘리먼트를 지울 수 있습니다. 컨테이너의 모든 자식 엘리먼트를 지우려면, 다음과 같이 입력합니다.
document.querySelector('#container').innerHTML = '';
innerHTML 을 이용하는 방법은 분명 간편하고 편리한 방식이지만, innerHTML은 보안에서 몇 가지 문제를 가지고 있습니다. 이 방법을 대신할 다른 메서드를 사용합니다. removeChild 는 자식 엘리먼트를 지정해서 삭제하는 메서드입니다.
모든 자식 엘리먼트를 삭제하기 위해, 반복문(while, for, etc.)을 활용할 수 있습니다.
다음의 코드는 자식 엘리먼트가 남아있지 않을 때까지, 첫 번째 자식 엘리먼트를 삭제하는 코드입니다.
removeChild 와 while 을 이용해 자식 요소를 삭제하면, 제목에 해당하는 H2 "Tweet List"까지 삭제됩니다.
자식 요소가 담고 있는 문자열을 비교해 "Tweet List"만 남기거나, 새로운 변수를 생성하고 Tweet List를 할당해뒀다가 반복문이 끝난 뒤에 새롭게 추가할 수도 있습니다. 또는 자식 엘리먼트를 하나만 남기게 할 수도 있습니다.
아래 방법 추천!
