recursal/MDN huggingface dataset:
Location
========

**`Location`** 인터페이스는 객체가 연결된 장소(URL)를 표현합니다. `Location` 인터페이스에 변경을 가하면 연결된 객체에도 반영되는데, `Document`와 `Window` 인터페이스가 이런 `Location`을 가지고 있습니다. 각각 `Document.location`과 `Window.location` (en-US)으로 접근할 수 있습니다.

속성
--

`Location` 인터페이스는 아무 속성도 상속하지 않지만, `URLUtils`의 속성을 구현합니다.

`Location.href` (en-US)

온전한 URL을 값으로 하는 `DOMString`입니다. 바뀔 경우 연결된 문서도 새로운 페이지로 이동합니다. 연결된 문서와 다른 오리진에서도 설정할 수 있습니다.

`Location.protocol` (en-US)

URL의 프로토콜 부분을 값으로 하는 `DOMString`으로, 마지막의 `':'`도 포함합니다.

`Location.host` (en-US)

URL의 호스트 부분을 값으로 하는 `DOMString`으로, 호스트명, `':'`, 포트 번호를 포함합니다.

`Location.hostname` (en-US)

URL의 도메인 부분을 값으로 하는 `DOMString`입니다.

`Location.port` (en-US)

URL의 포트 번호를 값으로 하는 `DOMString`입니다.

`Location.pathname` (en-US)

`'/'` 문자 뒤 URL의 경로를 값으로 하는 `DOMString`입니다.

`Location.search` (en-US)

`'?'` 문자 뒤 URL의 쿼리스트링을 값으로 하는 `DOMString`입니다. 모던 브라우저에서는 `URLSearchParams.get()`과 `URL.searchParams`를 사용해서 인자를 쉽게 추출할 수 있습니다.

`Location.hash` (en-US)

`'#'` 문자 뒤 URL의 프래그먼트 식별자를 값으로 하는 `DOMString`입니다.

`Location.username` (en-US)

도메인 이름 이전에 명시된 사용자명을 값으로 하는 `DOMString`입니다.

`Location.password` (en-US)

도메인 이름 이전에 명시된 비밀번호를 값으로 하는 `DOMString`입니다.

`Location.origin` (en-US) 읽기 전용

지정한 장소 오리진의 표준 형태를 값으로 하는 `DOMString`입니다.

메서드
---

`Location` 인터페이스는 아무 메서드도 상속하지 않지만, `URLUtils`의 메서드를 구현합니다.

`Location.assign()` (en-US)

주어진 URL의 리소스를 불러옵니다.

`Location.reload()`

현재 URL의 리소스를 다시 불러옵니다. 선택적으로 매개변수에 `true`를 제공해 브라우저 캐시를 무시하고 서버에서 새로 불러올 수 있습니다,

`Location.replace()`

Replaces the current resource with the one at the provided URL. The difference from the `assign()` method is that after using `replace()` the current page will not be saved in session `History`, meaning the user won't be able to use the *back* button to navigate to it.

`Location.toString()` (en-US)

Returns a `DOMString` containing the whole URL. It is a synonym for `URLUtils.href`, though it can't be used to modify the value.

예제
--


```js
// Create anchor element and use href property for the purpose of this example
// A more correct alternative is to browse to the URL and use document.location or window.location
var url = document.createElement("a");
url.href =
  "https://developer.mozilla.org:8080/en-US/search?q=URL#search-results-close-container";
console.log(url.href); // https://developer.mozilla.org:8080/en-US/search?q=URL#search-results-close-container
console.log(url.protocol); // https:
console.log(url.host); // developer.mozilla.org:8080
console.log(url.hostname); // developer.mozilla.org
console.log(url.port); // 8080
console.log(url.pathname); // /en-US/search
console.log(url.search); // ?q=URL
console.log(url.hash); // #search-results-close-container
console.log(url.origin); // https://developer.mozilla.org:8080
```

명세
--

| Specification |
| --- |
| HTML Standard # the-location-interface |

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

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

같이 보기
-----

* Two methods creating such an object: `Window.location` (en-US) and `Document.location`.
* URL related interfaces: `URL`, `URLSearchParams` and `HTMLHyperlinkElementUtils`
Gamepad API
===========

**게임패드 API**는 게임패드와 다른 게임 제어장치의 신호에 쉬운 일관된 방식으로 접근하고 응답하는 개발자들을 위한 수단이다. 게임패드 API는 세 가지 인터페이스와연결, 연결 해제되고 게임 패드 자체에 대한 다른 정보에 접근하고 어떤 버튼과 다른 조작 장치들이 현재 눌린 것에 응답하는 두 가지 이벤트 그리고 한 가지 특수 기능이 포함되어 있다.

인터페이스
-----

`Gamepad` (en-US)

