비실이의 개발 성장기

DOM(DOM API), Browser API 본문

프론트엔드

DOM(DOM API), Browser API

DubbingLee 2020. 9. 4. 22:53

DOM 이란?

문서 객체 모델(The Document Object Model, 이하 DOM) 은 HTML, XML 문서의 프로그래밍 interface 이다.
DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다. DOM 은 구조화된 nodes와 property 와 method 를 갖고 있는 objects로 문서를 표현한다. 이들은 웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할을 담당한다.
DOM 이란? - MDN web docs 

 

javascript 를 통해 웹 콘텐츠를 동적으로 제어할 수 있는 이유는 DOM 이 중간에서 interface 역할을 해주기 때문입니다.

 

DOM 에 대한 표준 스펙은 W3C DOM 에서 확인할 수 있으며, 표준 스펙 이외에도 웹 브라우저마다 추가적인 기능을 제공하므로 브라우저 환경에 따라 다르게 동작할 수 있습니다.

 

 

 

 

Browser API 란?

Browser API 는 웹 브라우저에 내장되어 있으며, 브라우저 및 주변 컴퓨터 환경에서 데이터를 제공하거나 복잡한 작업을 수행 할 수 있습니다. 예를 들어, Web Audio API 는 브라우저에서 오디오를 조작하기 위한 Javascript 구성을 제공합니다.
웹 API 소개 - MDN web docs

 

Browser API 종류는 웹 브라우저마다 차이가 있으므로 브라우저 환경에 따라 다르게 동작할 수 있습니다.

 

대표적인 Browser API 종류는 아래와 같습니다.

  • 웹 콘텐츠 조작을 위한 DOM

  • 서버에서 데이터를 가져오기 위한 XMLHttpRequest 및 Fetch

  • 그래픽 그리기 및 조작을 위한 Canvas 및 WebGL

  • 오디오 및 비디오 조작을 위한 Web Audio 및 WebRTC

  • 웹 브라우저에 데이터를 저장하기 위한 Web Storage 

 

 

참고

DOM 소개 - MDN web docs

 

DOM 소개

이 문서는 DOM에 대한 개념을 간략하게 소개하는 문서이다: DOM 이 무엇이며, 그것이 어떻게 HTML, XML 문서들을 위한 구조를 제공하는지, 어떻게 DOM 에 접근하는지, API 가 어떻게 사용되는지에 대한

developer.mozilla.org

Document - MDN web docs

 

Document

Document 인터페이스는 브라우저가 불러온 웹 페이지를 나타내며, 페이지 콘텐츠(DOM 트리)의 진입점 역할을 수행합니다.

developer.mozilla.org

Web API 소개 - MDN web docs

 

Introduction to web APIs

At this point, you should have a good idea of what APIs are, how they work, and what you can do with them in your JavaScript code. You are probably excited to start actually doing some fun things with specific APIs, so let's go! Next up, we'll look at mani

developer.mozilla.org

 

저작자표시 비영리 동일조건
Comments