[etc] DOM

DOM

: Document Object Model

DOM이란 HTML 요소를 Object(JavaScript Object)처럼 조작(Manipulation)할 수 있는 Model입니다.

CRUD

CREATE

: 새로운 <div> 요소를 만듭니다.

document.createElement('div')

APPEND

: HTML Element를 부모 노드에 포함 시킵니다.

const tweetDiv = document.createElement('div')

document.body.append(tweetDiv)

READ

: DOM을 이용하여 HTML Element를 조회합니다.

const oneTweet = document.querySelector('.tweet')

UPDATE

: DOM을 이용하여 HTML Element를 변경합니다.

const oneDiv = document.createElement('div');
console.log(oneDiv) // <div></div>

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

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

DELETE

: DOM을 이용하여 HTML Element를 삭제합니다.

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