컴퓨터에 연결된 게임패드나 조작장치를 표현한다.

`GamepadButton` (en-US)

연결된 조작장치들 중 하나에 있는 버튼을 표현한다.

`GamepadEvent` (en-US)

게임 패드와 연관된 이벤트를 나타내는 이벤트 객체이다.

### 게임패드 확장기능 실험

`GamepadHapticActuator` (en-US)

Represents hardware in the controller designed to provide haptic feedback to the user (if available), most commonly vibration hardware.

`GamepadPose` (en-US)

Represents the pose of a controller (e.g. position and orientation in 3D space) in the case of a WebVR (en-US) controller.

다음 정보를엑세스할 수 있는 게임패드 인터페이스 확장기능 (en-US) 더보기

### 다른 인터페이스로 확장

#### Navigator

`Navigator.getGamepads()` (en-US)

An extension to the `Navigator` object that returns an array of `Gamepad` (en-US) objects, one for each connected gamepad.

#### Window events

`Window.ongamepadconnected` (en-US)

Represents an event handler that will run when a gamepad is connected (when the `gamepadconnected (en-US)` event fires).

`Window.ongamepaddisconnected` (en-US)

Represents an event handler that will run when a gamepad is disconnected (when the `gamepaddisconnected (en-US)` event fires).

튜토리얼과 가이드
---------

* Using the Gamepad API (en-US)
* Implementing controls using the Gamepad API (en-US)
명세서
---

| Specification |
| --- |
| Gamepad # gamepad-interface |
| Gamepad Extensions # partial-gamepad-interface |

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

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

더보기
---

* The Gamepad API by Ted Mielczarek and Robert Nyman
* Simple API demo page (source)
AudioBuffer
===========

**`AudioBuffer`** 인터페이스는 메모리에 상주하는 짧은 오디오 에셋을 나타내는데, 이는 `AudioContext.decodeAudioData()` (en-US) 메서드를 사용하여 오디오 파일로부터 생성되거나, `AudioContext.createBuffer()` (en-US)를 사용하여 가공되지 않은(raw) 데이터로부터 생성될 수 있습니다. 한 번 AudioBuffer에 입력되고 나면, 이 오디오는 `AudioBufferSourceNode`에 전달됨으로써 재생될 수 있습니다.

이 유형의 객체는 작은 오디오 스니펫을 붙잡기 위해 설계되었고, 보통 45초보다 작습니다. 더 긴 사운드에 대해서는, `MediaElementAudioSourceNode` (en-US)를 구현하는 객체가 더욱 적합합니다. 버퍼는 데이터를 다음의 포맷으로 포함합니다. non-interleaved IEEE754 32비트 선형 PCM이며, 명목상의 범위는 `-1` 과 `+1` 사이입니다. 즉, 32비트 부동 소수점 버퍼이고, 각 샘플은 -1.0과 1.0사이에 있습니다. 만약 `AudioBuffer`가 다수의 채널을 가지고 있다면, 이 채널들은 별도의 버퍼에 저장됩니다.

생성자
---

`AudioBuffer()` (en-US)

새로운 `AudioBuffer` 객체 인스턴스를 생성하고 반환합니다.

속성
--

`AudioBuffer.sampleRate` (en-US) 읽기 전용

버퍼에 저장된 PCM 데이터의 샘플 레이트를 초당 샘플로 나타내는 float을 반환합니다.

`AudioBuffer.length` (en-US) 읽기 전용

버퍼에 저장된 PCM 데이터의 길이를 샘플 프레임으로 나타내는 integer를 반환합니다.

`AudioBuffer.duration` (en-US) 읽기 전용

버퍼 내에 저장된 PCM 데이터의 재생 길이를 초로 나타내는 double을 반환합니다.

`AudioBuffer.numberOfChannels` (en-US) 읽기 전용

버퍼 내에 저장된 PCM 데이터에 의해 기술되는 개별 오디오 채널의 수를 나타내는 integer를 반환합니다.

메서드
---

`AudioBuffer.getChannelData()` (en-US)

채널과 연관된 PCM 데이터를 포함하고 있는 `Float32Array`를 반환하는데, 이 채널은 `channel` 매개변수에 의해 정의됩니다 (`0` 은 첫번째 채널을 나타냅니다).

`AudioBuffer.copyFromChannel()` (en-US)

`AudioBuffer` 의 명시된 채널로부터 `destination` 배열에 샘플을 복제합니다.

`AudioBuffer.copyToChannel()` (en-US)

`source` 배열로부터, `AudioBuffer` 의 명시된 채널에 샘플을 복제합니다.

예제
--

다음의 간단한 예제는 어떻게 `AudioBuffer` 를 생성하고 무작위 백색소음으로 `AudioBuffer` 를 채우는지 보여줍니다. 전체 소스 코드는 webaudio-examples 레포지토리에서 찾을 수 있고, 작동 예제도 볼 수 있습니다.


