DOM(Document Object Model)

• HTML, XML 등의 문서를 객체로 표현하는 방법을 정의한 API
• 웹 페이지를 프로그래밍적으로 제어할 수 있도록 하는 인터페이스

1. CREATE(생성)

• 어떤 곳에도 연결되지 않은 새로운 요소를 생성한다.

document.createElement('div') // <div></div>
const newDiv = document.createElement('div')

2. APPEND(추가)

• 생성한 요소를 원하는 요소에 추가시킨다.

document.body.append(newDiv) // newDiv요소를 body요소에 추가

3. READ(읽기)

• HTML 엘리먼트의 정보를 조회한다.
• 선택자 : HTML 요소("div"), id("#idDiv"), class(.classDiv)

// 클래스 이름이 newDiv인 HTML요소를 조회한다.
const oneDiv = document.querySelector('.newDiv')
// 클래스 이름이 newDiv인 모든 HTML요소를 유사 배열로 받는다.
const allDiv = document.querySelectorAll('.newDiv')

💡 유사배열(Array-like Object) : 배열처럼 생성되나 배열이 아닌 것

const getoneDiv = document.getElementById('container') // (구)방식, 호환성 문제로 사용될 수 있다. 
const queryoneDiv = document.querySelector('#container') // 현재 방식
// getOneDiv === queryOneDiv

4. UPDATE(수정)

• 빈 요소에 여러가지를 추가할 수 있다.

const newDiv = document.createElement('div')

// newDiv에 문자열을 삽입한다.
newDiv.textContent = 'hello'; // <div>hello</div>
// newDiv요소에 c1 클래스를 추가한다.
newDiv.classList.add('c1'); // <div class='c1'>hello</div>

5. DELETE(삭제)

• 요소를 삭제한다.

const newDiv = document.createElement('div') // <div></div>

newDiv.classList.add('c1'); // <div class='c1'></div>
// newDiv요소에 c1 클래스를 제거한다.
newDiv.classList.remove('c1'); // <div></div>

모든 자식요소를 지우는 법

const container = document.querySelector('#container');
// container의 첫 번째 자식 요소가 존재하면, 첫 번째 자식 요소를 제거한다.
while (container.firstChild) {
  container.removeChild(container.firstChild);
}

가장 위의 요소 하나만 남기고 지우는 법

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

while (container.children.length > 1) {
  container.removeChild(container.lastChild);
}

특정 클래스 요소만 지우는 법

const tweets = document.querySelectorAll('.tweet')

tweets.forEach(function(tweet){
    tweet.remove();
})
// or
for (let tweet of tweets){
    tweet.remove()
}