The HTML DOM API
================

**HTML DOM API**는 HTML의 각 elements의 기능을 정의하는 인터페이스와 해당 요소가 의존하는 모든 지원 유형 및 인터페이스로 구성됩니다.

HTML DOM API에 포함된 기능 영역은 다음과 같습니다.

* DOM을 통한 HTML 요소에 대한 접근 및 제어.
* 양식 데이터에 대한 접근 및 조작.
* 2D 이미지의 콘텐츠 및 HTML `<canvas>`의 맥락과 해당 요소 위에 그리는 것과 같은 상호 작용.
* HTML 미디어 요소 (`<audio>` (en-US) 및 `<video>`)에 연결된 미디어 관리.
* 웹 페이지에서 콘텐츠 드래그 앤 드롭.
* 브라우저 탐색 기록에 대한 접근
* Web Components, Web Storage, Web Workers, WebSocket 및 Server-sent events와 같은 기타 API에 대한 연결 인터페이스 지원.
HTML DOM 개념 및 사용법
-----------------

이 글에서는 HTML 요소와 관련된 HTML DOM 부분에 초점을 맞추겠습니다. Drag and Drop, WebSockets, Web Storage와 같은 다른 영역에 대한 설명은 해당 API의 문서에서 확인할 수 있습니다.

### HTML 문서의 구조

문서 객체 모델(DOM)은 `document`의 구조를 설명하는 아키텍처로, 각 문서는 `Document` 인터페이스의 인스턴스로 표현됩니다. 문서는 **노드**의 계층적 트리로 구성되며, 문서 내의 단일 객체(예: 요소 또는 텍스트 노드)를 나타내는 기본 레코드입니다.

노드는 다른 노드를 함께 그룹화하거나 계층 구조를 구성할 수 있는 지점을 제공하는 등 엄격하게 조직화될 수 있으며, 다른 노드는 문서의 눈에 보이는 구성 요소를 나타낼 수 있습니다. 각 노드는 노드에 대한 정보를 가져오는 속성과 DOM 내에서 노드를 생성, 삭제 및 구성하는 메서드를 제공하는 `Node` (en-US) 인터페이스를 기반으로 합니다.

노드는 문서에 실제로 표시되는 콘텐츠를 포함한다는 개념이 없습니다. 노드는 빈 그릇입니다. 시각적 콘텐츠를 나타낼 수 있는 노드의 기본 개념은 `Element` (en-US) 인터페이스에 의해 도입되었습니다.`요소` 객체 인스턴스는 HTML 또는 SVG와 같은 XML 어휘를 사용하여 만든 문서에서 단일 요소를 나타냅니다.

예를 들어 두 개의 요소가 있고, 그 중 하나에 두 개의 요소가 더 중첩되어 있는 문서를 생각해 봅시다.

![Structure of a document with elements inside a document in a window](/ko/docs/Web/API/HTML_DOM_API/dom-structure.svg)

`Document` 인터페이스는 DOM 사양의 일부로 정의되어 있지만, HTML 명세서는 웹 브라우저의 맥락에서 DOM 사용과 관련된 정보를 추가하고, HTML 문서를 구체적으로 표현하는 데 사용할 수 있도록 크게 향상되었습니다.

HTML 표준에 의해 `Document`에 추가된 기능은 다음과 같습니다.

* 문서가 로드된 location, cookies (en-US), modification date (en-US), referring site 등 페이지를 로드할 때, HTTP 헤더에서 제공하는 다양한 정보에 접근할 수 있도록 지원합니다.
* 문서의 `<head>` 블록 및 body에 포함된 images, links, scripts (en-US) 등의 목록에 접근합니다.
* focus를 조사하고 편집 가능한 콘텐츠에 대한 명령을 실행하여 사용자와 상호 작용할 수 있도록 지원합니다.
* mouse 및 keyboard 이벤트, drag and drop, media control 등에 접근할 수 있도록 HTML 표준에 정의된 문서 이벤트용 이벤트 핸들러입니다.
* copy (en-US), cut (en-US) 및 paste (en-US)와 같은 요소와 문서 모두에 전달할 수 있는 이벤트 핸들러를 제공합니다.
### HTML 요소 인터페이스