```js
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();

// AudioContext의 샘플 레이트를 가지는 빈 3초짜리 스테레오 버퍼를 생성합니다.
var myArrayBuffer = audioCtx.createBuffer(
  2,
  audioCtx.sampleRate \* 3,
  audioCtx.sampleRate,
);

// 버퍼를 백색소음으로 채웁니다
// 단순히 -1.0과 1.0사이의 무작위 값
for (var channel = 0; channel < myArrayBuffer.numberOfChannels; channel++) {
  // 이는 데이터를 포함하고 있는 실제 배열을 줍니다
  var nowBuffering = myArrayBuffer.getChannelData(channel);
  for (var i = 0; i < myArrayBuffer.length; i++) {
    // Math.random()은 [0, 1.0]에 있습니다
    // 오디오는 [-1.0, 1.0]에 있을 필요가 있습니다
    nowBuffering[i] = Math.random() \* 2 - 1;
  }
}

// AudioBufferSourceNode를 얻습니다.
// 이것이 AudioBuffer를 재생하기를 원할 때 사용할 AudioNode입니다
var source = audioCtx.createBufferSource();

// AudioBufferSourceNode에 버퍼를 설정합니다
source.buffer = myArrayBuffer;

// AudioBufferSourceNode를 목적지에
// 연결해 소리가 나오게 합니다
source.connect(audioCtx.destination);

// 소스 재생을 시작합니다
source.start();
```

명세서
---

| Specification |
| --- |
| Web Audio API # AudioBuffer |

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

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

같이 보기
-----

* Web Audio API 사용하기
SVGRect
=======

**`SVGRect`** 인터페이스는 직사각형을 나타냅니다. 직사각형은 최소 `x` 값과 최소 `y` 값을 가리키는 좌표쌍, 그리고 양수인 `width`와 `height` 값으로 구성됩니다.

**`SVGRect`** 객체는 읽기 전용으로 지정될 수 있습니다. 읽기 전용일 경우 객체를 수정하려고 시도하면 예외가 발생합니다.

속성
--

`SVGRect.x`

이 좌표의 정확한 효과는 요소에 따라 다릅니다. `x` 특성을 지정하지 않은 경우 `0`을 지정한 것과 동일하게 취급합니다.

`SVGRect.y`

이 좌표의 정확한 효과는 요소에 따라 다릅니다. `y` 특성을 지정하지 않은 경우 `0`을 지정한 것과 동일하게 취급합니다.

`SVGRect.width`

직사각형의 너비를 나타냅니다. 음수로 설정하려고 시도하면 오류가 발생합니다. `0`일 경우 요소를 렌더링하지 않습니다.

`SVGRect.height`

직사각형의 높이를 나타냅니다. 음수로 설정하려고 시도하면 오류가 발생합니다. `0`일 경우 요소를 렌더링하지 않습니다.

메서드
---

없음.

명세
--

| Specification |
| --- |
| Geometry Interfaces Module Level 1 # DOMRect |

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

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

Fetch API는 네트워크 통신을 포함한 리소스 취득을 위한 인터페이스를 제공하며, `XMLHttpRequest`보다 강력하고 유연한 대체제입니다.

**참고:** 이 기능은 Web Worker에서 사용할 수 있습니다

개념과 사용법
-------

Fetch API는 `Request`와 `Response` 객체, 그리고 기타 네트워크 요청에 관련된 것들을 사용하고, CORS와 HTTP Origin 헤더 행동 등 관련한 개념도 포함하고 있습니다.

요청을 생성하고 리소스를 취득하려면 `fetch` 메서드를 사용하세요. `fetch()`는 `Window`와 `Worker` (en-US) 컨텍스트 양쪽에서 모두 사용할 수 있는 전역 메서드입니다. 그러므로 리소스를 취득할 상황이 생기는 거의 모든 컨텍스트에서 사용할 수 있습니다.

`fetch()` 메서드는 하나의 필수 매개변수로 가져오려는 리소스 경로를 받습니다. 반환 값은 해당 요청에 대한 `Response`로 이행하는 `Promise`인데, 서버가 헤더를 포함한 응답을 하는 순간 이행합니다. 이는 **서버가 HTTP 오류 응답 코드로 응답해도 이행한다는 뜻**입니다. 선택 사항으로, 두 번째 매개변수에 `init` 옵션 객체를 제공할 수 있습니다(`Request` 를 참고하세요).

`Response`를 가져온 후에는 본문 콘텐츠의 유형과 처리 방법을 정의할 수 있는 다양한 메서드를 사용할 수 있습니다.

