DOM(Document Object Model)

HTML 요소를 Object(JavaScript Object)처럼 조작할 수 있는 Model

DOM으로 HTML을 조작하는 방법은 크게 5가지로 나뉜다.

(1). CREATE

document.createElement('div') - div element를 생성

생성된 element는 변수에 저장하여 활용이 가능하다.
const tweetDiv = document.createElement('div')

(2). APPEND

document.body.append(tweetDiv) - div element를 body에 삽입

(3). READ

document.querySelector('.tweet') - 클래스 이름이 tweet인 엘리먼트 중 첫번째 엘리먼트 조회
document.querySelectorAll('#tweet') - id가 tweet인 엘리먼트 모두 조회

(4). UPDATE

tweetDiv.textContent = 'dev' - 비어있는 div 엘리먼트에 문자열 입력
tweetDiv.classList.add('tweet') - div 엘리먼트에 'tweet'이라는 이름으로 class 추가

(5). DELETE

tweetDiv.remove() - div 엘리먼트 삭제
const container = document.querySelector('#container');
while (container.children.length = 0) {
container.removeChild(container.lastChild);
} - 컨테이너의 자식 엘리먼트 모두 삭제