DOM

Document object model

⇒ HTML 을 파싱하여 사용 가능한 model

Create

const tweet= document.createElement('div')

Append

document.body.append(tweet)

QuerySelector

// 한개만
const oneTweet = document.querySelector('.tweet')

// 여러개
const tweets = document.querySelectorAll('.tweet')

// 밑에 두개는 같음 (#이 붙지 않음)
const getOneTweet = document.getElementById('container')
const queryOneTweet = document.querySelector('#container')

// 아래처럼 자식 요소 추가
const container = document.querySelector('#container')
const tweetDiv = document.createElement('div')
container.append(tweetDiv)

// 아래처럼 document말고도 다른 #container 의 하위 태그들을 검색 할 수 있음
const container = document.querySelector('#container')
const div = container .querySelector('div')

UPDATE - textContent, classList.add

// div 엘리먼트에 문자열 입력
console.log(oneDiv) // <div></div>
oneDiv.textContent = 'dev';
console.log(oneDiv) // <div>dev</div>

// 아래처럼 classList.add class를 추가할 수 있음.
oneDiv.classList.add('tweet')
console.log(oneDiv) // <div class="tweet">dev</div>

// append를 이용해 container의 자식 요소로 추가함.
const container = document.querySelector('#container')
container.append(oneDiv)

DELETE - remove, removeChild

const container = document.querySelector('#container')
const tweetDiv = document.createElement('div')
container.append(tweetDiv)
// append 했던 엘리먼트를 삭제
tweetDiv.remove()

document.querySelector('#container').innerHTML = '';

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