`Request()`와 `Response()` (en-US) 생성자를 직접 호출해서 요청과 응답을 생성할 수 있지만, 이런 사용법은 흔치 않습니다. 보통 이 두 객체는 다른 API(예를 들어, 서비스 워커의 `FetchEvent.respondWith()` (en-US))에 의해 생성됩니다.

Fetch API가 제공하는 기능의 자세한 정보는 Fetch 사용하기에서, 개념 학습은 Fetch 기본 개념에서 확인하세요.

Fetch 인터페이스
-----------

`fetch()`

리소스를 취득하기 위한 `fetch()` 메서드입니다.

`Headers` (en-US)

요청/응답 헤더를 나타냅니다. 헤더를 질의하고 그 결과에 따라 다양한 동작을 취하기 위해 사용할 수 있습니다.

`Request`

리소스 요청을 나타냅니다.

`Response`

요청에 대한 응답을 나타냅니다.

명세서
---

| Specification |
| --- |
| Fetch Standard # fetch-method |

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

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

관련정보
----

* Fetch 사용하기
* Service Worker API
* HTTP 접근 제어 (CORS)
* HTTP
* Fetch 폴리필
* Fetch 기본 개념
ValidityState
=============

Baseline 2023
-------------

Newly availableSince March 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
**`ValidityState`** 인터페이스는 제약 유효성 검사에 대해 요소가 가질 수 있는 유효성 상태를 나타내며, 요소의 값이 유효하지 않은 경우 그 이유에 대한 설명을 도와줍니다.

속성
--

각각의 `Boolean` 속성에 대해, `true` 값은 해당 이유로 인해 값의 유효성 검사를 실패했음을 나타냅니다. **`valid`** 속성은 예외로서 `true`는 모든 제약조건을 통과했음을 의미합니다.

`badInput` (en-US) 읽기 전용

사용자가 입력한 값을 브라우저가 변환하지 못했음을 나타내는 `Boolean` 값입니다.

`customError` 읽기 전용

`setCustomValidity()` (en-US) 메서드를 사용해 요소의 사용자 지정 유효성 메시지를 비어있지 않은 문자열로 설정했는지를 나타내는 `Boolean` 값입니다.

`patternMismatch` (en-US) 읽기 전용

값이 주어진 `pattern` (en-US) 특성을 만족하지 못하는지 나타내는 `Boolean` 값입니다 참일 경우, CSS `:invalid` (en-US) 의사 클래스를 만족합니다.

`rangeOverflow` (en-US) 읽기 전용

값이 주어진 `max` (en-US) 특성보다 큰지 나타내는 `Boolean` 값입니다. 참일 경우, CSS `:invalid` (en-US)와 `:out-of-range` (en-US) 의사 클래스를 만족합니다.

`rangeUnderflow` (en-US) 읽기 전용

값이 주어진 `min` (en-US) 특성보다 작은지 나타내는 `Boolean` 값입니다. 참일 경우, CSS `:invalid` (en-US)와 `:out-of-range` (en-US) 의사 클래스를 만족합니다.

`stepMismatch` (en-US) 읽기 전용

값이 주어진 `step` (en-US) 특성의 규칙을 만족하지 않는지 (즉, 값을 스텝 값으로 나눌 수 없는지) 나타내는 `Boolean` 값입니다. 참일 경우, CSS `:invalid` (en-US)와 `:out-of-range` (en-US) 의사 클래스를 만족합니다.

`tooLong` (en-US) 읽기 전용

값이 `HTMLInputElement` (en-US) 또는 `HTMLTextAreaElement` (en-US) 객체의 `maxlength` 값보다 긴지 나타내는 `Boolean` 값입니다. 참일 경우, CSS `:invalid` (en-US)와 `:out-of-range` (en-US) 의사 클래스를 만족합니다.

`tooShort` (en-US) 읽기 전용

값이 `HTMLInputElement` (en-US) 또는 `HTMLTextAreaElement` (en-US) 객체의 `minLength` 값보다 짧은지 나타내는 `Boolean` 값입니다. 참일 경우, CSS `:invalid` (en-US)와 `:out-of-range` (en-US) 의사 클래스를 만족합니다.

`typeMismatch` (en-US) 읽기 전용

값이 입력 유형에서 요구하는 형식(`type` (en-US)이 `email`이나 `url`인 경우)에 맞지 않는지 나타내는 `Boolean` 값입니다. 참일 경우, CSS `:invalid` (en-US) 의사 클래스를 만족합니다.

`valid` 읽기 전용

요소가 모든 유효성 제약을 만족하여 유효한 상태인지 나타내는 `Boolean` 값입니다. 참일 경우 CSS `:valid` (en-US) 의사 클래스를, 거짓일 경우 `:invalid` (en-US) 의사 클래스를 만족합니다.

`valueMissing` (en-US) 읽기 전용

