DOM[TIL-16]

1. DOM의 개념을 이해할 수 있다.

Document Object Model의 약자로, HTML 요소를
Object(JavaScript Object)처럼 조작(Manipulation)할 수 있는 Model

자바스크립트라는 프로그래밍 언어와 DOM을 활용하여 HTML에 접근하고 조작
console.dir(document.body)를 통해 출력된 객체에서
children 속성을 찾을 수 있다.

2. CRUD(Create, Read, Update and Delete)

DOM의 구조를 파악하고, HTML과 DOM이 어떻게 닮아있는지 알 수 있다.
HTML에서 Javascript 파일을 불러올 때 주의점에 대해서 이해할 수 있다.

document.createElement('div') - div 엘리먼트 생성
const tweetDiv = document.createElement('div') - div 엘리먼트를 변수에 할당
document.body.append(tweetDiv) - append 메소드를 사용하여 body에 넣기
tweetDiv.textCentent = '내용 넣기' - 생성된 div에 내용 넣기
tweetDiv.classList.add('new') - 생성된 div에 new라는 class 추가
tweetDiv.setAttribute('class','hello') - 생성된 div에 hello라는 class 추가
tweetDiv.removeAttribute('class') - 생성된 class 제거하기
tweet
tweetDiv.remove() - 엘리먼트 삭제
document.querySelector('body').innerHTML = ''; body 안에 있는 내용을 전부 지운다.