`Element` 인터페이스는 보다 구체적인 모든 HTML 요소 클래스가 상속하는 `HTMLElement` 인터페이스를 도입하여 HTML 요소를 구체적으로 표현하도록 조정되었습니다. 이를 통해 `Element` 클래스가 확장되어 요소 노드에 HTML 관련 일반 기능을 추가할 수 있습니다. `HTMLElement`에 의해 추가된 속성에는 `hidden` (en-US) 및 `innerText` 등이 있습니다.

HTML 문서는 각 노드가 HTML 요소인 DOM 트리로, `HTMLElement` 인터페이스로 표시됩니다. `HTMLElement` 클래스는 차례로 `Node`를 구현하므로 모든 요소는 노드이기도 합니다(그 반대는 아닙니다). 이렇게 하면 `Node` (en-US) 인터페이스가 구현하는 구조적 기능을 HTML 요소에서도 사용할 수 있으므로, 서로 중첩하고, 생성 및 삭제하고, 이동하는 등의 작업을 수행할 수 있습니다.

`HTMLElement` 인터페이스는 일반적이며, 요소의 ID, 좌표, 요소를 구성하는 HTML, 스크롤 위치에 대한 정보 등 모든 HTML 요소에 공통된 기능만 제공합니다.

특정 요소에 필요한 기능을 제공하는 핵심 `HTMLElement` 인터페이스의 기능을 확장하기 위해, `HTMLElement` 클래스를 필요한 속성과 메서드를 추가하도록 하위 클래스화합니다. 예를 들어 `<canvas>` 요소는 `HTMLCanvasElement` 유형의 객체로 표시됩니다. `HTMLCanvasElement`는 캔버스 관련 기능을 제공하기 위해, `height` (en-US)와 같은 속성과 `getContext()` 같은 메서드를 추가하여 `HTMLElement` 유형을 보강합니다.

HTML 요소 클래스의 전체 상속은 다음과 같습니다.

![Hierarchy of interfaces for HTML elements](/ko/docs/Web/API/HTML_DOM_API/html-dom-hierarchy.svg)

이와 같이 모든 요소는 모든 상위 요소의 속성과 메서드를 상속합니다. 예를 들어, DOM에서 `HTMLAnchorElement` (en-US) 유형의 객체로 표시되는 `<a>` 요소를 생각해 봅시다. 그러면 이 요소에는 해당 클래스의 문서에 설명된 앵커 관련 속성 및 메서드뿐만 아니라 `HTMLElement` 및 `Element` (en-US), `Node` (en-US), 마지막으로 `EventTarget`에서 정의한 속성 및 메서드도 포함됩니다.

각 레벨은 요소의 유용성에 대한 핵심적인 측면을 정의합니다. `Node`에서 요소는 요소가 다른 요소에 의해 포함될 수 있고, 요소 자체가 다른 요소를 포함할 수 있는 기능을 둘러싼 개념을 상속받습니다. 특히 중요한 것은 마우스 클릭, 재생 및 일시 정지 이벤트 등과 같은 이벤트를 수신하고 처리하는 기능인 `EventTarget`에서 상속함으로써 얻을 수 있는 기능입니다.

공통점을 공유하여 추가적인 중간 유형을 갖는 요소가 있습니다. 예를 들어 `<audio>` (en-US) 및 `<video>` 요소는 모두 시청각 미디어를 나타냅니다. 해당 유형인 `HTMLAudioElement` (en-US)와 `HTMLVideoElement`는 모두 공통 유형인 `HTMLMediaElement`를 기반으로 하며, 이 유형은 다시 `HTMLElement` 등을 기반으로 합니다. `HTMLMediaElement`는 오디오 요소와 비디오 요소 간에 공통으로 사용되는 메서드와 속성을 정의합니다.

이러한 요소별 인터페이스는 HTML DOM API의 대부분을 구성하며, 이 글에서 중점적으로 다룹니다. DOM의 실제 구조에 대해 자세히 알아보려면, Introduction to the DOM 문서를 참조하세요.

HTML DOM 대상 그룹
--------------

 HTML DOM에 의해 노출되는 기능은 웹 개발자 도구상자에서 가장 일반적으로 사용되는 API 중 하나입니다.
 가장 단순한 웹 애플리케이션을 제외한 모든 웹 애플리케이션은 HTML DOM의 일부 기능을 사용합니다.