요소가 `required` (en-US) 특성을 가지고 있지만 값은 없는 경우 참인 `Boolean` 값입니다. 참일 경우, CSS `:invalid` (en-US) 의사 클래스를 만족합니다.

명세
--

| Specification |
| --- |
| HTML Standard # the-constraint-validation-api:validitystate-3 |

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

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

같이 보기
-----

* Guide: Constraint validation (en-US)
* Tutorial: Form data validation (en-US)
디바이스 방향 이벤트
===========

디바이스 방향 이벤트는 디바이스의 물리적 방향을 감지 (en-US)할 수 있을 뿐만 아니라, 디바이스의 동작을 감지 (en-US)햘 수 있는 이벤트입니다.

개념 및 사용법
--------

모바일 디바이스에는 일반적으로 자이로스코프, 나침반, 가속도계 등의 센서가 탑재되어 있어 디바이스에서 실행 중인 애플리케이션이 디바이스의 방향과 동작을 감지할 수 있습니다.

디바이스 방향 이벤트를 사용하면 사용자 디바이스의 방향에 따라 동작을 변경할 수 있고, 사용자가 디바이스를 움직일 때 반응할 수 있는 웹 애플리케이션을 개발할 수 있습니다.

디바이스 방향 이벤트를 사용할 수 있는 몇 가지 일반적인 기능은 다음과 같습니다.

* 웹 기반 게임에서 사용자가 디바이스를 기울이고 움직여 게임 내 캐릭터나 오브젝트의 동작을 제어할 수 있도록 하는 기능입니다.
* 지도 기반 애플리케이션에서 디바이스의 위치에 따라 지도의 방향을 변경하거나, 사용자의 움직임에 따라 업데이트되는 길 안내를 제공합니다.
* 제스처 인식을 위해 사용되며, 예를 들어 사용자가 기기를 흔들면 '흔들기' 제스처를 인식하고, 이를 사용하여 사용자가 기기를 흔들 때 입력 영역을 지우는 등의 작업을 수행하는 데 활용됩니다.

**참고:** 이 API는 모바일 브라우저에서 광범위하게 지원됩니다. 일부 데스크톱 전용 브라우저에는 하드웨어 차이로 인해 제한이 있을 수 있지만, 센서가 장착된 디바이스에서 API가 주로 사용됨을 고려할 때 이러한 제약은 그다지 중요하지 않습니다.

인터페이스
-----

`DeviceOrientationEvent` (en-US)

디바이스의 물리적 방향 변화를 나타냅니다.

`DeviceMotionEvent` (en-US)

디바이스의 가속도 및 회전 속도의 변화를 나타냅니다.

`DeviceMotionEventAcceleration` (en-US)

디바이스가 모든 세 축을 따라 경험하고 있는 가속도를 나타냅니다.

`DeviceMotionEventRotationRate` (en-US)

디바이스가 세 축을 중심으로 회전하는 속도를 나타냅니다.

이벤트
---

`deviceorientation` (en-US)

지구 좌표 프레임(Earth coordinate frame)과 비교하여 디바이스의 현재 방향에 대한 새로운 데이터를 디바이스에서 사용 가능할 때 발생합니다.

`devicemotion` (en-US)

일정한 간격으로 발생하며, 해당 시점에 디바이스가 받는 물리적 가속도와 디바이스의 회전 속도를 나타냅니다.

`deviceorientationabsolute` (en-US)

절대 디바이스 방향이 변경될 때 발생합니다.

명세서
---

| Specification |
| --- |
| DeviceOrientation Event Specification  |

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

### api.Window.deviceorientation\_event

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

### api.Window.devicemotion\_event

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

### api.Window.deviceorientationabsolute\_event

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

### api.DeviceOrientationEvent

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

### api.DeviceMotionEvent

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

### api.DeviceMotionEventAcceleration

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

### api.DeviceMotionEventRotationRate

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

같이 보기
-----

* web.dev의 디바이스의 방향 & 움직임
DocumentFragment
================

**`DocumentFragment`** 인터페이스는 아주 작고 부모를 갖지 않는 문서 객체를 나타냅니다.

`DocumentFragment`는 일반 문서처럼 노드로 구성된 문서 구조를 저장할 수 있으므로 `Document`의 가벼운 버전으로 사용됩니다. `Document`와의 중요한 차이점으로, `DocumentFragment`는 활성화된 문서 트리 구조의 일부가 아니기 때문에 내부의 트리를 변경해도 문서나 성능에 아무 영향도 주지 않으며 리플로우도 방지할 수 있습니다.

EventTarget

Node

(en-US)

DocumentFragment생성자
---

`DocumentFragment()` (en-US)

새로운 `DocumentFragment` 객체를 생성하여 반환합니다.

속성
--

