DOM
: Document Object Model
DOM이란 HTML 요소를 Object(JavaScript Object)처럼 조작(Manipulation)할 수 있는 Model입니다.
: 새로운 <div>
요소를 만듭니다.
document.createElement('div')
: HTML Element를 부모 노드에 포함 시킵니다.
const tweetDiv = document.createElement('div')
document.body.append(tweetDiv)
: DOM을 이용하여 HTML Element를 조회합니다.
const oneTweet = document.querySelector('.tweet')
: 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>
: DOM을 이용하여 HTML Element를 삭제합니다.
const container = document.querySelector('#container')
const tweetDiv = document.createElement('div')
container.append(tweetDiv)
tweetDiv.remove() // 이렇게 append 했던 요소를 삭제할 수 있다.