[카카오테크캠퍼스 5주차] JavaScript 선행: DOM API

⏳ 2023. 5. 8. - 2023. 5. 14.

 

DOM API?

Document Object Model : div, span 등 html의 여러 가지 도큐먼트 모델

Application Programming Interface : 웹 사이트를 동작시키기 위해 사용하는 프로그래밍 명령

 

DOM API는 자바스크립트에서 html을 제어하기 위한 여러 가지 명령들이라고 할 수 있다!

 

기본적으로 코드를 위에서 아래로 읽기 때문에..

자바스크립트가 실행될 때 html의 내용을 정상적으로 찾지 못할 수 있다.

 

그럴 때 해결책이 두 가지 있는데,

먼저 하나는

단순하게 script를 아래 작성하는 것이다. 그러나 이 방법은 권장하지 않는다!!

그렇다면 어떻게?

defer를 사용하여 페이지 구성이 끝날 때까지 스크립트 실행을 지연시키자!!

실습

let hello = document.querySelector(".hello");

// Getter, 값을 얻는 용도
console.log(hello.textContent); // 'HELLO'

// Setter, 값을 지정하는 용도
hello.textContent = "HI";
console.log(hello.textContent); // 'HI'