부모인 `Node` (en-US)의 속성을 상속합니다.

`DocumentFragment.childElementCount` (en-US) 읽기 전용

`DocumentFragment`가 포함한 자식 `Element` (en-US)의 수를 반환합니다.

`DocumentFragment.children` (en-US) 읽기 전용

`DocumentFragment` 객체의 자식 `Element` (en-US)를 전부 포함하는 실시간 `HTMLCollection`을 반환합니다.

`DocumentFragment.firstElementChild` (en-US) 읽기 전용

`DocumentFragment` 객체의 첫번째 자식 `Element` (en-US)를 반환합니다. 자식이 없으면 `null`을 반환합니다.

`DocumentFragment.lastElementChild` (en-US) 읽기 전용

`DocumentFragment` 객체의 마지막 자식 `Element` (en-US)를 반환합니다. 자식이 없으면 `null`을 반환합니다.

메서드
---

부모인 `Node` (en-US)의 메서드를 상속합니다.

`DocumentFragment.append()` (en-US)

`DocumentFragment`의 마지막 자식 뒤에 `Node` (en-US) 객체들이나 문자열 객체들을 추가합니다.

`DocumentFragment.prepend()` (en-US)

`DocumentFragment`의 첫 번째 자식 앞에 `Node` (en-US) 객체들이나 문자열 객체들을 추가합니다.

`DocumentFragment.querySelector()` (en-US)

`DocumentFragment` 내에서, 주어진 선택자와 일치하는 첫 번째 `Element` (en-US) 노드를 반환합니다.

`DocumentFragment.querySelectorAll()` (en-US)

`DocumentFragment` 내에서, 주어진 선택자와 일치하는 모든 `Element` (en-US) 노드를 포함한 `NodeList`를 반환합니다.

`DocumentFragment.replaceChildren()` (en-US)

`DocumentFragment` 내의 자식 하나를 일련의 새로운 자식으로 대체합니다.

`DocumentFragment.getElementById()` (en-US)

`DocumentFragment` 내에서, 주어진 ID와 일치하는 첫 번째 `Element` (en-US) 노드를 반환합니다. `Document.getElementById()`와 기능적으로 동일합니다.

사용 일람
-----

`DocumentFragment`의 일반적인 용도는 그 안에 DOM 하위 트리를 조립한 다음, `Node` (en-US) 인터페이스의 `appendChild()`나 `insertBefore()` (en-US)와 같은 메서드로 DOM에 하위 트리를 삽입하는 것입니다. 이 방법을 사용하면 `DocumentFragment`의 노드들이 모두 DOM으로 이동하고 빈 `DocumentFragment`만 남게 됩니다. 이때 모든 노드가 한 번에 문서에 삽입되기 때문에 리플로우도 한 번만 발생합니다. 반면 노드를 각각 하나씩 삽입했다면, 최악의 경우 매 삽입마다 리플로우가 발생했을 겁니다.

`DocumentFragment`는 웹 컴포넌트에서도 유용하게 쓰입니다. 예컨대 `<template>` 요소의 `HTMLTemplateElement.content` (en-US) 속성이 `DocumentFragment`입니다.

`document.createDocumentFragment()` 메서드나 `DocumentFragment()` (en-US) 생성자를 사용해서 빈 `DocumentFragment`를 만들 수 있습니다.

예제
--

### HTML


```html
<ul id="list"></ul>
```

### JavaScript


```js
const list = document.querySelector("#list");
const fruits = ["Apple", "Orange", "Banana", "Melon"];

const fragment = new DocumentFragment();

fruits.forEach((fruit) => {
  const li = document.createElement("li");
  li.textContent = fruit;
  fragment.appendChild(li);
});

list.appendChild(fragment);
```

### 결과

명세
--

| Specification |
| --- |
| DOM Standard # interface-documentfragment |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
웹 소켓
====

웹 소켓은 사용자의 브라우저와 서버 사이의 인터액티브 통신 세션을 설정할 수 있게 하는 고급 기술입니다. 개발자는 웹 소켓 API를 통해 서버로 메시지를 보내고 서버의 응답을 위해 서버를 폴링하지 않고도 이벤트 중심 응답을 받는 것이 가능합니다.

인터페이스
-----

`WebSocket`

웹 소켓 서버로 연결하고 연결을 통해 데이터를 보내고 받는 기본 인터페이스<

`CloseEvent` (en-US)

연결이 종료 되었을 때 웹 소켓 객체에 의해 전달된 이벤트

`MessageEvent`

서버로 부터 메시지가 수신 되었을 때 웹 소켓 객체에 의해 전달된 이벤트

도구
--

* Socket.IO: Node.js를 위한 강력한 크로스 플랫폼 웹 소켓 API
* WebSocket-Node: Node.js를 위한 웹 소켓 서버 API 구현
* 더 많은 프레임워크, 라이브러리 보기
관련 주제
-----

