Document Object Model

HTML을 JavaScript를 통해 객체로서 조작하는 기법

document (브라우저가 제공하는 전역 객체)에 접근하여 DOM 트리 직접 구성 가능

const newDiv = document.createElement('div'); // 새로운 태그 생성

document.body.append(newDiv); // 생성한 태그를 DOM 트리에 등록

newDiv.textContent = "안녕하세요"; // 태그에 내용물 삽입

document.querySelector('div'); // DOM 트리에서 첫 번째 div태그 검색
document.querySelectorAll('div'); // DOM 트리에서 모든 div태그 검색
document.querySelectorAll('#myId'); // id로도 찾을 수 있음(CSS 선택자 동일하게 사용 가능)

newDiv.remove(); // 태그 제거