• DOM : Document Object Model.
• HTML를 JS로 제어하게 도와주는 명령문들이다.

<script **defer** src="./main.js"></script>

• DOM을 사용하기 위해선 script 태그 안에 defer 속성을 추가시켜 줘야 한다.
• defer : HTML 문서를 끝까지 다 읽고 나서 JS 파일을 실행하겠다는 의미

const boxEl = document.querySelector('.box');

• .box에 해당하는 요소를 찾아서 boxEl 변수에 대입한다.

boxEl.addEventListener();
boxEl.addEventListener('click', 2);
boexEl.addEventListener('click', function() {
	console.log('Click~!');
});

• 찾아낸 HTML의 요소를 JS 파일 내부에서 여러 종류의 메소드를 통해서 제어할 수 있다.

DOM API의 종류

1. querySelector(A) : A라는 선택자를 만족하는 요소들 중에서 가장 처음 나오는 요소를 선택한다.
2. addEventListener(A, B) : A 이벤트가 발생한다면, B를 실행한다.
3. querySelectorAll(A) : A라는 선택자를 만족하는 모든 요소들을 배열로 만든다.
4. forEach() : 배열의 각 요소를 처음부터 끝까지 접근한다.