* AJAX (en-US), JavaScript
`같이 보기`
-------

* RFC 6455 - 웹 소켓 프로토콜
* 웹 소켓 API 규격
* 서버로부터의 이벤트 (en-US)
* WebSocket.us - 웹 소켓에 대한 비영리 커뮤니티
브라우저 호환성
--------

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

**`DocumentType`** 인터페이스는 doctype을 포함하는 `Node` (en-US) 를 나타냅니다.

EventTarget

Node

(en-US)

DocumentType프로퍼티
----

*부모 `Node` (en-US) 로부터 프로퍼티를 상속받고 `ChildNode` 인터페이스를 구현합니다.*

`DocumentType.entities` 읽기 전용 
지원이 중단되었습니다

DTD에 선언된 엔티티의 `NamedNodeMap` (en-US) 입니다. 이 맵의 모든 노드는 `Entity` 인터페이스를 구현합니다.

`DocumentType.internalSubset` 읽기 전용 
지원이 중단되었습니다

내부 하위 집합의 `DOMString` 입니다. 하위 집합이 존재하지 않을 경우 `null`입니다. 예, `"<!ELEMENT foo (bar)>"`.

`DocumentType.name` (en-US) 읽기 전용

`DOMString` 입니다. 예, `<!DOCTYPE HTML>` 의 경우 `"html"`.

`DocumentType.notations` 읽기 전용 
지원이 중단되었습니다

DTD에 선언된 노테이션을 포함한 `NamedNodeMap` (en-US) 입니다. 이 맵의 모든 노드는 `Notation` 인터페이스를 구현합니다.

`DocumentType.publicId` (en-US) 읽기 전용

`DOMString` 입니다. 예, `"-//W3C//DTD HTML 4.01//EN"`, HTML5의 경우 빈 문자열.

`DocumentType.systemId` (en-US) 읽기 전용

`DOMString` 입니다. 예, `"http://www.w3.org/TR/html4/strict.dtd"`, HTML5의 경우 빈 문자열.

메소드
---

*부모 `Node` (en-US) 로부터 메소드를 상속받고 `ChildNode` 인터페이스를 구현합니다.*

`ChildNode.remove()` (en-US) 
Experimental

부모의 자식 리스트로부터 객체를 제거합니다.

명세
--

| Specification |
| --- |
| DOM Standard # interface-documenttype |

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

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

함께 보기
-----

* DOM 인터페이스 목차. (en-US)
* `Entity`
* `Notation`
Web NFC API
===========

**실험적:** **이 기능은 실험적인 기능입니다.**  
프로덕션 환경에서 사용하기 전에 브라우저 호환성 표를 주의 깊게 확인하세요.

Web NFC API를 사용하면, 경량 NFC 데이터 교환 형식(NDEF) 메시지를 통해 NFC 데이터를 교환할 수 있습니다.

**참고:** Web NFC와 함께 사용하기 위해서는 장치와 태그를 NDEF 레코드 형식을 지원하도록 포맷하고 기록해야 합니다. 저수준 작업은 현재 API에서 지원되지 않지만, 이러한 기능을 추가하는 API에 대한 공개 논의가 진행 중입니다.

인터페이스
-----

`NDEFMessage` (en-US)

`NDEFReader` 객체를 통해 호환 태그에서 수신하거나 호환 태그에 보낼 수 있는 NDEF 메시지를 나타내는 인터페이스입니다. 메시지는 메타데이터와 NDEF 레코드로 구성됩니다.

`NDEFReader` (en-US) 
Experimental

호환되는 NFC 태그에서 메시지를 읽고 쓸 수 있는 인터페이스입니다. 메시지는 `NDEFMessage` 객체로 표현됩니다.

`NDEFRecord` (en-US)

NDEF 메시지에 포함될 수 있는 NDEF 레코드를 나타내는 인터페이스입니다.

명세서
---

| Specification |
| --- |
| Web NFC API # the-ndefreader-object |

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

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

플러그 인 인터페이스는 브라우저 플러그 인에 대한 정보를 제공합니다.

**참고:** 플러그 인 개체의 고유 속성은 더 이상 최신 브라우저 버전에서 찾아볼 수 없습니다.

특성
--

| 이름 | 설명 | Return Type | 유용성 |
| --- | --- | --- | --- |
| `Plugin.description` | 플러그 인에 대한 읽기 쉬운 설명입니다. 읽기 전용입니다. | `DOMString` | DOM 0 |
| `Plugin.filename` | 플러그 인 파일의 파일 이름. 읽기 전용입니다. | `DOMString` | DOM 0 |
| `Plugin.name` | 플러그 인의 이름. 읽기 전용입니다. | `DOMString` | DOM 0 |
| `Plugin.version` | 플러그 인의 버전 번호 문자열. 읽기 전용입니다. | `DOMString` | Gecko browsers only (Firefox 4+) |