HTML DOM API 인터페이스
------------------

HTML DOM API를 구성하는 대부분의 인터페이스는 개별 HTML 요소 또는 유사한 기능을 가진 소수의 요소 그룹에 거의 일대일로 매핑됩니다. 또한 HTML DOM API에는 HTML 요소 인터페이스를 지원하기 위한 몇 가지 인터페이스와 유형이 포함되어 있습니다.

### HTML 요소 인터페이스

이러한 인터페이스는 특정 HTML 요소(또는 이와 관련된 동일한 속성 및 메서드를 가진 관련 요소 집합)를 나타냅니다.

* `HTMLAnchorElement` (en-US)
* `HTMLAreaElement` (en-US)
* `HTMLAudioElement` (en-US)
* `HTMLBaseElement` (en-US)
* `HTMLBodyElement` (en-US)
* `HTMLBRElement`
* `HTMLButtonElement` (en-US)
* `HTMLCanvasElement`
* `HTMLDataElement` (en-US)
* `HTMLDataListElement` (en-US)
* `HTMLDetailsElement` (en-US)
* `HTMLDialogElement` (en-US)
* `HTMLDirectoryElement`
* `HTMLDivElement`
* `HTMLDListElement` (en-US)
* `HTMLElement`
* `HTMLEmbedElement` (en-US)
* `HTMLFieldSetElement` (en-US)
* `HTMLFormElement` (en-US)
* `HTMLHRElement` (en-US)
* `HTMLHeadElement` (en-US)
* `HTMLHeadingElement` (en-US)
* `HTMLHtmlElement` (en-US)
* `HTMLIFrameElement` (en-US)
* `HTMLImageElement` (en-US)
* `HTMLInputElement` (en-US)
* `HTMLLabelElement` (en-US)
* `HTMLLegendElement` (en-US)
* `HTMLLIElement`
* `HTMLLinkElement` (en-US)
* `HTMLMapElement` (en-US)
* `HTMLMediaElement`
* `HTMLMenuElement` (en-US)
* `HTMLMetaElement` (en-US)
* `HTMLMeterElement` (en-US)
* `HTMLModElement` (en-US)
* `HTMLObjectElement` (en-US)
* `HTMLOListElement` (en-US)
* `HTMLOptGroupElement` (en-US)
* `HTMLOptionElement` (en-US)
* `HTMLOutputElement` (en-US)
* `HTMLParagraphElement` (en-US)
* `HTMLPictureElement` (en-US)
* `HTMLPreElement` (en-US)
* `HTMLProgressElement` (en-US)
* `HTMLQuoteElement` (en-US)
* `HTMLScriptElement` (en-US)
* `HTMLSelectElement` (en-US)
* `HTMLSlotElement` (en-US)
* `HTMLSourceElement` (en-US)
* `HTMLSpanElement`
* `HTMLStyleElement` (en-US)
* `HTMLTableCaptionElement` (en-US)
* `HTMLTableCellElement` (en-US)
* `HTMLTableColElement` (en-US)
* `HTMLTableElement`
* `HTMLTableRowElement` (en-US)
* `HTMLTableSectionElement` (en-US)
* `HTMLTemplateElement`
* `HTMLTextAreaElement` (en-US)
* `HTMLTimeElement` (en-US)
* `HTMLTitleElement`
* `HTMLTrackElement` (en-US)
* `HTMLUListElement` (en-US)
* `HTMLUnknownElement` (en-US)
* `HTMLVideoElement`

#### 더 이상 사용되지 않는 HTML 요소 인터페이스

* `HTMLMarqueeElement` (en-US) 
지원이 중단되었습니다

#### 폐기된 HTML 요소 인터페이스

* `HTMLFontElement` (en-US) 
지원이 중단되었습니다
* `HTMLFrameElement` 
지원이 중단되었습니다
* `HTMLFrameSetElement` (en-US) 
지원이 중단되었습니다
* `HTMLIsIndexElement` 
지원이 중단되었습니다
* `HTMLMenuItemElement` (en-US) 
지원이 중단되었습니다
### 웹 앱 및 브라우저 통합 인터페이스

이러한 인터페이스는 HTML에 포함된 브라우저 창과 문서는 물론 브라우저의 상태, 사용가능한 플러그인(있는 경우) 및 다양한 구성 옵션에 대한 접근을 제공합니다.

