DOM API

Document Object Model, Aplication Programming Interface

Dom은 Html 내용들을 의미하며, API는 명령이라고 생각하면 된다.

<script src="./main.js"> </script> 를 원하는 정보의 아래에 두는 방법1 (비추천)

**<script defer src="./main.js"> </script> 를 사용하면 html의 내용을 빠짐없이 읽을 수 있다.**

defer 가 모든 내용을 처음부터 끝까지 보고 나서 다시 script 태그로 돌아가게 해준다.

DOM API 예제

// HTML 요소 (Element) 1개 찾기
const boxEl = document.querySelector('.box');

//이벤트 메소드 넣기 (상황, 실행할 함수(=핸들러))
boxEl.addEventListener('click', function () {
  console.log('Click~!');
});

1. document
2. addEventListener
3. classList

// HTML 요소 **모두** 검색
const boxEls = document.querySelectorAll('box');
console.log(boxEls);

// 찾은 요소들 **반복해서 **함수 실행! (forEach) 

//boxEls는 유사배열이어서 다 검색하기 위해 반복해서 찾아야 함!

// 익명 함수를 인수로 추가!

boxEls.forEach(function (boxEL, index) {
	boxEL.classList.add('order-${index + 1})
    console.log(index, boxEl);
});

Getter, 값을 얻는 용도

console.log(boxEl.textContent);// Box!!

Setter, 값을 지정하는 용도

boxEl.textContent = 'Song!!';
console.log(boxEl.textContent);

메소드 체이닝 (Method Chaining)

const a = 'Hello~';

const b = a.split('').reverse().join(''); // 메소드 체이닝... 메소드 여러 개를 사슬처럼 늘어서 적었다.