방법
--

`Plugin.item`

지원되는 유형의 목록에 인덱스 번호를 부여한 경우 지원되는 콘텐츠 유형의 MIME형식을 반환합니다.

`Plugin.namedItem`

지원되는 항목의 MIME유형을 반환합니다.
ClipboardEvent
==============

**실험적:** **이 기능은 실험적인 기능입니다.**  
프로덕션 환경에서 사용하기 전에 브라우저 호환성 표를 주의 깊게 확인하세요.

**`ClipboardEvent`** 인터페이스는 `cut`, `copy`, `paste` 이벤트처럼 클립보드 조작에 대한 정보를 제공하는 이벤트를 나타냅니다.

생성자
---

`ClipboardEvent()` (en-US)

주어진 매개변수로 `ClipboardEvent`를 생성합니다.

속성
--

`Event` 인터페이스의 속성을 상속합니다.

`ClipboardEvent.clipboardData` 읽기 전용

사용자가 실행한 `cut`, `copy`, `paste` 작업에서 영향을 받은 데이터를 담은 `DataTransfer` 객체입니다. 데이터의 MIME 유형도 포함합니다.

메서드
---

`Event` 인터페이스의 메서드를 상속합니다.

명세
--

| Specification |
| --- |
| Clipboard API and events # clipboard-event-interfaces |

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

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

같이 보기
-----

* 복사 관련 이벤트: `cut`, `copy`, `paste`
* Clipboard API
* Async Clipboard API 데모 (Glitch)
* web.dev의 Async Clipboard API
AbortSignal
===========

**실험적:** **이 기능은 실험적인 기능입니다.**  
프로덕션 환경에서 사용하기 전에 브라우저 호환성 표를 주의 깊게 확인하세요.

**`AbortSignal`** 인터페이스는 DOM 요청(Fetch와 같은)과 통신하고 필요한 경우 `AbortController` 객체를 통해 취소할 수 있게 해주는 신호 객체를 나타냅니다.

프로퍼티
----

*AbortSignal 인터페이스는 또한 부모 인터페이스 `EventTarget`으로부터 프로퍼티를 상속받습니다.*

`AbortSignal.aborted` 읽기 전용

신호가 통신하는 요청이 취소되었는지(`true`) 그렇지 않은지(`false`)를 나타내는 `Boolean`입니다.

이벤트
---

`addEventListener()`를 사용하거나 이 인터페이스의 `oneventname` 프로퍼티로 이벤트 리스너를 할당하여 이벤트를 리슨합니다.

`abort` (en-US)

신호가 통신하는 요청이 취소되었을 때 호출됩니다. `onabort` (en-US) 프로퍼티를 통해서도 사용이 가능합니다.

메소드
---

*AbortSignal 인터페이스는 부모인 `EventTarget`로부터 메소드를 상속받습니다.*

예제
--

다음 스니펫에서는 Fetch API를 사용해 비디오를 다운로드하는 것을 목표로 합니다.

먼저 `AbortController()` 생성자를 사용해 컨트롤러를 `AbortController.signal` 프로퍼티를 사용해 `AbortSignal` 객체와 관계된 참조를 얻습니다.

Fetch 요청을 시작할 때, 요청의 옵션 객체 내부에 `AbortSignal` 옵션을 전달합니다(아래의 `{signal}` 참고). 이것은 신호와 컨트롤러를 fetch 요청과 관계짓고, 아래의 두 번째 이벤트 리스너에서 보여주듯이 `AbortController.abort()`를 호출하여 이를 취소할 수 있게 합니다.


```js
var controller = new AbortController();
var signal = controller.signal;

var downloadBtn = document.querySelector('.download');
var abortBtn = document.querySelector('.abort');

downloadBtn.addEventListener('click', fetchVideo);

abortBtn.addEventListener('click', function() {
  controller.abort();
  console.log('Download aborted');
});

function fetchVideo() {
  ...
  fetch(url, {signal}).then(function(response) {
    ...
  }).catch(function(e) {
    reports.textContent = 'Download error: ' + e.message;
  })
}
```


**참고:** `abort()`가 호출되면, `fetch()` promise는 `AbortError`과 함께 reject됩니다.

**경고:** 현재 버전의 Firefox는 `DOMException`으로 promise를 reject합니다.

동작하는 완전한 예제는 GitHub에서 확인 할 수 있습니다 — abort-api 참고(라이브 실행도 확인할 수 있습니다).

명세
--

| Specification |
| --- |
| DOM Standard # interface-AbortSignal |

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

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

함께 보기
-----

* Fetch API
* Abortable Fetch by Jake Archibald