* `BarProp` (en-US)
* `Navigator`
* `Window`

#### 더 이상 사용되지 않는 웹 앱 및 브라우저 통합 인터페이스

* `External` 
지원이 중단되었습니다

#### 폐기된 웹 앱 및 브라우저 통합 인터페이스

* `ApplicationCache` 
지원이 중단되었습니다
* `Plugin` 
지원이 중단되었습니다
* `PluginArray` (en-US) 
지원이 중단되었습니다
### 양식 지원 인터페이스

이러한 인터페이스는 `<form>`과 `<input>` (en-US) 요소를 포함하여, 양식을 만들고 관리하는 데 사용되는 요소에 필요한 구조와 기능을 제공합니다.

* `FormDataEvent` (en-US)
* `HTMLFormControlsCollection` (en-US)
* `HTMLOptionsCollection` (en-US)
* `RadioNodeList` (en-US)
* `ValidityState`
### 캔버스 및 이미지 인터페이스

이러한 인터페이스는 캔버스 API에서 사용하는 객체와 `<img>` 요소 및 `<picture>` (en-US) 요소를 나타냅니다.

* `CanvasGradient` (en-US)
* `CanvasPattern` (en-US)
* `CanvasRenderingContext2D` (en-US)
* `ImageBitmap` (en-US)
* `ImageBitmapRenderingContext` (en-US)
* `ImageData`
* `OffscreenCanvas`
* `OffscreenCanvasRenderingContext2D` (en-US)
* `Path2D` (en-US)
* `TextMetrics` (en-US)
### 미디어 인터페이스

미디어 인터페이스는 `<audio>` (en-US)와 `<video>`와 같은 미디어 요소의 콘텐츠에 대한 HTML 접근을 제공합니다.

* `AudioTrack` (en-US)
* `AudioTrackList` (en-US)
* `MediaError` (en-US)
* `TextTrack` (en-US)
* `TextTrackCue` (en-US)
* `TextTrackCueList` (en-US)
* `TextTrackList` (en-US)
* `TimeRanges` (en-US)
* `TrackEvent` (en-US)
* `VideoTrack` (en-US)
* `VideoTrackList` (en-US)
### 드래그 앤드 드롭 인터페이스

이러한 인터페이스는 HTML Drag and Drop API에서 드래그 가능한(또는 끌 수 있는) 개별 항목 및 그룹을 나타내고, 드래그 앤 드롭 프로세스를 처리하는 데 사용됩니다.

* `DataTransfer`
* `DataTransferItem` (en-US)
* `DataTransferItemList` (en-US)
* `DragEvent` (en-US)
### 페이지 이력 인터페이스

History API 인터페이스를 사용하면 브라우저의 방문 이력에 대한 정보에 접근할 수 있을 뿐만 아니라, 해당 방문 이력을 통해 브라우저의 현재 탭을 앞뒤로 이동할 수 있습니다.

* `BeforeUnloadEvent` (en-US)
* `HashChangeEvent` (en-US)
* `History`
* `Location`
* `PageTransitionEvent` (en-US)
* `PopStateEvent` (en-US)
### 웹 구성요소 인터페이스

이러한 인터페이스는 Web Components API에서 사용할 수 있는 사용자 정의 요소를 생성하고 관리하는 데 사용됩니다.

* `CustomElementRegistry`
### 기타 및 지원 인터페이스

이러한 지원 객체 유형은 HTML DOM API에서 다양한 방식으로 사용됩니다. 또한 `PromiseRejectionEvent` (en-US)는 JavaScript `Promise`가 거부될 때 전달되는 이벤트를 나타냅니다.

* `DOMStringList` (en-US)
* `DOMStringMap` (en-US)
* `ErrorEvent` (en-US)
* `HTMLAllCollection` (en-US)
* `MimeType` (en-US)
* `MimeTypeArray` (en-US)
* `PromiseRejectionEvent` (en-US)
### 다른 API에 속하는 인터페이스

몇몇 인터페이스는 기술적으로 HTML 사양에 정의되어 있지만 실제로는 다른 API의 일부이기도 합니다.

#### 웹 스토리지 인터페이스

Web Storage API는 웹사이트가 나중에 재사용할 수 있도록 데이터를 사용자 디바이스에 일시적 또는 영구적으로 저장할 수 있는 기능을 제공합니다.

