DOM조작 방법

DOM이란?

DOM은 Document Object Model의 약자로, HTML 요소를 Object(JavaScript Object)처럼 조작(Manipulation)할 수 있는 Model이다. 즉, 자바스크립트를 사용할 수 있으면, DOM으로 HTML을 조작할 수 있다.

DOM으로 HTML 조작하기

DOM을 JavaScript로 조작하여 HTML Element를 추가하거나 삭제, 혹은 내용을 변경할 수 있다.

1. CREATE : createElement

const tweetDiv = document.createElement('div')

document 객체의 createElement 메소드를 이용해 div element를 만든다. 그리고 element 변수를 tweetDiv에 할당한다. 이 때 tweetDiv라는 요소는 현재 아무것도 연결이 되어있지 않은 하나의 노드이기 때문에 화면에 아무런 변화게 일어나지 않게됨

이렇게 엘리먼트가 공중에 떠있는 상태임. 이는 APPEND를 이용해 트리 구조에 연결하여 실제 웹페이지상에서도 보이게 할 수 있다.

2. APPEND : appendChild

append 라는 메소드를 사용해서, 변수 tweetDiv 를 body 에 넣어보자!

document.body.append(tweetDiv)

body 안에 들어간 것을 확인해 볼 수 있다. 다른 트윗처럼 container 안에 넣으려면 DOM 트리를 순회해서 container를 찾을 수 있다

3. READ : querySelector, querySelectorAll

DOM으로 HTML 엘리먼트의 정보를 조회하기 위해서는 querySelector의 첫 번째 인자로 Selector를 전달하여 확인할 수 있다. 셀렉터로는 HTML 태그("div"), id("#tweetList"), class(.tweet) 세가지가 가장 많이 사용됨.

const container = document.querySelector('#container')
const tweetDiv = document.createElement('div')
container.append(tweetDiv)

container를 찾아서 맨 마지막 자식 엘리먼트로 tweetDiv를 추가해주었다.

4. UPDATE : textContent, classList.add

update에서는 기존에 생성한 빈 div 태그를 업데이트하여 보다 다양한 작업이 가능하다.

console.log(oneDiv) // <div></div>
oneDiv.textContent = 'dev';
console.log(oneDiv) // <div>dev</div>

textContent를 사용해 비어있는 div 엘리먼트에 문자열을 입력할 수 있다.

 oneDiv.classList.add('tweet')
console.log(oneDiv) // <div class="tweet">dev</div>

classList.add를 사용해 tweet 클래스를 추가해주어 css 스타일링이 적용될 수 있도록 해줌

 oneDiv.classList.add('tweet')
console.log(oneDiv) // <div class="tweet">dev</div>

앞에서 생성한 것과 마찬가지로 container의 자식 요소로 추가해줌
새롭게 추가한 엘리먼트는 클래스 tweet의 스타일이 적용된 상태로 출력되는 것을 볼 수 있다.

5. DELETE : remove, removeChild

const container = document.querySelector('#container')
const tweetDiv = document.createElement('div')
container.append(tweetDiv)
tweetDiv.remove() // 이렇게 append 했던 엘리먼트를 삭제할 수 있다.

삭제하려는 엘리먼트의 위치를 알고 있는 경우 remove 메소드 사용
여러 개의 자식 엘리먼트를 지우려먼 innerHTML을 이용하면 되지만 여러가지 보안문제가 있으므로 자식 엘리먼트를 지정해서 삭제하는removeChild를 사용한다.

• 첫 번째 자식 엘리먼트 삭제

const container = document.querySelector('#container');
while (container.firstChild) {
  container.removeChild(container.firstChild);
}

• 하나의 자식 엘리먼트만 남기기

const container = document.querySelector('#container');
while (container.children.length > 1) {
  container.removeChild(container.lastChild);
}

• 클래스 이름이 tweet인 엘리먼트만 찾아서 지우기

const tweets = document.querySelectorAll('.tweet')
tweets.forEach(function(tweet){
    tweet.remove();
})
// or
for (let tweet of tweets){
    tweet.remove()
}