DOM-API 실습

1. Document(HTML 파일)를 Javascript가 알아먹을 수 있는 Object 형태로 Modeling 한 것
2. 브라우저에 기본적으로 내장되어 있는 API 중 하나에요

💡 API가 뭘까요?
API는 무언가를 주문할 때 메뉴판과 같은 것이라고 생각해볼 수 있습니다. 예를 들어, 카페에서 커피를 주문할 때, 메뉴판을 통해 주문하게 됩니다. 메뉴판은 고객과 카페 사이의 인터페이스 역할을 하며, 고객은 메뉴판에서 주문할 음료나 음식을 선택하고, 카페는 해당 요청을 처리하여 음료나 음식을 제공합니다.

API도 비슷한 개념입니다. 다른 시스템에서 데이터나 서비스를 요청할 때, API는 해당 시스템과 사용자 간의 인터페이스 역할을 합니다. 예를 들어, 날씨 앱에서 사용자가 현재 위치의 날씨를 확인하려면, 앱은 해당 기능을 제공하는 날씨 서비스의 API를 호출하여 날씨 정보를 받아오게 됩니다.

따라서, API는 다른 시스템에서 제공하는 기능을 사용할 수 있도록 도와주는 중간자 역할을 합니다. 브라우저의 경우 역시, 기본적으로 DOM과 관련된 API를 제공함으로써 브라우저의 DOM 객체에 접근할 수 있도록 도와준답니다. 아래에서 여러가지 DOM 관련 API를 다뤄볼 예정이에요!

✅ document를 다음 두 환경에서 입력

1. chrome browser 개발자 도구
2. VSCode

✅ 런타임(런타임 환경)

DOM이 브라우저에 내장되어있기 때문에 우리는 HTML의 내용을 javascript로

**접근**할 수 있어요

**제어**할 수 있어요

모든 DOM의 node들은 ‘속성’과 ‘메서드'를 갖고있어요.

💡 DOM의 node?

DOM에서 Node란 웹 페이지를 구성하는 모든 HTML 태그와 텍스트, 그리고 속성 등을 하나의 블록으로 취급하는 것이라고 생각할 수 있습니다. 이러한 블록들은 서로 계층 구조로 연결되어 있으며, 각 블록은 자식 노드, 부모 노드, 형제 노드와 관계를 가지고 있습니다. 이러한 관계를 이용하여 DOM 트리를 탐색하고 조작할 수 있습니다.
아래 DOM 요소 하나 하나를(네모, 동그라미) 노드라고 할 수 있어요.

// 아래 코드에서 속성과 메서드를 구분
document.getElementById("demo").innerHTML = "Hello World!";