* `Storage`
* `StorageEvent`

#### 웹 워커 인터페이스

이러한 인터페이스는 Web Workers API에서 작업자가 앱 및 해당 콘텐츠와 상호 작용할 수 있는 기능을 설정하는 데 사용될 뿐만 아니라 창 또는 앱 간의 메시징을 지원하는 데에도 사용됩니다.

* `BroadcastChannel`
* `DedicatedWorkerGlobalScope` (en-US)
* `MessageChannel` (en-US)
* `MessageEvent`
* `MessagePort` (en-US)
* `SharedWorker`
* `SharedWorkerGlobalScope` (en-US)
* `Worker`
* `WorkerGlobalScope` (en-US)
* `WorkerLocation` (en-US)
* `WorkerNavigator` (en-US)

#### 웹소켓 인터페이스

HTML 사양에 정의된 이러한 인터페이스는 WebSockets API에서 사용됩니다.

* `CloseEvent` (en-US)
* `WebSocket`

#### 서버 전송 이벤트 인터페이스

`EventSource` (en-US) 인터페이스는 server-sent events를 전송했거나 전송 중인 소스를 나타냅니다.

* `EventSource` (en-US)
예제
--

이 예시에서는 지정된 필드에 현재 값이 있는지에 따라 양식의 "제출" 버튼의 상태를 업데이트하기 위해 `<input>` (en-US) 요소의 `input` 이벤트를 모니터링합니다.

### JavaScript


```js
const nameField = document.getElementById("userName");
const sendButton = document.getElementById("sendButton");

sendButton.disabled = true;
// [참고: 이 예제는 항상 이 예제에 초점을 맞추고 스크롤한 상태로 로드되므로 비활성화되어 있습니다].
//nameField.focus();

nameField.addEventListener("input", (event) => {
  const elem = event.target;
  const valid = elem.value.length !== 0;

  if (valid && sendButton.disabled) {
    sendButton.disabled = false;
  } else if (!valid && !sendButton.disabled) {
    sendButton.disabled = true;
  }
});
```


이 코드는 `Document` 인터페이스의 `getElementById()` 메서드를 사용하여, ID가 `userName` and `sendButton`인 `<input>` (en-US) 요소를 나타내는 DOM 객체를 가져옵니다. 이를 통해 이러한 요소에 대한 정보를 제공하고 제어 권한을 부여하는 속성과 메서드에 접근할 수 있습니다.

"보내기" 버튼의 `disabled` (en-US) 속성에 대한 `HTMLInputElement` (en-US) 객체가 `true`로 설정되어 "보내기" 버튼을 클릭할 수 없도록 비활성화합니다. 또한 사용자 이름 입력 필드는 `HTMLElement`에서 상속하는 `focus()` (en-US) 메서드를 호출하여 활성 포커스로 설정됩니다.

그런 다음 `addEventListener()`를 호출하여 사용자 이름 입력에 `input` 이벤트에 대한 핸들러를 추가합니다. 이 코드는 입력의 현재 값의 길이를 확인하여 0이면 "보내기" 버튼이 아직 비활성화되어 있지 않은 경우 비활성화합니다. 그렇지 않으면 이 코드는 버튼이 활성화 되도록 합니다.

이렇게 하면 사용자 이름 입력 필드에 값이 있을 때마다 '보내기' 버튼이 항상 활성화되고 비어 있으면 비활성화됩니다.

### HTML

양식(form)에 대한 HTML은 다음과 같습니다.


```html
<p>아래 정보를 제공해주세요. "*" 표시가 되어있는 부분은 필수 정보입니다.</p>
<form action="" method="get">
  <p>
    <label for="userName" required>Your name:</label>
    <input type="text" id="userName" /> (*)
  </p>
  <p>
    <label for="email">Email:</label>
    <input type="email" id="userEmail" />
  </p>
  <input type="submit" value="Send" id="sendButton" />
</form>
```

### 결과

명세서
---

| Specification |
| --- |
| HTML Standard # htmlelement |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

### 참고서

* HTML 요소 참고서
* HTML 특성 참고서
* Document Object Model (DOM) 참고서
### 안내서

* Manipulating documents (en-US): DOM 조작에 대한 초보자 가이드.