[부스트코스]{3. 웹 앱 개발: 예약서비스 1/4}(2. DOM API 활용 - FE)_1. DOM API

DOM이란?

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

 

웹 페이지는 일종의 문서(document)다.  이 문서는 웹 브라우저를 통해 그 내용이 해석되어 웹 브라우저 화면에 나타나거나 HTML 소스 자체로 나타나기도 한다. 동일한 문서를 사용하여 이처럼 다른 형태로 나타날 수 있다는 점에 주목할 필요가 있다. DOM 은 동일한 문서를 표현하고, 저장하고, 조작하는 방법을 제공한다. DOM 은 웹 페이지의 객체 지향 표현이며, 자바스크립트와 같은 스크립팅 언어를 이용해 DOM 을 수정할 수 있다.

 

W3C DOM, WHATWG DOM 표준은 대부분의 브라우저에서 DOM 을 구현하는 기준이다. 많은 브라우저들이 표준 규약에서 제공하는 기능 외에도 추가적인 기능들을 제공하기 때문에 사용자가 작성한 문서들이 각기 다른 DOM 이 적용된 다양한 브라우저 환경에서 동작할 수 있다는 사실을 항상 인지하고 있어야 한다.

 

예를 들어, 표준 DOM 에서는 문서 안에서 모든 <P> elements 에 대한 list 를 리턴하는 getElementsByTagName method 를 정의하고 있다.

웹 페이지를 수정하거나 생성하는데 사용되는 모든 property, method, event 들은 objects 로 구성된다. 예를 들어 document object 는 document 자체를 의미하며, table object 는 HTML table 에 접근하기 위한 HTMLTableElement DOM 인터페이스를 구현한 것이다. 

 

DOM tree의 객체 구성 (이미지 출처: https://poiemaweb.com/js-dom)

 

DOM API

API (web or XML page) = DOM + JS (scripting language)

DOM 은 프로그래밍 언어와 독립적으로 디자인되었다. 때문에 문서의 구조적인 표현은 단일 API 를 통해 이용가능하다.

 

 

#API란?

API(Application Programming Interface, 응용 프로그램 프로그래밍 인터페이스)는 응용 프로그램에서 사용할 수 있도록, 운영 체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스를 뜻한다.

 

 

 

 

 

1. DOM 조작하기 API

 

documet. 으로 사용할 수 있는 APIs: https://www.w3schools.com/jsref/dom_obj_document.asp

HTML DOM Document Objects

element. 으로 사용할 수 있는 APIs : https://www.w3schools.com/jsref/dom_obj_all.asp

HTML DOM Element Objects

 

 

 

2. DOM 엘리먼트 오브젝트

 

유용한 DOM 엘리먼트 속성
tagName	엘리먼트의 태그명 반환
textContent	노드의 텍스트 내용을 설정하거나 반환
nodeType	노드의 노드 유형을 숫자로 반환

 

DOM 탐색 속성
childNodes	엘리먼트의 자식 노드의 노드 리스트 반환(텍스트 노드, 주석 노드 포함)
firstChild	엘리먼트의 첫 번째 자식 노드를 반환
firstElementChild	첫 번째 자식 엘리먼트를 반환
parentElement	엘리먼트의 부모 엘리먼트 반환
nextSibling	동일한 노드 트리 레벨에서 다음 노드를 반환
nextElementSibling	동일한 노드 트리 레벨에서 다음 엘리먼트 반환

 

DOM 조작 메소드
removeChild()	엘리먼트의 자식 노드 제거
appendChild()	마지막 자식 노드로 자식 노드를 엘리먼트에 추가
insertBefore()	기존 자식노드 앞에 새 자식 노드를 추가
cloneNode()	노드를 복제
replaceChild()	엘리먼트의 자식 노드 바꿈
closest()	상위로 올라가면서 가장 가까운 엘리먼트를 반환

 

HTML을 문자열로 처리해주는 DOM 속성 / 메소드
innerText	지정된 노드와 모든 자손의 텍스트 내용을 설정하거나 반환
innerHTML	지정된 엘리먼트의 내부 html을 설정하거나 반환
insertAdjacentHTML()	HTML로 텍스트를 지정된 위치에 삽입

 

=> MDN 사이트(https://developer.mozilla.org/ko/)에서 각 메소드의 예제를 확인할 수 있다.

 

 

 

#참고할 만한 자료 (개념 설명과 예제)

https://poiemaweb.com/js-dom

DOM | PoiemaWeb

 

 

 

 

 

#참고 자료

https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/%EC%86%8C%EA%B0%9C

DOM 소개

 

 

https://ko.wikipedia.org/wiki/API

API - 위키백과, 우리 모두의 백과사전

 

 

 

 

 

 

 

#부스트코스 강의

https://www.edwith.org/boostcourse-web/lecture/37422/

[LECTURE] 1) DOM Node조작하기 : edwith