FileReader.readAsDataURL() - Web API

FileReader.readAsDataURL()
==========================

`readAsDataURL` 메서드는 컨텐츠를 특정 `Blob` 이나 `File`에서 읽어 오는 역할을 합니다. 읽어오는 read 행위가 종료되는 경우에, `readyState` (en-US) 의 상태가 `DONE`이 되며, `loadend (en-US)` 이벤트가 트리거 됩니다. 이와 함께, base64 인코딩 된 스트링 데이터가 `result` 속성(attribute)에 담아지게 됩니다.

문법
--

```js
instanceOfFileReader.readAsDataURL(blob);
```

### 파라미터

`blob`

읽고자 하는 `Blob` 또는 `File`.

예제
--

### HTML

```html
<input type="file" onchange="previewFile()" /><br />
<img src="" height="200" alt="이미지 미리보기..." />
```

### JavaScript

```js
function previewFile() {
  var preview = document.querySelector("img");
  var file = document.querySelector("input[type=file]").files[0];
  var reader = new FileReader();

  reader.addEventListener(
    "load",
    function () {
      preview.src = reader.result;
    },
    false,
  );

  if (file) {
    reader.readAsDataURL(file);
  }
}
```

### 실행 결과

복수의 파일 읽기 예제
------------

### HTML

```html
<input id="browse" type="file" onchange="previewFiles()" multiple />
<div id="preview"></div>
```

### JavaScript

```js
function previewFiles() {
  var preview = document.querySelector("#preview");
  var files = document.querySelector("input[type=file]").files;

  function readAndPreview(file) {
    // `file.name` 형태의 확장자 규칙에 주의하세요
    if (/\.(jpe?g|png|gif)$/i.test(file.name)) {
      var reader = new FileReader();

      reader.addEventListener(
        "load",
        function () {
          var image = new Image();
          image.height = 100;
          image.title = file.name;
          image.src = this.result;
          preview.appendChild(image);
        },
        false,
      );

      reader.readAsDataURL(file);
    }
  }

  if (files) {
    [].forEach.call(files, readAndPreview);
  }
}
```

**참고:**

`FileReader()` 생성자는 Internet Explorer 10 이전 버전에서는 지원하지 않는 기능입니다.

 정상적으로 지원하는 코드를 확인하기 위해서는 다음 링크를 참조하시기 바랍니다. crossbrowser possible solution for image preview.
 또는 this more powerful example.

명세
--

| Specification |
| --- |
| File API # readAsDataURL |

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

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

바깥 고리
-----

* `FileReader`


FileReader: loadend event - Web API

FileReader: loadend event
=========================

`loadend` 이벤트는 성공여부와 관계없이 파일읽기가 끝나면 실행됩니다.

|  |  |
| --- | --- |
| 버블링 | 해당없음 |
| 이벤트 취소가능 | 해당없음 |
| 인터페이스 | `ProgressEvent` (en-US) |
| 이벤트 핸들러 프로퍼티 | `FileReader.onloadend` |

예제
--

### Live example

#### HTML

```html
<div class="example">
  <div class="file-select">
    <label for="avatar">Choose a profile picture:</label>
    <input
 type="file"
 id="avatar"
 name="avatar"
 accept="image/png, image/jpeg" />
  </div>

  <img src="" class="preview" height="200" alt="Image preview..." />

  <div class="event-log">
    <label>Event log:</label>
    <textarea readonly class="event-log-contents"></textarea>
  </div>
</div>
```

```
img.preview {
  margin: 1rem 0;
}

.event-log-contents {
  width: 18rem;
  height: 5rem;
  border: 1px solid black;
  margin: 0.2rem;
  padding: 0.2rem;
}

.example {
  display: grid;
  grid-template-areas:
    "select log"
    "preview log";
}

.file-select {
  grid-area: select;
}

.preview {
  grid-area: preview;
}

.event-log {
  grid-area: log;
}

.event-log > label {
  display: block;
}

.event-log-contents {
  resize: none;
}
```

#### JS

```js
const fileInput = document.querySelector('input[type="file"]');
const preview = document.querySelector("img.preview");
const eventLog = document.querySelector(".event-log-contents");
const reader = new FileReader();

function handleEvent(event) {
  eventLog.textContent =
    eventLog.textContent + `${event.type}: ${event.loaded} bytes transferred\n`;

  if (event.type === "load") {
    preview.src = reader.result;
  }
}

function addListeners(reader) {
  reader.addEventListener("loadstart", handleEvent);
  reader.addEventListener("load", handleEvent);
  reader.addEventListener("loadend", handleEvent);
  reader.addEventListener("progress", handleEvent);
  reader.addEventListener("error", handleEvent);
  reader.addEventListener("abort", handleEvent);
}

function handleSelected(e) {
  eventLog.textContent = "";
  const selectedFile = fileInput.files[0];
  if (selectedFile) {
    addListeners(reader);
    reader.readAsDataURL(selectedFile);
  }
}

fileInput.addEventListener("change", handleSelected);
```

#### 결과

명세
--

| Specification |
| --- |
| File API # dfn-loadend-event |
| File API # dfn-onloadend |

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

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

See also
--------

* Related events: `loadstart` (en-US), `load` (en-US), `progress` (en-US), `error` (en-US), `abort` (en-US)


Request.credentials - Web API

Request.credentials
===================

`Request` 인터페이스의 **`credentials`** 읽기 전용 속성은 cross-origin 요청의 경우, user agent가 다른 도메인으로부터 cookie 들을 전달해야만 하는가 아닌가를 나타낸다. 이것은 XHR 의 withCredentials flag 과 비슷하지만, (2개가 아니라) 3가지 값이 사용 가능하다 :

* `omit`: 절대로 cookie 들을 전송하거나 받지 않는다.
* `same-origin`: URL이 호출 script 와 동일 출처(same origin)에 있다면, user credentials (cookies, basic http auth 등..)을 전송한다. **이것은 default 값이다.**
* `include`: cross-origin 호출이라 할지라도 언제나 user credentials (cookies, basic http auth 등..)을 전송한다.
Syntax
------

```js
var myCred = request.credentials;
```

### Value

이 transaction에 사용할 credentials 를 나타내는 `RequestCredentials` 값

Example
-------

다음의 snippet 에서, 우리는 `Request.Request()` constructor 를 사용하여 (스크립트와 동일한 디렉토리의 이미지 파일을 위한) 새로운 요청(request)를 생성하고, 변수에 요청(request) credentials 을 저장한다.

```js
var myRequest = new Request("flowers.jpg");
var myCred = myRequest.credentials; // returns "same-origin" by default
```

명세서
---

| Specification |
| --- |
| Fetch Standard # ref-for-dom-request-credentials② |

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

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

See also
--------

* ServiceWorker API (en-US)
* HTTP access control (CORS)
* HTTP


Request: cache 속성 - Web API

Request: cache 속성
=================

`Request` 인터페이스의 **`cache`** 읽기 전용 속성에는 요청의 캐시 모드가 포함되어 있습니다. 요청이 브라우저의 HTTP 캐싱과 상호 작용하는 방식을 제어합니다.

값
-

`RequestCache` 값입니다. 사용 가능한 값은 다음과 같습니다.

* `default` — 브라우저는 HTTP 캐시에서 일치하는 요청을 찾습니다.
    + 일치하는 항목이 있고 새 항목이면, 캐시에서 반환됩니다.
    + 일치하는 항목이 있지만 오래된 항목이면, 브라우저는 원격 서버에 조건부 요청을 합니다. 서버가 리소스가 변경되지 않았다고 표시하면, 캐시에서 리소스가 반환됩니다. 그렇지 않으면 리소스가 서버에서 다운로드되고 캐시가 업데이트됩니다.
    + 일치하는 항목이 없으면, 브라우저는 정상 요청을 하고 다운로드된 리소스로 캐시를 업데이트합니다.
* `no-store` - 브라우저는 캐시를 먼저 살펴보지 않고 원격 서버에서 리소스를 가져오며, 다운로드된 리소스로 캐시를 업데이트하지 않습니다.
* `reload` - 브라우저는 캐시를 먼저 살펴보지 않고 원격 서버에서 리소스를 가져오며, 그 다음으로 다운로드된 리소스로 캐시를 업데이트합니다.
* `no-cache` - 브라우저는 HTTP 캐시에서 일치하는 요청을 찾습니다.
    + 새 항목이든 오래된 항목이든 일치하는 항목이 있으면, 브라우저는 원격 서버에 조건부 요청을 보냅니다. 서버가 리소스가 변경되지 않았다고 표시하면, 캐시에서 리소스가 반환됩니다. 그렇지 않으면 리소스가 서버에서 다운로드되고 캐시가 업데이트됩니다.
    + 일치하는 항목이 없으면, 브라우저는 정상 요청을 하고 다운로드된 리소스로 캐시를 업데이트합니다.
* `force-cache` - 브라우저는 HTTP 캐시에서 일치하는 요청을 찾습니다.
    + 새 항목이든 오래된 항목이든 일치하는 항목이 있으면, 캐시에서 반환됩니다.
    + 일치하는 항목이 없으면, 브라우저는 정상 요청을 하고 다운로드된 리소스로 캐시를 업데이트합니다.
* `only-if-cached` — 브라우저는 HTTP 캐시에서 일치하는 요청을 찾습니다.
    + 새 항목이든 오래된 항목이든 일치하는 항목이 있으면, 캐시에서 반환됩니다.
    + 일치하는 항목이 없으면, 브라우저는 504 Gateway timeout 상태로 응답합니다.`"only-if-cached"` 모드는 요청 `mode` (en-US)가 `"same-origin"`인 경우에만 사용할 수 있습니다.
 캐시된 리다이렉션은 요청의 `redirect` 속성이 `"follow"`이고 리다이렉션이 `"same-origin"` 모드를 위반하지 않는 경우에만 허용됩니다.
예제
--

```js
// 캐시를 완전히 우회하기 위해 캐시 버스팅 기능이 있는 리소스를 다운로드합니다.
fetch("some.json", { cache: "no-store" }).then((response) => {
  /\* 응답 사용 \*/
});

// 캐시 버스팅 기능을 사용하여 리소스를 다운로드하지만, 다운로드된 리소스로 HTTP 캐시를 업데이트합니다.
fetch("some.json", { cache: "reload" }).then((response) => {
  /\* 응답 사용 \*/
});

// 올바른 ETag와 Date 헤더를 전송하고 If-Modified-Since와 If-None-Match 요청 헤더를 적절하게 처리하는 제대로 구성된 서버를 다룰 때 캐시 버스팅이 있는 리소스를 다운로드하면 유효성 검사에 의존하여 새로운 응답을 보장할 수 있습니다.
fetch("some.json", { cache: "no-cache" }).then((response) => {
  /\* 응답 사용 \*/
});

// 경제성을 염두에 둔 리소스를 다운로드합니다! 가능한 많은 대역폭을 절약하기 위해 오래되었지만 캐시된 응답을 선호합니다.
fetch("some.json", { cache: "force-cache" }).then((response) => {
  /\* 응답 사용 \*/
});

// 클라이언트 수준에서 stale-while-revalidate로 유지됩니다.
// 오래된 응답이라도 캐시된 응답을 선호하지만, 너무 오래된 경우 업데이트합니다.
// 더 나은 메모리 정리를 위해 AbortController와 signal를 사용합니다.
// 실제로 이것은 값을 변경해야 하므로 컨트롤러에 대한 경로와 참조를 취하는 함수가 될 것입니다.
let controller = new AbortController();
fetch("some.json", {
  cache: "only-if-cached",
  mode: "same-origin",
  signal: controller.signal,
})
  .catch((e) =>
    e instanceof TypeError && e.message === "Failed to fetch"
      ? { status: 504 } // 크롬에서의 해결 방법: TypeError로 실패
      : Promise.reject(e),
  )
  .then((res) => {
    if (res.status === 504) {
      controller.abort();
      controller = new AbortController();
      return fetch("some.json", {
        cache: "force-cache",
        mode: "same-origin",
        signal: controller.signal,
      });
    }
    const date = res.headers.get("date"),
      dt = date ? new Date(date).getTime() : 0;
    if (dt < Date.now() - 86\_400\_000) {
      // 24시간이 지난 경우
      controller.abort();
      controller = new AbortController();
      return fetch("some.json", {
        cache: "reload",
        mode: "same-origin",
        signal: controller.signal,
      });
    }

    // 기타 가능한 조건
    if (dt < Date.now() - 300\_000)
      // 5분 이상 지난 경우
      fetch("some.json", { cache: "no-cache", mode: "same-origin" }); // 취소 혹은 반환 값이 없습니다.
    return res;
  })
  .then((response) => {
    /\* (아마도 오래된) 응답 사용 \*/
  })
  .catch((error) => {
    /\* AbortError/DOMError 혹은 TypeError일 수 있습니다. \*/
  });
```

명세서
---

| Specification |
| --- |
| Fetch Standard # ref-for-dom-request-cache② |

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

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

같이 보기
-----

* ServiceWorker API
* 교차 출처 리소스 공유 (CORS)
* HTTP


Request() - Web API

Request()
=========

**`Request()`** 생성자는 새로운 `Request` 객체를 생성하도록 도와줍니다.

문법
--

```js
var myRequest = new Request(input, init);
```

### 파라미터

*input*

취득한 리소스를 정의합니다. 이하의 값을 파라미터로 넣을 수 있습니다.\* 취득하고 싶은 리소스의 URL을 담은 {domxref("USVString")}}.

* Request 객체의 클론 생성을 위해 입력할 `Request` 객체. 기존의 request 객체로 새로운 동일한 객체를 생성할때, 다음과 같은 보안에 관련된 예외가 검출될 수 있습니다.

*init* Optional

리퀘스트를 적용할 커스텀 설정을 포함한 옵션오브젝트. 설정 가능한 옵션은 다음과 같습니다.\* `method`: `GET`, `POST`과 같은 리퀘스트 메소드.

* `headers`: `Headers` (en-US)객체 또는 `ByteString` (en-US)를 포함하는 리퀘스트에 추가하는 헤더.
* `body`: 리퀘스트에 추가할 바디. `Blob`이나, `BufferSource`, `FormData`, `URLSearchParams`, `USVString`, 또한 `ReadableStream` 객체를 사용할 수 있습니다.Request객체가 GET이나 HEAD메서드를 사용하는 경우, 바디를 포함하지 않습니다.
* `mode`: Request에서 사용할 모드. `cors`, `no-cors`, `same-origin`, 또한 `navigate`이 사용 가능하며, 기본값은 `cors`입니다. 47버전 이전의 크롬에서는 기본값이 `no-cors` 이며 크롬 47버전 이후로 `same-origin`가 사용 가능하게 되었습니다.
* `credentials`: Request에서 사용할 자격 증명서(Request Credential)입니다.`omit`, `same-origin`, 또는 `include`를 사용할 수 있습니다.기본값은 `omit`.이며, 크롬 47 이전의 기본값은 `same-origin` 입니다. 크롬 47 이후로부터`include`가 사용 가능하게 되었습니다.
* `cache`: Request에서 사용할 cache mode 입니다.
* `redirect`: Request에서 사용할 리다이렉트 모드입니다. `follow`, `error`, `manual`.이 사용 가능합니다. 크롬 47 이전 버전에서의 기본값은 `manual` 이며, 47 이후로부터 `follow` 가 사용 가능하게 되었습니다.
* `referrer`: `no-referrer`나 `client`, URL을 지정하는 `USVString`입니다.. 기본값은 `client`입니다.
* `integrity`: `sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=`같은 Request의 하위 리소스 무결성(subresource integrity) 값을 포함합니다.

에러
--

| **타입** | **내용** |
| --- | --- |
| `TypeError` | Firefox 43 (en-US)부터, `http://user:password@example.com` 와 같인 credential을 포함하는 경우 `Request()` 는 타입 에러를 반환합니다. |

예시
--

Fetch Request example에서는, 생성자를 사용해 새로운 Requst 객체를 생성하고 나서 `GlobalFetch.fetch` (en-US)인터페이스를 이용해 Request로 읽어온 결과를 취득하고 있습니다. 특정 사진을 가져와서 사용할 수 있게 만들기 위해서 MIME타입을 설정하고, Response의 `Body.blob` (en-US)를 반환합니다. 그 후로 오브젝트 URL을 생성해 `<img>`요소를 표시하도록 합니다. Fetch Request live를 참고해주시기 바랍니다.

```js
var myImage = document.querySelector("img");

var myRequest = new Request("flowers.jpg");

fetch(myRequest)
  .then(function (response) {
    return response.blob();
  })
  .then(function (response) {
    var objectURL = URL.createObjectURL(response);
    myImage.src = objectURL;
  });
```

Fetch Request with init example에서는 fetch()를 실행할 때 마다, init객체를 전달하는 것 이외에는 거의 동일한 기능을 수행합니다. Fetch Request init live 를 참조해주시기 바랍니다.

```js
var myImage = document.querySelector('img');

var myHeaders = new Headers();
myHeaders.append('Content-Type', 'image/jpeg');

var myInit = { method: 'GET',
                headers: myHeaders,
                mode: 'cors',
                cache: 'default' };

var myRequest = new Request('flowers.jpg',myInit);

fetch(myRequest).then(function(response) {
  ...
});
```

동일한 효과를 얻기 위해 fetch 호출자에 init객체를 전달하는 것에 주목해주시기 바랍니다. 예를 들면...

```js
fetch(myRequest,myInit).then(function(response) {
  ...
});
```

Request 객체ㅡ이 클론을 생성하기 위해서 `Request()` 생성자에 `Request` 를 전달하고 있습니다.（이것은 `clone()` (en-US) 메서드의 호출자와 같습니다.）

```js
var copy = new Request(myRequest);
```

>
> **참고**：마지막의 예시는 ServiceWorkers (en-US)안에서만 사용 가능합니다。
>
>
>

명세서
---

| Specification |
| --- |
| Fetch Standard # ref-for-dom-request① |

브라우저 지원현황
---------

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

관련항목
----

* ServiceWorker API (en-US)
* HTTP access control (CORS)
* HTTP


RTCPeerConnectionIceEvent.candidate - Web API

RTCPeerConnectionIceEvent.candidate
===================================

`RTCPeerConnectionIceEvent` (en-US) 인터페이스의 candidate 속성은 읽기 전용입니다. 이 속성은 `RTCIceCandidate`와 관련된 이벤트를 반환합니다.

Syntax
------

```js
var candidate = event.candidate;
```

### 값

ICE candidate를 나타내는 `RTCIceCandidate` 객체. 해당 네고시에이션 세션에 대한 candidate가 더 이상 존재하지 않으면, `null`을 반환합니다.

예시
--

```js
pc.onicecandidate = function (ev) {
  alert(
    "The ICE candidate (transport address: '" +
      ev.candidate.candidate +
      "') has been added to this connection.",
  );
};
```

명세
--

| Specification |
| --- |
| WebRTC: Real-Time Communication in Browsers # dom-rtcpeerconnectioniceevent-candidate |

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

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

참조
--

* `icecandidate`
* `RTCPeerConnection` (en-US)


내비게이션 타이밍(Navigation Timing) - Web API

내비게이션 타이밍(Navigation Timing)
============================

**Navigation Timing API**는 웹 사이트의 성능을 측정하는 데 사용할 수 있는 데이터를 제공합니다. 같은 목적에 사용했던 다른 JavaScript 기반 메커니즘과 다르게 이 API는 더 유용하고 정확한 종단 간(end-to-end) 대기 시간(latency)을 제공할 수 있습니다.

다음 예제는 지각하는(perceived) 로딩 시간을 측정하는 법을 보여줍니다.

```js
function onLoad() {
  var now = new Date().getTime();
  var page_load_time = now - performance.timing.navigationStart;
  console.log("User-perceived page loading time: " + page_load_time);
}
```

`PerformanceTiming` (en-US) 인터페이스로 접근할 수 있는 밀리 초 단위로 주어진 측정된 이벤트가 많이 있습니다. 발생하는 순서로 된 이벤트 목록입니다.

* navigationStart
* unloadEventStart
* unloadEventEnd
* redirectStart
* redirectEnd
* fetchStart
* domainLookupStart
* domainLookupEnd
* connectStart
* connectEnd
* secureConnectionStart
* requestStart
* responseStart
* responseEnd
* domLoading
* domInteractive
* domContentLoadedEventStart
* domContentLoadedEventEnd
* domComplete
* loadEventStart
* loadEventEnd

`window.performance.navigation` 객체는 리다이렉트(redirect), 앞/뒤 버튼, 혹은 보통의 URL 로딩이 어떤 페이지 로드를 일으키는지(trigger) 아는 데 사용할 수 있는 두 속성을 저장합니다.

window.performance.navigation.type:

| 상수 | 값 | 설명 |
| --- | --- | --- |
| `TYPE_NAVIGATENEXT` | 0 | 아래 목록의 TYPE\_RELOAD과 TYPE\_BACK\_FORWARD가 사용하는 것 외에, 링크 클릭하기, 사용자 에이전트(UA) 주소 바에 URL 입력하기, 폼 전송, 스크립트 연산으로 초기화하기로 시작한 내비게이션. |
| `TYPE_RELOAD` | 1 | 리로드(reload) 연산 혹은 location.reload() 메소드를 통한 내비게이션. |
| `TYPE_BACK_FORWARD` | 2 | 히스토리 순회(traversal) 연산을 통한 내비게이션 |
| `TYPE_UNDEFINED` | 255 | 위 값으로 정의되지 않는 어떠한 내비게이션 타입. |

`window.performance.navigation.redirectCount`는 마지막 페이지에 도달할 때까지, 만일 있다면 몇 번의 리다이렉션이 일어났는지를 나타냅니다.

Navigation Timing API는 XHR로 서버에 보낸 클라이언트 쪽 성능 데이터를 모을 뿐 아니라 이전 페이지 언로드(unload) 시간, 도메인 룩업(look up) 시간, window.onload 전체 시간 등 다른 방법으로 측정하기 매우 어려운 데이터를 측정하는 데 사용할 수 있습니다.

### 예제

어떤 페이지를 로딩하는 데 필요한 전체 시간 계산하기.

```js
var perfData = window.performance.timing;
var pageLoadTime = perfData.loadEventEnd - perfData.navigationStart;
```

요청 응답 시간 계산하기.

```js
var connectTime = perfData.responseEnd - perfData.requestStart;
```

### 링크

* Test Page
* http://w3c-test.org/webperf/specs/NavigationTiming/
* http://www.w3.org/TR/navigation-timing/


Document.doctype - Web API

Document.doctype
================

현재 document와 연관된 DTD(Document Type Declaration)를 반환합니다. 반환된 object는 `DocumentType` 인터페이스를 구현합니다. `DocumentType` 을 작성하려면 `DOMImplementation.createDocumentType()` (en-US)를 사용합니다.

Syntax
------

```js
doctype = document.doctype;
```

* doctype은 읽기만 가능한 property입니다.
Example
-------

```js
var doctypeObj = document.doctype;

console.log(
  "doctypeObj.name: " +
    doctypeObj.name +
    "\n" +
    "doctypeObj.internalSubset: " +
    doctypeObj.internalSubset +
    "\n" +
    "doctypeObj.publicId: " +
    doctypeObj.publicId +
    "\n" +
    "doctypeObj.systemId: " +
    doctypeObj.systemId,
);
```

Notes
-----

현재 document와 연관된 DTD가 없으면, 이 property는 null을 반환합니다.

DOM level 2는 document type 선언 편집을 지원하지 않습니다. (read-only)

명세서
---

| Specification |
| --- |
| DOM Standard # ref-for-dom-document-doctype① |


Document.createTreeWalker() - Web API

Document.createTreeWalker()
===========================

**`Document.createTreeWalker()`** 메소드는 새로운 `TreeWalker` 객체를 반환합니다.

구문
--

```js
document.createTreeWalker(root, whatToShow[, filter[, entityReferenceExpansion]]);
```

### 매개변수

`root`

이 `TreeWalker` 순회의 루트 `Node` (en-US)이다. 이것은 보통 이 문서 소유의 한 엘리먼트이다.

`whatToShow` Optional

`NodeFilter`의 상수 프라퍼티들을 조합하여 만든 비트마스크를 나타내는 선택적인 `unsigned long` 이다. 이것은 특정 유형의 노드를 필터링하는 편리한 방법이다. 기본값은 `SHOW_ALL` 상수를 나타내는 `0xFFFFFFFF`이다.

| 상수 | 숫자 값 | 설명 |
| --- | --- | --- |
| `NodeFilter.SHOW_ALL` | `-1` (`unsigned long의 최대 값`) | Shows all nodes. |
| `NodeFilter.SHOW_ATTRIBUTE`
지원이 중단되었습니다
 | `2` | Shows attribute `Attr` nodes. This is meaningful only when creating a `TreeWalker` with an `Attr` node as its root; in this case, it means that the attribute node will appear in the first position of the iteration or traversal. Since attributes are never children of other nodes, they do not appear when traversing over the document tree. |
| `NodeFilter.SHOW_CDATA_SECTION`
지원이 중단되었습니다
 | `8` | Shows `CDATASection` (en-US) nodes. |
| `NodeFilter.SHOW_COMMENT` | `128` | Shows `Comment` nodes. |
| `NodeFilter.SHOW_DOCUMENT` | `256` | Shows `Document` nodes. |
| `NodeFilter.SHOW_DOCUMENT_FRAGMENT` | `1024` | Shows `DocumentFragment` nodes. |
| `NodeFilter.SHOW_DOCUMENT_TYPE` | `512` | Shows `DocumentType` nodes. |
| `NodeFilter.SHOW_ELEMENT` | `1` | Shows `Element` (en-US) nodes. |
| `NodeFilter.SHOW_ENTITY`
지원이 중단되었습니다
 | `32` | Shows `Entity` nodes. This is meaningful only when creating a `TreeWalker` with an `Entity` node as its root; in this case, it means that the `Entity` node will appear in the first position of the traversal. Since entities are not part of the document tree, they do not appear when traversing over the document tree. |
| `NodeFilter.SHOW_ENTITY_REFERENCE`
지원이 중단되었습니다
 | `16` | Shows `EntityReference` nodes. |
| `NodeFilter.SHOW_NOTATION`
지원이 중단되었습니다
 | `2048` | Shows `Notation` nodes. This is meaningful only when creating a `TreeWalker` with a `Notation` node as its root; in this case, it means that the `Notation` node will appear in the first position of the traversal. Since entities are not part of the document tree, they do not appear when traversing over the document tree. |
| `NodeFilter.SHOW_PROCESSING_INSTRUCTION` | `64` | Shows `ProcessingInstruction` (en-US) nodes. |
| `NodeFilter.SHOW_TEXT` | `4` | Shows `Text` nodes. |

`filter` Optional

선택적인 `NodeFilter` (en-US)이다. `TreeWalker`가 `whatToShow` 체크를 통과한 노드의 승인여부를 판단하기 위해 호출하는 `acceptNode` 메소드를 가진 객체이다.

`entityReferenceExpansion` Optional
지원이 중단되었습니다

한 `EntityReference`를 버릴 때 그 전체 하위 트리를 같이 버려야하는지를 나타내는 `Boolean` 플래그이다.

### 반환 값

새로운 `TreeWalker` 객체.

예제
--

다음 예제는 body의 모든 노드들을 순회하고, 노드의 집합을 엘리먼트로 줄이고, 단순히 각 노드를 승인하고 (대신 `acceptNode()` 메소드에서 그 집합을 줄일 수도 있다), 노드들(지금은 모두 엘리먼트지만)을 전진하기 위해 생성된 트리 워커 반복자를 이용하여 배열에 푸시한다.

```js
var treeWalker = document.createTreeWalker(
  document.body,
  NodeFilter.SHOW\_ELEMENT,
  {
    acceptNode: function (node) {
      return NodeFilter.FILTER\_ACCEPT;
    },
  },
  false,
);

var nodeList = [];

while (treeWalker.nextNode()) nodeList.push(treeWalker.currentNode);
```

명세
--

| Specification |
| --- |
| DOM Standard # dom-document-createtreewalker |

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

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

참고
--

* 생성하는 객체의 인터페이스: `TreeWalker`.
* createTreeWalker on MSDN


Document.head - Web API

Document.head
=============

`Document` 인터페이스의 **`head`** 읽기 전용 속성은 현재 문서의 `<head>` 요소를 나타냅니다.

예제
--

```html
<!doctype html>
<head id="my-document-head">
  <title>Example: using document.head</title>
</head>

<script>
 let theHead = document.head;

 console.log(theHead.id); // "my-document-head";
 console.log(theHead === document.querySelector("head")); // true
</script>
```

참고
--

`Document.head`는 읽기 전용입니다. 값을 할당하려고 시도하면 조용히 실패하거나, 엄격 모드에서는 `TypeError`가 발생합니다.

명세
--

| Specification |
| --- |
| HTML Standard # dom-document-head-dev |

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

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

같이 보기
-----

* `document.body`


Document.URL - Web API

Document.URL
============

`Document` 인터페이스의 **`URL`** 읽기 전용 속성은 문서의 주소를 문자열로 반환합니다.

예제
--

### JavaScript

```js
document.getElementById("url").textContent = document.URL;
```

### HTML

```html
<p id="urlText">
  URL:<br />
  <span id="url">URL이 여기 보입니다</span>
</p>
```

### 결과

명세
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-document-url① |

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

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

같이 보기
-----

* `HTMLDocument`


Document.documentURI - Web API

Document.documentURI
====================

`Document` 인터페이스의 **`documentURI`** 속성은 document location 을 string 으로 반환합니다.

DOM3 에서 원래 이 속성은 읽기/쓰기 속성으로 정의되어 있습니다. DOM4 명세에서는 읽기 전용입니다.

Syntax
------

```js
var string = document.documentURI;
```

Notes
-----

HTML documents 는 동일한 값을 반환하는 `document.URL` 속성을 가집니다. `URL` 과는 달리, `documentURI` 는 모든 타입의 documents 에서 이용 가능합니다.

명세서
---

| Specification |
| --- |
| DOM Standard # ref-for-dom-document-documenturi① |

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

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


Document.domain - Web API

Document.domain
===============

`Document` 인터페이스의 **`domain`** 속성은 동일 출처 정책에서 사용하는 현재 문서의 출처에서 도메인 부분을 설정하거나 가져옵니다.

`domain` 속성을 성공적으로 설정하면 출처의 포트를 `null`로 설정합니다.

구문
--

```js
const domainString = document.domain;
document.domain = domainString;
```

### 값

현재 문서 출처의 도메인 부분.

### 예외

`SecurityError`

다음 상황에서 `domain`을 변경하려 시도한 경우.\* 샌드박스 설정된 `<iframe>` (en-US) 요소에 속한 문서

* 브라우징 맥락이 없는 문서
* 문서의 유효 도메인이 `null`
* 주어진 값이 문서의 유효 도메인과 같지 않거나, 등록 가능한 도메인 접미사가 아닌 경우
* `document-domain` (en-US) `Feature-Policy` (en-US) 헤더가 설정된 경우

예제
--

### 도메인 가져오기

`http://developer.mozilla.org/ko/docs/Web` 주소에서, 다음 코드는 `currentDomain` 변수에 "`developer.mozilla.org`" 문자열을 할당합니다.

```js
const currentDomain = document.domain;
```

### 창 닫기

어느 문서, 예컨대 `www.example.xxx/good.html` 등이 `www.example.com`의 도메인을 가지고 있을 때, 다음 예제는 창을 닫으려 시도합니다.

```js
const badDomain = "www.example.xxx";

if (document.domain == badDomain) {
  // 예시에 불과 (window.close()는 아무것도 하지 않을 수도 있음)
  window.close();
}
```

명세
--

| Specification |
| --- |
| HTML Standard # relaxing-the-same-origin-restriction |

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

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

같이 보기
-----

* 동일 출처 정책


Document.getElementsByTagName() - Web API

Document.getElementsByTagName()
===============================

`Document` 인터페이스의 **`getElementsByTagName`** 메소드는 엘리먼트의 `HTMLCollection` 과 주어진 태그명을 반환합니다. 루트 노드를 포함해 전체 다큐먼트를 대상으로 검색됩니다. 반환된 `HTMLCollection` 은 살아있는데, 이는 `document.getElementsByTagName()` 을 다시 호출하지 않아도 자동으로 업데이트하여 DOM 트리와 동기화된 상태를 유지함을 의미합니다.
구문
--

```js
var elements = document.getElementsByTagName(name);
```

* *elements* 는 트리에 나타난 순서대로 발견된 살아있는 `HTMLCollection` 입니다(하지만 아래 노트를 보세요).
* *name* 은 엘리먼트의 이름을 나타내는 문자열입니다. 특수 문자 "\*" 은 모든 엘리먼트를 나타냅니다.

**참고:** 최신 W3C 명세에서는 *elements* 가 `HTMLCollection` 라고 하지만, WebKit 브라우저에서는 `NodeList` 를 반환합니다. 자세한 내용은 Firefox bug 14869 버그를 확인하시기 바랍니다.

예시
--

다음 예시에서, `getElementsByTagName()` 는 특정 부모 엘리먼트에서 시작해 그 부모 엘리먼트의 DOM 을 거쳐 위에서 아래로 재귀 탐색을하고, 태그 `name` 파라미터에 일치하는 모든 자손 엘리먼트의 집합을 생성합니다. 여기에서는 `document.getElementsByTagName()` 과 기능적으로 동일하며 DOM 트리의 특정 엘리먼트를 시작으로하여 탐색하는 `Element.getElementsByTagName()` 모두를 시연합니다.

버튼 클릭은 `getElementsByTagName()` 을 사용해 특정 부모의 자손 문단(p) 엘리먼트를 셉니다(다큐먼트 자체 또는 중첩된 `<div>` (en-US) 엘리먼트 중 하나).

```html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>getElementsByTagName example</title>
    <script>
 function getAllParaElems() {
 var allParas = document.getElementsByTagName("p");
 var num = allParas.length;
 alert("There are " + num + " paragraph in this document");
 }

 function div1ParaElems() {
 var div1 = document.getElementById("div1");
 var div1Paras = div1.getElementsByTagName("p");
 var num = div1Paras.length;
 alert("There are " + num + " paragraph in #div1");
 }

 function div2ParaElems() {
 var div2 = document.getElementById("div2");
 var div2Paras = div2.getElementsByTagName("p");
 var num = div2Paras.length;
 alert("There are " + num + " paragraph in #div2");
 }
 </script>
  </head>
  <body style="border: solid green 3px">
    <p>Some outer text</p>
    <p>Some outer text</p>

    <div id="div1" style="border: solid blue 3px">
      <p>Some div1 text</p>
      <p>Some div1 text</p>
      <p>Some div1 text</p>

      <div id="div2" style="border: solid red 3px">
        <p>Some div2 text</p>
        <p>Some div2 text</p>
      </div>
    </div>

    <p>Some outer text</p>
    <p>Some outer text</p>

    <button onclick="getAllParaElems();">show all p elements in document</button
 ><br />

    <button onclick="div1ParaElems();">
      show all p elements in div1 element</button
 ><br />

    <button onclick="div2ParaElems();">
      show all p elements in div2 element
    </button>
  </body>
</html>
```

노트
--

HTML 다큐먼트에서 호출될 때, getElementsByTagName() 은 처리전에 인수를 소문자로 변환합니다. 이는 HTML 다큐먼트의 하위 트리에 속한 낙타 표기법의 SVG 엘리먼트를 찾으려할 때 바람직하지 않습니다. 그런 경우에는 `document.getElementsByTagNameNS()` 가 유용합니다.Firefox bug 499656 버그도 확인하시기 바랍니다.

`document.getElementsByTagName()` 은 전체 다큐먼트를 포함하여 탐색한다는 점만 제외하고 `Element.getElementsByTagName()` 와 유사합니다.

명세
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-document-getelementsbytagname① |

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

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

함께 보기
-----

* `Element.getElementsByTagName()`
* `document.getElementById()` 는 `id` 로 엘리먼트의 참조를 반환합니다
* `document.getElementsByName()` (en-US) 은 `name` 으로 엘리먼트의 참조를 반환합니다
* `document.querySelector()` 는 `'div.myclass'` 같은 쿼리를 사용할 수 있는 강력한 셀렉터입니다.


Document.getElementsByTagNameNS() - Web API

Document.getElementsByTagNameNS()
=================================

주어진 네임스페이스에 속하는 태그명을 갖는 엘리먼트의 목록을 반환합니다. 루트 노드를 포함해 전체 다큐먼트를 대상으로 탐색합니다.

구문
--

```js
elements = document.getElementsByTagNameNS(namespace, name);
```

* *elements* 는 트리에 나타난 순서로 발견된 살아있는 `NodeList` 입니다(하지만 아래를 확인하세요).
* *namespace* 는 탐색하기 위한 엘리먼트의 네임스페이스 URI 입니다(`element.namespaceURI` (en-US)) 를 확인하세요).
* *name 은 탐색할 엘리먼트의 로컬명 또는 모든 엘리먼트에 일치하는 특별 값 `*` 입니다*(`element.localName` (en-US) 를 확인하세요).

**참고:** **노트:** W3C 명세는 `elements` 를 `NodeList` 라고 하였지만, Gecko 와 Internet Explorer 에서는 `HTMLCollection` 을 반환합니다. Opera 는`NodeList` 를 반환하지만 `namedItem` 메소드를 구현해 `HTMLCollection` 과 유사하게 만듭니다. 2012 년 1월 기준으로, WebKit 브라우저만 순수한 `NodeList` 를 반환합니다. 자세한 내용은 bug 14869 를 확인하세요.

**참고:** **노트:** 현재 이 메소드의 파라미터는 대소문자를 구분하지만, Firefox 3.5 와 그 이전에는 그렇지 않았습니다. 자세한 내용은 Firefox 3.6 개발자 릴리즈 노트 (en-US)와 `Element.getElementsByTagNameNS` (en-US) 의 브라우저 호환성 섹션을 확인하세요.

예시
--

다음 예시에서 `getElementsByTagNameNS` 는 특정 부모 노트로부터 시작하고 위에서 아래로 해당 DOM 의 부모노드를 재귀적으로 탐색하여 태그 `name` 파라미터에 일치하는 자식 엘리먼트를 찾습니다.

`getElementByTagName` 이 실행된 노드가 `document` 노드가 아닐 때, `element.getElementsByTagNameNS` (en-US) 메소드가 사용됨을 유의하세요.

다음 예시를 사용하려면, .xhtml 확장의 새 파일로 복사/붙여넣기 하세요.

```html
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>getElementsByTagNameNS example</title>

    <script type="text/javascript">
 function getAllParaElems() {
 var allParas = document.getElementsByTagNameNS(
 "http://www.w3.org/1999/xhtml",
 "p",
 );

 var num = allParas.length;

 alert("There are " + num + " <p> elements in this document");
 }

 function div1ParaElems() {
 var div1 = document.getElementById("div1");
 var div1Paras = div1.getElementsByTagNameNS(
 "http://www.w3.org/1999/xhtml",
 "p",
 );

 var num = div1Paras.length;

 alert("There are " + num + " <p> elements in div1 element");
 }

 function div2ParaElems() {
 var div2 = document.getElementById("div2");
 var div2Paras = div2.getElementsByTagNameNS(
 "http://www.w3.org/1999/xhtml",
 "p",
 );

 var num = div2Paras.length;

 alert("There are " + num + " <p> elements in div2 element");
 }
 </script>
  </head>

  <body style="border: solid green 3px">
    <p>Some outer text</p>
    <p>Some outer text</p>

    <div id="div1" style="border: solid blue 3px">
      <p>Some div1 text</p>
      <p>Some div1 text</p>
      <p>Some div1 text</p>

      <div id="div2" style="border: solid red 3px">
        <p>Some div2 text</p>
        <p>Some div2 text</p>
      </div>
    </div>

    <p>Some outer text</p>
    <p>Some outer text</p>

    <button onclick="getAllParaElems();">show all p elements in document</button
 ><br />

    <button onclick="div1ParaElems();">
      show all p elements in div1 element</button
 ><br />

    <button onclick="div2ParaElems();">
      show all p elements in div2 element
    </button>
  </body>
</html>
```

지원하지 않는 다른 브라우저를 위한 잠재적인 대안
---------------------------

원하는 브라우저가 XPath 를 지원하지 않는다면, 원하는 로컬명과 네임스페이스를 갖는 모든 태그를 찾기 위한 다른 접근법(모든 자식을 거쳐 DOM 을 횡단, 모든 @xmlns 인스턴스 식별 등)이 필요하지만, XPath 가 훨씬 빠릅니다(Explorer 에 적용하려면, 아래의 함수에서 XPath 대신 이 래퍼 클래스같은 XPath 래퍼를 호출할 수 있습니다(Explorer 는 다른 API 로 XPath 를 지원합니다).)

```js
function getElementsByTagNameNSWrapper(ns, elName, doc, context) {
  if (!doc) {
    doc = document;
  }
  if (!context) {
    context = doc;
  }

  var result = doc.evaluate(
    '//\*[local-name()="' + elName + '" and namespace-uri() = "' + ns + '"]',
    context,
    null,
    XPathResult.ORDERED\_NODE\_SNAPSHOT\_TYPE,
    null,
  );

  var a = [];
  for (var i = 0; i < result.snapshotLength; i++) {
    a[i] = result.snapshotItem(i);
  }
  return a;
}
```

명세
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-document-getelementsbytagnamens① |

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

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

함께 보기
-----

* `Element.getElementsByTagNameNS()` (en-US)


Document.importNode() - Web API

Document.importNode()
=====================

설명
--

현재 문서가 아닌 외부 문서의 노드를 복사하여 현재 문서에 넣을 수 있도록 해줍니다.

문법
--

```js
var node = document.importNode(externalNode, deep);
```

`node`

문서에 추가될 새로운 노드입니다. 새로운 노드가 문서 트리에 추가되기 전까지, 새로운 노드의 parentNode (en-US)는 null입니다.

`externalNode`

다른 문서에서 가져올 노드입니다.

`deep`

불리언 타입을 가지며, 다른 문서에서 노드를 가져올 때 노드의 자식 요소들을 포함하여 가져올 것인지에 대한 여부를 결정합니다.

예제
--

```js
var iframe = document.getElementsByTagName("iframe")[0];
var oldNode = iframe.contentDocument.getElementById("myNode");
var newNode = document.importNode(oldNode, true);
document.getElementById("container").appendChild(newNode);
```

Notes
-----

오리지널 노드는 오리지널 문서에서 삭제되지 않습니다. 추가된 노드는 오리지널 노드의 복사본입니다.

Nodes from external documents should be cloned using `document.importNode()` (or adopted using `document.adoptNode()`) before they can be inserted into the current document. For more on the `Node.ownerDocument` issues, see the W3C DOM FAQ.

Firefox doesn't currently enforce this rule (it did for a while during the development of Firefox 3, but too many sites break when this rule is enforced). We encourage Web developers to fix their code to follow this rule for improved future compatibility.

명세서
---

| Specification |
| --- |
| DOM Standard # ref-for-dom-document-importnode① |

브라우저 지원율
--------

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

참고
--

* `document.adoptNode()`


Document: readystatechange event - Web API

Document: readystatechange event
================================

**`readystatechange`** 이벤트는 현재 페이지의 `readyState` 속성값이 변할 때 발생한다.

| Bubbles | No |
| --- | --- |
| Cancelable | No |
| Interface | `Event` |
| Event handler property | `onreadystatechange` |

Examples
--------

### Live example

#### HTML

```html
<div class="controls">
  <button id="reload" type="button">Reload</button>
</div>

<div class="event-log">
  <label>Event log:</label>
  <textarea readonly class="event-log-contents" rows="8" cols="30"></textarea>
</div>
```

```
body {
  display: grid;
  grid-template-areas: "control log";
}

.controls {
  grid-area: control;
  display: flex;
  align-items: center;
  justify-content: center;
}

.event-log {
  grid-area: log;
}

.event-log-contents {
  resize: none;
}

label,
button {
  display: block;
}

#reload {
  height: 2rem;
}
```

#### JS

```js
const log = document.querySelector(".event-log-contents");
const reload = document.querySelector("#reload");

reload.addEventListener("click", () => {
  log.textContent = "";
  window.setTimeout(() => {
    window.location.reload(true);
  }, 200);
});

window.addEventListener("load", (event) => {
  log.textContent = log.textContent + "load\n";
});

document.addEventListener("readystatechange", (event) => {
  log.textContent = log.textContent + `readystate: ${document.readyState}\n`;
});

document.addEventListener("DOMContentLoaded", (event) => {
  log.textContent = log.textContent + `DOMContentLoaded\n`;
});
```

#### Result

명세서
---

| Specification |
| --- |
| HTML Standard # event-readystatechange |

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

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

See also
--------

* Related events: `DOMContentLoaded`, `load`, `beforeunload`, `unload`


Document: startViewTransition() 메서드 - Web API

Document: startViewTransition() 메서드
===================================

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

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

View Transitions API의 **`startViewTransition()`** 메서드는 새로운 뷰 전환을 시작하고 이를 나타내는 `ViewTransition` (en-US) 객체를 반환합니다.

`startViewTransition()`이 호출되면 뷰 전환 과정에 설명된 대로 일련의 단계를 따릅니다.

구문
--

```js
startViewTransition(callback)
```

### 매개변수

`callback`

일반적으로 뷰 전환 과정 중에 DOM을 업데이트하기 위해 호출되는 콜백 함수로, `Promise`를 반환합니다. 콜백은 API가 현재 페이지의 스크린샷을 찍으면 호출됩니다. 콜백에 의해 반환된 프로미스가 충족되면 다음 프레임에서 뷰 전환을 시작합니다. 콜백에 의해 반환된 프로미스가 거부되면 전환이 중단됩니다.

### 반환 값

`ViewTransition` (en-US) 객체 인스턴스입니다.

예제
--

### 기본 사용법

기본 뷰 전환 데모에서 `updateView()` 함수는 View Transitions API를 지원하는 브라우저와 지원하지 않는 브라우저 모두 처리합니다. 지원 브라우저에서는 반환 값에 대한 걱정없이 `startViewTransition()`을 호출하여 뷰 전환 과정을 설정합니다.

```js
function updateView(event) {
  // 이벤트가 <a> 태그에서 실행되는지, <img> 태그에서 실행하는지에 따라 차이를 처리합니다.
  let targetIdentifier;
  if (event.target.firstChild === null) {
    targetIdentifier = event.target;
  } else {
    targetIdentifier = event.target.firstChild;
  }

  const displayNewImage = () => {
    const mainSrc = `${targetIdentifier.src.split("\_th.jpg")[0]}.jpg`;
    galleryImg.src = mainSrc;
    galleryCaption.textContent = targetIdentifier.alt;
  };

  // 뷰 전환을 지원하지 않는 브라우저를 위한 폴백입니다.
  if (!document.startViewTransition) {
    displayNewImage();
    return;
  }

  // 뷰 전환을 사용합니다.
  const transition = document.startViewTransition(() => displayNewImage());
}
```

명세서
---

| Specification |
| --- |
| CSS View Transitions Module Level 1 # dom-document-startviewtransition |

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

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

같이 보기
-----

* Smooth and simple transitions with the View Transitions API


Document.readyState - Web API

Document.readyState
===================

**`Document.readyState`** 속성을 통해 `document`의 로딩 상태를 확인할 수 있다.

Document.readyState 속성 값이 바뀔 때 `readystatechange` 이벤트가 `document`에서 일어난다.

Syntax
------

```js
var string = document.readyState;
```

### Values

`document의 readyState` 상태는 아래 3가지가 될 수 있다.

`loading`

`document` 로딩 중.

`interactive`

문서의 로딩은 끝이 나고 해석 중 이지만 images, stylesheets, frames과 같은 하위 자원들은 로딩되고 있는 상태이다.

`complete`

문서와 모든 하위 자원들의 로드가 완료된 상태이다. 이 상태는 `load` 이벤트가 발생되기 직전 상태이다.

Examples
--------

### Different states of readiness

```js
switch (document.readyState) {
  case "loading":
    // The document is still loading.
    break;
  case "interactive":
    // The document has finished loading. We can now access the DOM elements.
    // But sub-resources such as images, stylesheets and frames are still loading.
    var span = document.createElement("span");
    span.textContent = "A <span> element.";
    document.body.appendChild(span);
    break;
  case "complete":
    // The page is fully loaded.
    console.log(
      "The first CSS rule is: " + document.styleSheets[0].cssRules[0].cssText,
    );
    break;
}
```

### readystatechange as an alternative to DOMContentLoaded event

```js
// Alternative to DOMContentLoaded event
document.onreadystatechange = function () {
  if (document.readyState === "interactive") {
    initApplication();
  }
};
```

### readystatechange as an alternative to load event

```js
// Alternative to load event
document.onreadystatechange = function () {
  if (document.readyState === "complete") {
    initApplication();
  }
};
```

### readystatechange as event listener to insert or modify the DOM before DOMContentLoaded

```js
document.addEventListener("readystatechange", (event) => {
  if (event.target.readyState === "interactive") {
    initLoader();
  } else if (event.target.readyState === "complete") {
    initApp();
  }
});
```

명세서
---

| Specification |
| --- |
| HTML Standard # current-document-readiness |

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

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

같이 보기
-----

* 관련 이벤트
    + `readystatechange`
    + `DOMContentLoaded`
    + `load`


Document.createElement() - Web API

Document.createElement()
========================

HTML 문서에서, **`Document.createElement()`** 메서드는 지정한 `tagName`의 HTML 요소를 만들어 반환합니다. `tagName`을 인식할 수 없으면 `HTMLUnknownElement` (en-US)를 대신 반환합니다.

구문
--

```js
let element = document.createElement(tagName[, options]);
```

### 매개변수

`tagName`

생성할 요소의 유형을 가리키는 문자열.

`options` Optional

`is` 속성 하나를 가진 `ElementCreationOptions` 객체. 속성의 값은 `customElements.define()`을 사용해 정의한 사용자 정의 요소입니다.

### 반환 값

새로운 `Element` (en-US).

예제
--

아래 예제는 새로운 `<div>` 엘리먼트를 생성한 후, ID가 "div1" 인 요소 이전에 추가합니다.

#### HTML

```html
<!doctype html>
<html>
  <head>
    <title>||Working with elements||</title>
  </head>
  <body>
    <div id="div1">위의 텍스트는 동적으로 추가했습니다.</div>
  </body>
</html>
```

#### JavaScript

```js
document.body.onload = addElement;

function addElement() {
  // create a new div element
  var newDiv = document.createElement("div");
  // and give it some content
  var newContent = document.createTextNode("환영합니다!");
  // add the text node to the newly created div
  newDiv.appendChild(newContent);

  // add the newly created element and its content into the DOM
  var currentDiv = document.getElementById("div1");
  document.body.insertBefore(newDiv, currentDiv);
}
```

명세
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-document-createelement① |

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

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

같이 보기
-----

* `Node.removeChild()` (en-US)
* `Node.replaceChild()`
* `Node.appendChild()`
* `Node.insertBefore()` (en-US)
* `Node.hasChildNodes()`
* `document.createElementNS()` (en-US) — to explicitly specify the namespace URI for the element.


Document.links - Web API

Document.links
==============

`links` 속성은 document 내에서 href attribute 를 가지는 모든 `<area>` 과 `<a>` element 들의 collection 을 반환한다.

Syntax
------

```js
nodeList = document.links;
```

Example
-------

```js
var links = document.links;
for (var i = 0; i < links.length; i++) {
  var linkHref = document.createTextNode(links[i].href);
  var lineBreak = document.createElement("br");
  document.body.appendChild(linkHref);
  document.body.appendChild(lineBreak);
}
```

명세서
---

| Specification |
| --- |
| HTML Standard # dom-document-links-dev |

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

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


document.applets - Web API

document.applets
================

**지원이 중단되었습니다:** This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

요약
--

`applets` document 내의 정렬된 애플릿 목록을 리턴합니다.

문법
--

```js
nodeList = document.applets;
```

예제
--

```js
// ( 여러분이 원하는 두 번째 애플릿을 알고 있을 때 )
my_java_app = document.applets[1];
```

명세서
---

| Specification |
| --- |
| HTML Standard # dom-document-applets |

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

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


Document.embeds - Web API

Document.embeds
===============

### Summary

`embeds` 는 현재 document 에 embed되어 있는 OBJECT 들의 list 를 반환합니다.

### Syntax

```js
nodeList = document.embeds;
```

### 명세서

| Specification |
| --- |
| HTML Standard # dom-document-embeds-dev |


Document.timeline - Web API

Document.timeline
=================

Baseline 2022
-------------

Newly availableSince September 2022, 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
`Document` 인터페이스의 `timeline` 읽기 전용 속성은 현재 문서의 기본 타임라인을 나타냅니다. 이 타임라인은 `DocumentTimeline` (en-US)의 특수 인스턴스입니다.

이 타임라인은 각각의 `document` 마다 고유하며 `Document.open()` 호출 또한 포함하는 문서의 생명주기 동안 유지됩니다.

 이 타임라인은 `Performance.timeOrigin` (en-US) 이후 시간을 밀리초 단위로 연산합니다.
 원점 이전의 시간은 타임라인에서 고려하지 않으며 이 경우 `currentTime`은 `null`입니다.

**참고:** 문서 타임라인은 비활성 문서 (`Document` 가 `Window`, `<iframe>` (en-US), 혹은 `<frame>` (en-US) 과 연결되지 않은 문서)일 경우 비활성화 됩니다.

값
-

`DocumentTimeline` (en-US) 객체.

명세서
---

| Specification |
| --- |
| Web Animations # dom-document-timeline |

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

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

같이보기
----

* 웹 애니메이션 API
* `AnimationTimeline` (en-US)
* `AnimationTimeline.currentTime`
* `DocumentTimeline` (en-US)


Document.referrer - Web API

Document.referrer
=================

링크를 통해 현재 페이지로 이동 시킨, 전 페이지의 URI 정보를 반환.Syntax
------

```js
string = document.referrer;
```

Notes
-----

페이지로 바로 접근하였을 경우 이 값은 빈 문자열을 반환함.(링크를 통해서 온것이 아닌, 예를 들면, 북마크를 통해서 이동했을 경우). 문자열만을 반환하기 때문에, 참조 페이지(referring page)에 대한 DOM 액세스가 제공되지 않음.

Specification
-------------

* DOM Level 2: referrer


Document: paste 이벤트 - Web API

Document: paste 이벤트
===================

**`paste`** 이벤트는 사용자가 브라우저의 사용자 인터페이스를 통해 붙여넣기를 했을 때 발생합니다.

|  |  |
| --- | --- |
| 버블링 | 예 |
| 취소 가능 | 예 |
| 인터페이스 | `ClipboardEvent` |
| 이벤트 처리기 속성 | `onpaste` (en-US) |

`paste` 이벤트의 원 대상은 붙여넣기 동작의 대상인 `Element` (en-US)입니다. `Document`에서 수신할 경우 캡처 또는 버블링 단계의 이벤트를 받게 됩니다. 이벤트에 대한 자세한 정보는 Element: paste 이벤트에서 확인하세요.

예제
--

```js
document.addEventListener("paste", (event) => {
  console.log("붙여넣기 동작 실행");
});
```

명세
--

| Specification |
| --- |
| Clipboard API and events # clipboard-event-paste |
| HTML Standard # handler-onpaste |

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

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

같이 보기
-----

* 관련 이벤트: `copy`, `cut`
* `Element` (en-US)를 대상으로 한 같은 이벤트: `paste`
* `Window`를 대상으로 한 같은 이벤트: `paste`


Document.getSelection() - Web API

Document.getSelection()
=======================

이 메소드는 `Window.getSelection()` 와 동일합니다. 이 메소드는 `Selection` (en-US) 형의 객체를 반환하는데, 이 객체는 현재 페이지에서 선택된 영역의 정보를 반영합니다.


document.anchors - Web API

document.anchors
================

**지원이 중단되었습니다:** This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

`Document` 인터페이스의 **`anchors`** 읽기 전용 속성은 문서 내의 모든 앵커 목록을 반환합니다.

예제
--

```js
if (document.anchors.length >= 5) {
  dump("dump found too many anchors");
  window.location = "http://www.google.com";
}
```

알아두기
----

이전 버전과의 호환성을 제공하기 위해, 반환된 anchor들의 목록은 `name` 속성(attribute)으로 생성된 anchors들만 포함하고 `id` 속성(attribute)으로 생성된 것들은 포함하지 않습니다.

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

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


Document.visibilityState - Web API

Document.visibilityState
========================

**`Document.visibilityState`** 읽기 전용 property로, 이 element가 현재 표시된 컨텍스트를 나타내는 `document`의 가시성을 반환합니다. document가 background 또는 보이지 않는 탭(다른 탭)에 있는지, 또는 pre-rendering을 위해 로드 된 것인지를 아는 것은 유용합니다. 가능한 값은 다음과 같습니다.

* `'visible'` : 페이지 내용은 적어도 부분적으로 보일 수 있습니다. 실제로 이는 페이지가 최소화 되지 않은 창(브라우저)에서의 선택된 탭 을 의미 합니다.
* `'hidden`' : 페이지 내용은 사용자에게 표시되지 않습니다. 실제로 이는 document가 background-tap(다른 탭)이거나, 최소화 된 창의 일부이거나, OS 화면 잠금이 활성 상태임을 의미합니다.

이 property의 값이 변경되면 `visibilitychange` 이벤트가 `Document`로 전송됩니다.

일반적으로 document pre-rendering 시에 일부 assets의 다운로드를 막을 수 있습니다(역:초기 로딩 속도 향상). document가 백그라운드에 있거나 최소화 된 상태에서 일부 작업을 중지 할 수 있습니다(역:대표적으로 interval). 브라우저를 참고하십시오.

예제
--

```js
document.addEventListener("visibilitychange", () => {
  console.log(document.visibilityState);
  // 기타 동작...
});
```

명세서
---

| Specification |
| --- |
| HTML Standard # dom-document-visibilitystate |

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

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


Document.createRange() - Web API

Document.createRange()
======================

새 `Range` 객체를 리턴합니다.

문법
--

```js
range = document.createRange();
```

`range` 는 생성된 `Range` 객체입니다.

예제
--

```js
var range = document.createRange();

range.setStart(startNode, startOffset);
range.setEnd(endNode, endOffset);
```

노트
--

Range 객체의 대부분의 메소드들은 Range 객체가 생성 된 후, 바운더리 포인트를 지정해야 사용할 수 있습니다.

명세
--

| Specification |
| --- |
| DOM Standard # dom-document-createrange |


Document.images - Web API

Document.images
===============

`document.images` 는 현재 HTML document 내부의 images (en-US) collection을 반환합니다.

Syntax
------

```js
var htmlCollection = document.images;
```

Example
-------

```js
var ilist = document.images;

for (var i = 0; i < ilist.length; i++) {
  if (ilist[i].src == "banner.gif") {
    // found the banner
  }
}
```

Notes
-----

`document.images.length` – 페이지의 이미지 갯수를 반환하는 속성

`document.images` 는 DOM HTML의 part이며, HTML documents 에서만 지원된다.

명세서
---

| Specification |
| --- |
| HTML Standard # dom-document-images-dev |


Document.adoptNode() - Web API

Document.adoptNode()
====================

외부 문서로부터 노드를 가져온다. 해당 노드와 그 하위트리는 기존의 문서에서 지워지고 해당 노드의 `ownerDocument` (en-US) 는 현재 문서로 바뀐다. 그리고 그 노드는 현재의 문서에 삽입된다.

문법
--

```js
node = document.adoptNode(externalNode);
```

`node`

는 현재 문서에 삽입될 노드를 의미. 아직 해당 문서에 삽입되기 전이기 때문에 새로운 노드의 `parentNode` (en-US)는 `null` 이다.

`externalNode`

는 노드를 가져오기 위한 외부 문서에 있는 노드를 의미.

예제
--

{{todo}}알아두기
----

보통 `adoptNode` 호출은 다른 방식으로 구현된 곳에서 노드를 불러오기 때문에 실패하는 경우가 많다. 하지만 브라우저로 인한 문제인 경우는 문제가 된다.

 Nodes from external documents should be cloned using `document.importNode()` (or adopted using `document.adoptNode()`) before they
 can be inserted into the current document. For more on the `Node.ownerDocument` issues, see the
 W3C DOM FAQ.

 Firefox doesn't currently enforce this rule (it did for a while during the development of Firefox 3, but too many
 sites break when this rule is enforced). We encourage Web developers to fix their code to follow this rule for
 improved future compatibility.

명세
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-document-adoptnode① |

더 보기
----

* document.importNode (en-US)


Document.querySelector() - Web API

Document.querySelector()
========================

**`Document.querySelector()`** 는 제공한 선택자 또는 선택자 뭉치와 일치하는 문서 내 첫 번째 `Element` (en-US)를 반환합니다. 일치하는 요소가 없으면 `null`을 반환합니다.

**참고:** 탐색은 깊이우선depth-first 전위pre-order순회로, 문서의 첫 번째 요소부터 시작해 자식 노드의 수를 기준으로 순회합니다.

구문
--

```js
document.querySelector(selectors);
```

### 매개변수

`selectors`

하나 이상의 선택자를 포함한 `DOMString`. 유효한 CSS 선택자여야만 하며 아닐 경우 `SYNTAX_ERR` 예외가 발생합니다. 선택자로 DOM 요소 선택하기 문서를 참고해 선택자와 선택자 작성 방법을 더 알아보세요.

**참고:** CSS 표준 구문이 포함하는 문자가 아닌 경우 역슬래시(`\`)로 이스케이프해야 합니다.

JavaScript 또한 역슬래시로 이스케이프를 하기 때문에 특히 주의를 기울여야 합니다. 자세한 내용은 특수 문자 이스케이프 항목을 참고하세요.

### 반환값

제공한 CSS 선택자를 만족하는 첫 번째 `Element` (en-US) 객체. 결과가 없다면 `null`.

선택자를 만족하는 모든 요소의 목록이 필요하다면 `querySelectorAll()`을 대신 사용하세요.

### 예외

`SYNTAX_ERR`

`selectors`의 구문이 유효하지 않음.

참고
--

만약 `selector`가 ID 선택자인데, 해당 ID를 잘못 사용하여 문서 내에 여러 번 사용했으면 첫 번째로 그 ID를 사용한 요소를 반환합니다.

CSS 의사 요소는 선택자 API가 명시한 대로 어떠한 요소도 반환하지 않습니다.

### 특수 문자 이스케이프

CSS 구문을 따르지 않는, 예컨대 콜론이나 공백을 포함한 선택자나 ID를 사용해야 하면 반드시 백슬래시("`\`")를 사용해 해당 문자를 이스케이프해야 합니다. 백슬래시는 JavaScript의 이스케이프 문자이기 때문에, 백슬래시를 문자로 입력하려면 반드시 두 번 이스케이프해야 합니다. 한 번은 JavaScript 문자열에 필요하고, 또 다른 한 번은 `querySelector()`에 필요합니다.

```html
<div id="foo\bar"></div>
<div id="foo:bar"></div>

<script>
 console.log("#foo\bar"); // "#fooar" ('\b'는 백스페이스 컨트롤 문자)
 document.querySelector("#foo\bar"); // 일치하는 요소 없음

 console.log("#foo\\bar"); // "#foo\bar"
 console.log("#foo\\\\bar"); // "#foo\\bar"
 document.querySelector("#foo\\bar"); // 첫 번째 <div>

 document.querySelector("#foo:bar"); // 일치하는 요소 없음
 document.querySelector("#foo\\:bar"); // 두 번째 <div>
</script>
```

예제
--

### 클래스를 만족하는 첫 번째 요소 검색

아래 예제는 문서에서 "`myclass`"라는 클래스를 사용하는 첫 번째 요소를 반환합니다.

```js
var el = document.querySelector(".myclass");
```

### 좀 더 복잡한 선택자

아래 예제처럼 정말 강력한 선택자도 사용할 수 있습니다. 예제의 결과는 클래스가 "`user-panel main`"인 `<div>` (en-US)(`<div class="user-panel main">`) 안의, 이름이 "`login`"인 `<input>` (en-US) 중 첫 번째 요소입니다.

```js
var el = document.querySelector("div.user-panel.main input[name=login]");
```

명세
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-parentnode-queryselector① |

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

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

더 보기
----

* 선택자로 DOM 요소 선택하기
* `element.querySelector()` (en-US)
* `document.querySelectorAll()`
* `element.querySelectorAll()` (en-US)


scroll - Web API

scroll
======

document view 나 element가 스크롤 될 때, **`scroll`** 이벤트가 발생합니다.

개요
--

| 인터페이스 | `UIEvent` |
| --- | --- |
| 버블 | element에는 없지만, document에서 실행될 때 버블링이 발생합니다. |
| 취소가능여부 | 불가 |
| 타겟 | DefaultView, `Document`, `Element` (en-US) |
| 기본 액션 | 없음 |

속성
--

| 속성 | 타입 | 설명 |
| --- | --- | --- |
| `target` 읽기 전용 | `EventTarget` | 이벤트 대상 (DOM 트리의 최상위 타겟) |
| `type` 읽기 전용 | `DOMString` | 이벤트의 타입 |
| `bubbles` 읽기 전용 | `Boolean` | 이벤트가 버블이 되는지 |
| `cancelable` 읽기 전용 | `Boolean` | 이벤트 취소가 가능한지 |
| `view` 읽기 전용 | `WindowProxy` | `Document.defaultView` (document의 `window`) |
| `detail` 읽기 전용 | `long` (`float`) | `0`. |

예제
--

### 스크롤 이벤트의 조절

`scroll` 이벤트가 빠른 속도로 실행될 수 있기 때문에, 이벤트 핸들러는 DOM 수정과 같이 느린 작업을 실행하지 말아야 합니다. 대신, 다음을 사용하여 이벤트를 제한하는 것을 권장합니다.
 `requestAnimationFrame()`, `setTimeout()`, 혹은, `CustomEvent`

그러나 입력 이벤트와 애니메이션 프레임은 거의 동일한 속도로 실행되므로 아래 최적화는 종종 불필요합니다. 다음은 `requestAnimationFrame`에 대한 `scroll`이벤트를 최적화하는 예제입니다.

```js
// 참조: http://www.html5rocks.com/en/tutorials/speed/animations/

let last_known_scroll_position = 0;
let ticking = false;

function doSomething(scroll\_pos) {
  // scroll 위치에 대한 작업을 하세요
}

window.addEventListener("scroll", function (e) {
  last_known_scroll_position = window.scrollY;

  if (!ticking) {
    window.requestAnimationFrame(function () {
      doSomething(last_known_scroll_position);
      ticking = false;
    });

    ticking = true;
  }
});
```

명세서
---

| Specification |
| --- |
| CSSOM View Module # eventdef-document-scroll |
| HTML Standard # handler-onscroll |

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

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

같이 보기
-----

* Document: `scrollend` event (en-US)
* Element: `scroll` event (en-US)
* Element: `scrollend` event (en-US)


Document.characterSet - Web API

Document.characterSet
=====================

**`Document.characterSet`** 읽기 전용 속성은 현재 문서가 렌더링에 사용하는 문자 인코딩을 반환합니다.

**참고:** `Document.charset`과 `Document.inputEncoding` 속성은 `Document.characterSet`의 이전 별칭입니다. 더 이상 사용지 마세요.

예제
--

```html
<button onclick="console.log(document.characterSet);">
  콘솔에 인코딩 출력
</button>
<!-- "ISO-8859-1"이나 "UTF-8" 등, 문서의 캐릭터 셋 기록 -->
```

명세서
---

| Specification |
| --- |
| DOM Standard # ref-for-dom-document-characterset① |

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

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


Document.hasFocus() - Web API

Document.hasFocus()
===================

**`Document.hasFocus()`** 메소드는 문서 또는 문서 내의 요소(element) 중 어느 하나라도 포커스(focus)를 갖고 있으면 `true`, 그렇지 않으면 `false` 인 `Boolean` 값을 반환한다. 이 메소드를 사용하여 문서내 활성화된(active) 요소가 포커스를 갖고 있는지 판단할 수 있다.

**참고:** 문서를 볼 때, 포커스를 가진 요소는 언제나 문서상의 활성화된 요소이다. 반면에 활성화된 요소는 꼭 포커스를 갖지 않을 수 도 있다. 예를 들면 전면에 나와있지 않은(not a foreground) 팝업창 내의 활성화된 요소는 포커스를 갖고 있지 않다.

구문
--

```js
focused = document.hasFocus();
```

### 반환 값

문서 내의 활성화된 요소가 포커스를 갖고 있지 않으면 `false`를 반환, 포커스를 갖고 있다면 `true`를 반환

예제
--

```html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>TEST</title>
    <style>
 #message {
 font-weight: bold;
 }
 </style>

    <script>
 setInterval(CheckPageFocus, 200);

 function CheckPageFocus() {
 var info = document.getElementById("message");

 if (document.hasFocus()) {
 info.innerHTML = "The document has the focus.";
 } else {
 info.innerHTML = "The document doesn't have the focus.";
 }
 }

 function OpenWindow() {
 window.open(
 "http://developer.mozilla.org/",
 "mozdev",
 (width = 640),
 (height = 300),
 (left = 150),
 (top = 260),
 );
 }
 </script>
  </head>

  <body>
    <h1>JavaScript hasFocus example</h1>
    <div id="message">Waiting for user action</div>
    <div><button onclick="OpenWindow()">Open a new window</button></div>
  </body>
</html>
```

명세
--

| Specification |
| --- |
| HTML Standard # dom-document-hasfocus-dev |

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

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

관련 참고
-----

* 페이지 가시성 API 사용하기 (en-US)


Document: copy 이벤트 - Web API

Document: copy 이벤트
==================

**`copy`** 이벤트는 사용자가 브라우저의 사용자 인터페이스를 통해 복사했을 때 발생합니다.

|  |  |
| --- | --- |
| 버블링 | 예 |
| 취소 가능 | 예 |
| 인터페이스 | `ClipboardEvent` |
| 이벤트 처리기 속성 | `oncopy` (en-US) |

`copy` 이벤트의 원 대상은 복사 동작의 대상인 `Element` (en-US)입니다. `Document`에서 수신할 경우 캡처 또는 버블링 단계의 이벤트를 받게 됩니다. 이벤트에 대한 자세한 정보는 Element: copy 이벤트에서 확인하세요.

예제
--

```js
document.addEventListener("copy", (event) => {
  console.log("복사 동작 실행");
});
```

명세
--

| Specification |
| --- |
| Clipboard API and events # clipboard-event-copy |
| HTML Standard # handler-oncopy |

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

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

같이 보기
-----

* 관련 이벤트: `cut`, `paste`
* `Element` (en-US)를 대상으로 한 같은 이벤트: `copy`
* `Window`를 대상으로 한 같은 이벤트: `copy`


DocumentOrShadowRoot.activeElement - Web API

DocumentOrShadowRoot.activeElement
==================================

`Document`와 `ShadowRoot` (en-US) 인터페이스의 **`activeElement`** 읽기 전용 속성은 DOM과 섀도우 DOM 내에서 현재 포커스를 받은 `Element` (en-US) 객체를 반환합니다. 이 속성은 `DocumentOrShadowRoot` 믹스인에서 상속받습니다.

`activeElement` 접근 시점에 텍스트를 블록 선택하고 있는 경우 해당하는 `<input>` (en-US)이나 `<textarea>` (en-US) 객체를 반환하는데, 그러면 그 객체의 `selectionStart`와 `selectionEnd` 메서드를 사용해 선택에 대한 더 자세한 정보를 알아낼 수 있습니다. 포커스가 자주 가는 다른 경우로는 `<select>` (en-US) 요소나 `type`이 `"button"`, `"checkbox"`, `"radio"`인 `<input>` (en-US) 요소가 있습니다.

보통 사용자는 포커스 가능한 요소를 Tab 키를 사용해 탐색할 수 있고, 스페이스 바를 사용해 활성화(버튼을 누르거나 라디오 버튼을 켜는 등)할 수 있습니다. 포커스 가능한 요소는 현재 플랫폼과 브라우저 설정에 따라 다릅니다. 가령 macOS의 경우, 기본값에서는 텍스트 입력 칸이 아니면 보통 포커스 할 수 없습니다.

**참고:** 포커스(사용자의 입력 이벤트를 받는 요소)와 선택(문서 내에서 강조하고 있는 부분)은 다릅니다. 현재 선택 영역은 `window.getSelection()`을 사용해 가져올 수 있습니다.

구문
--

```js
element = DocumentOrShadowRoot.activeElement;
```

### 값

포커스를 갖고 있는 `Element` (en-US). 그런 요소가 없으면 `<body>` 또는 `null`.

예제
--

### HTML

```html
<p>아래 두 영역에서 텍스트를 선택해보세요.</p>

<form>
  <textarea name="ta-example-one" id="ta-example-one" rows="7" cols="40">
텍스트 영역 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt, lorem a porttitor molestie, odio nibh iaculis libero, et accumsan nunc orci eu dui.</textarea
 >
  <textarea name="ta-example-two" id="ta-example-two" rows="7" cols="40">
텍스트 영역 2. Fusce ullamcorper, nisl ac porttitor adipiscing, urna orci egestas libero, ut accumsan orci lacus laoreet diam. Morbi sed euismod diam.</textarea
 >
</form>

<p>활성화된 요소 ID: <b id="output-element"></b></p>
<p>선택한 텍스트: <b id="output-text"></b></p>
```

### JavaScript

```js
function onMouseUp(e) {
  const activeTextarea = document.activeElement;
  const selection = activeTextarea.value.substring(
    activeTextarea.selectionStart,
    activeTextarea.selectionEnd,
  );

  const outputElement = document.getElementById("output-element");
  const outputText = document.getElementById("output-text");
  outputElement.innerHTML = activeTextarea.id;
  outputText.innerHTML = selection;
}

const textarea1 = document.getElementById("ta-example-one");
const textarea2 = document.getElementById("ta-example-two");
textarea1.addEventListener("mouseup", onMouseUp, false);
textarea2.addEventListener("mouseup", onMouseUp, false);
```

### 결과

명세서
---

| Specification |
| --- |
| HTML Standard # dom-documentorshadowroot-activeelement-dev |

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

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


Event.createEvent() - Web API

Event.createEvent()
===================

새로운 event를 생성합니다, 새로 만들어진 event는 반드시 자신의 init() method를 호출함으로써 초기화되어야만 합니다.

### Syntax

```js
document.createEvent(type);
```

`type`

A string indicating the event type to create.

이 method는 명시된 타입인 새로운 DOM `Event` 객체를 반환하며 이는 반드시 사용 전에 초기화되어야만 합니다.

### Example

```js
var newEvent = document.createEvent("UIEvents");
```

### Specification

* DOM Level 2 Events


Document.createTextNode() - Web API

Document.createTextNode()
=========================

### 요약

텍스트 노드를 생성합니다.

### 문법

```js
텍스트 = document.createTextNode(데이터);
```

### 매개변수

* `텍스트` 생성된 텍스트 노드입니다.
* `데이터` 텍스트 노드에 쓰여지는 문자열입니다.
### 예제

```html
<html>
  <head>
    <title>createTextNode 예제</title>

    <script type="text/javascript">
 function addTextNode() {
 var newtext = document.createTextNode(" 동적으로 추가되는 텍스트. ");
 var para = document.getElementById("p1");
 para.appendChild(newtext);
 }
 </script>
  </head>

  <body>
    <div style="border: 1px solid red">
      <p id="p1">단락의 첫번째 줄.<br /></p>
    </div>
    <br />

    <button onclick="addTextNode();">TextNode 추가하기.</button>
  </body>
</html>
```

### 규약

createTextNode


Document.execCommand() - Web API

Document.execCommand()
======================

**지원이 중단되었습니다:** This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

HTML 문서가 `designMode`로 전환되면 문서에서 `execCommand` 메서드를 사용할 수 있게 되는데 이것을 이용해서 문서의 편집 가능한 영역을 변경할 수 있습니다. 대부분의 명령어는 문서의 선택 영역에 영향(*볼드, 이탤릭 등*)을 미치고 나머지는 새 요소를 추가(링크 추가)하거나 전체 줄에 영향(들여쓰기)을 미칩니다. `contentEditable`을 사용할 때에 `execCommand()`를 호출하면 현재 활성화된 편집 요소에 영향을 미칩니다.

문법
--

```js
bool = document.execCommand(aCommandName, aShowDefaultUI, aValueArgument);
```

### 반환값

명령어가 지원되지 않거나 활성화되어 있지 않으면 `false` `Boolean` 값을 반환합니다.

### 매개 변수

`aCommandName`

실행해야할 명령어 이름 `DOMString`을 나타냅니다. 사용 가능한 명령어 목록은 Commands를 참고하세요.

`aShowDefaultUI`

기본 사용자 UI가 나타나야하는지를 보여주는 `Boolean` 값입니다. Mozilla에서는 구현되어 있지 않습니다.

`aValueArgument`

입력 변수가 필요한 명령어(`insertImage`와 같이 삽입할 이미지의 URL이 필요한)의 경우 이 `DOMString`으로 정보를 전달합니다. 변수가 필요하지 않으면 `null`을 표기합니다.

### 명령어

`backColor`

문서의 배경색을 변경합니다. `styleWithCss` 모드에서는 대신 상위 요소의 배경색에 영향을 미칩니다. 변수 값으로 `<color>` 값을 넘겨야 합니다. Internet Explorer는 이 명령어를 텍스트 배경색을 변경하는데 사용합니다.

`bold`

선택 영역이나 입력 위치에 볼드를 온/오프합니다. Internet Explorer는 `<b>` 대신 `<strong>` (en-US) 태그를 사용합니다.

`contentReadOnly`

내용 문서를 읽기 전용으로 하거나 편집 가능하게 합니다. boolean true/false 값을 변수로 넘겨주어야 합니다. (Internet Explorer는 지원하지 않습니다.)

`copy`

클립보드에 현재 선택 영역의 내용을 복사합니다. 브라우저마다 이 기능이 활성화되는 조건이 다르고 계속해서 변경됩니다. 상황에 따라서 이 기능을 사용할 수 있을지 호환성 표를 참고하세요.

`createLink`

선택 영역이 있을 때 선택 영역에 링크 요소를 만듭니다. 변수 값으로 HREF URI 문자열이 필요합니다. URI는 최소 한글자 이상이어야 하고 공백문자여도 됩니다. (Internet Explorer는 null URI 값으로 링크를 생성합니다.)

`cut`

현재 선택 영역을 잘라내어서 클립보드에 복사합니다. 브라우저마다 이 기능이 활성화되는 조건이 다르고 계속해서 변경됩니다. 상황에 따라서 이 기능을 사용할 수 있을지 호환성 표를 참고하세요.

`decreaseFontSize`

선택 영역이나 입력 위치에 `<small>` 태그를 추가합니다. (Internet Explorer는 지원하지 않습니다.)

`delete`

현재 선택 영역을 지웁니다.

`enableInlineTableEditing`

표의 행과 열을 추가 삭제하는 명령 도구를 활성화하거나 비활성화합니다. (Internet Explorer는 지원하지 않습니다.)

`enableObjectResizing`

이미지나 다른 크기 조정이 가능한 객체의 크기 조정 도구를 활성화하거나 비활성화합니다.

`fontName`

선택 영역이나 입력 위치의 서체 이름을 변경합니다. 변수 값으로 서체 이름 문자열(`예를 드러 "Arial"`)을 넘겨야 합니다.

`fontSize`

선택 영역이나 입력 위치의 서체 크기를 변경합니다. 변수 값으로 HTML 서체 크기(`1`-`7`)을 넘겨야 합니다.

`foreColor`

선택 영역이나 입력 위치의 서체 색상을 변경합니다. 변수 값으로 색상 값 문자열을 넘겨야 합니다.

`formatBlock`

현재 선택 영역이 있는 줄을 포함하는 HTML 요소를 추가하고 줄을 포함하는 요소가 있을 경우 요소을 변경합니다(Firefox에서는 BLOCKQUOTE가 예외적으로 상위 요소를 감쌉니다). 변수 값으로 태그 이름 문자열을 넘겨야 합니다. 실질적으로 모든 블록 요소를 사용할 수 있습니다(예 "H1", "P", "DL", "BLOCKQUOTE"). (Internet Explorer는 제목 태그 H1 - H6와 ADDRESS, PRE만 지원하고 태그 구분자 < >를 써서 "<H1>"와 같이 사용해야 합니다.)

`forwardDelete`

커서 위치 앞의 글자를 지웁니다. delete 키를 누른 것과 동일합니다.

`heading`

선택 영역이나 입력 위치 줄에 제목 태그를 추가합니다. 변수 값으로 제목 이름 문자열(예 "H1", "H6")을 넘겨야 합니다. (Internet Explorer와 Safari는 지원하지 않습니다.)

`hiliteColor`

선택 영역이나 입력 위치의 배경 색상을 변경합니다. 변수 값으로 생상 값 문자열을 넘겨야 합니다. 이 함수는 UseCSS가 반드시 켜져 있어야 합니다. (Internet Explorer는 지원하지 않습니다.)

`increaseFontSize`

선택 영역이나 입력 위치에 BIG 태그를 추가합니다. (Internet Explorer는 지원하지 않습니다.)

`indent`

선택 영역이나 입력 위치를 포함하는 줄을 들여쓰기 합니다. Firefox에서는 선택 영역이 여러줄에 걸처 서로 다른 들여쓰기 값을 가지고 있으면 제일 조금 들여쓰기된 줄만 들여쓰기가 됩니다.

`insertBrOnReturn`

엔터키를 눌렀을 때 br 태그를 넣을지 현재의 블록 요소를 두개로 나줄지 제어합니다. (Internet Explorer는 지원하지 않습니다.)

`insertHorizontalRule`

입력 위치에 가로줄을 넣습니다(선택 영역은 지워집니다).

`insertHTML`

입력 위치에 HTML 문자열을 넣습니다(선택 영역을 지워집니다). 변수 값으로 유효한 HTML 문자열을 넘겨야 합니다. (Internet Explorer는 지원하지 않습니다.)

`insertImage`

입력 위치에 이미지를 넣습니다(선택 영역을 지워집니다). 변수 값으로 이미지의 SRC URI 문자열을 넘겨야 합니다. URI는 최소 한글자 이상이어야 하고 공백문자여도 됩니다. (Internet Explorer는 null URI 값으로 링크를 생성합니다.)

`insertOrderedList`

선택 영역이나 입력 위치에 번호 순서가 있는 목록을 넣습니다.

`insertUnorderedList`

선택 영역이나 입력 위치에 번호 순서가 없는 목록을 넣습니다.

`insertParagraph`

선택 영역이나 현재 줄에 문단 태그를 추가합니다. (Internet Explorer는 입력 위치에 문단을 삽입하고 선택 영역은 삭제합니다.)

`insertText`

입력 위치에 지정된 텍스트를 입력합니다(선택 영역은 지워집니다).

`italic`

선택 영역이나 입력 위치에 이탤릭을 온/오프합니다. (Internet Explorer는 I 대신 EM 태그를 사용합니다.)

`justifyCenter`

선택 영역이나 입력 위치를 가운데 정렬합니다.

`justifyFull`

선택 영역이나 입력 위치를 양쪽 정렬합니다.

`justifyLeft`

선택 영역이나 입력 위치를 좌측 정렬합니다.

`justifyRight`

선택 영역이나 입력 위치를 우측 정렬합니다.

`outdent`

선택 영역이나 입력 위치의 줄을 내어쓰기 합니다.

`paste`

입력 위치에 클립보드의 내용을 붙여넣기 합니다(현재의 선택 영역을 교체합니다). user.js 설정 파일에서 클립보드가 활성화 되어 있어야 합니다. 참고 [1].

`redo`

이전에 실행 취소된 명령을 다시 실행합니다.

`removeFormat`

현재 선택 영역의 모든 문서 형식을 제거합니다.

`selectAll`

편집 가능 영역의 모든 내용을 선택합니다.

`strikeThrough`

선택 영역이나 입력 위치의 가로줄을 온/오프 합니다.

`subscript`

선택 영역이나 입력 위치의 아랫첨자를 온/오프 합니다.

`superscript`

선택 영역이나 입력 위치의 윗첨자를 온/오프 합니다.

`underline`

선택 영역이나 입력 위치의 밑줄을 온/오프 합니다.

`undo`

직전에 실행된 명령을 취소합니다.

`unlink`

선택된 링크에서 링크 태그를 제거합니다.

`useCSS`
지원이 중단되었습니다

생성된 마크업의 HTML 태그나 CSS 사용을 토글합니다. 변수 값으로 boolean true/false 값을 넘겨야 합니다. 주의: 이 값은 논리적으로 반대입니다(CSS를 사용하기 위해서는 false를 HTML을 사용하기 위해서는 true). (Internet Explorer는 지원하지 않습니다.) 이 명령은 더이상 사용하지 않습니다. 대신 *styleWithCSS* 명령어를 사용하세요.

`styleWithCSS`

*useCSS* 명령어를 대체합니다. 변수 값은 예상한대로 작동합니다. 예를 들어서 마크업에서 *style* 속성을 수정하거나 생성하려면 true를, false는 포매팅 요소를 생성합니다.

예제
--

CodePen의 how to use를 참고하세요.

명세
--

| Specification |
| --- |
| Trusted Types # dom-document-execcommand |

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

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

참고
--

* `HTMLElement.contentEditable`
* `document.designMode`
* Rich-Text Editing in Mozilla
* Scribe's "Browser Inconsistencies" documentation with bugs related to `document.execCommand`.


Document.compatMode - Web API

Document.compatMode
===================

**`Document.compatMode`** 속성은 문서 렌더링을 호환 모드에서 진행했는지, 표준 모드에서 진행했는지 나타냅니다.

구문
--

```js
const mode = document.compatMode;
```

### 값

다음 중 하나.

* 문서가 호환 모드이면 `"BackCompat"`
* 문서가 호환 모드가 아니거나("표준") 제한적 호환("거의 표준") 모드이면 `"CSS1Compat"`

**참고:** 위의 모든 모드는 표준화됐으므로, 오래 전에 사용하던 "표준"과 "거의 표준"이라는 이름은 말이 되지 않아 이제 사용하지 않습니다.

예제
--

```js
if (document.compatMode == "BackCompat") {
  // in Quirks mode
}
```

명세서
---

| Specification |
| --- |
| DOM Standard # ref-for-dom-document-compatmode① |

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

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


Document.querySelectorAll() - Web API

Document.querySelectorAll()
===========================

`Document` 메소드 **`querySelectorAll()`** 는 지정된 셀렉터 그룹에 일치하는 다큐먼트의 엘리먼트 리스트를 나타내는 정적(살아 있지 않은) `NodeList` 를 반환합니다.

**참고:** **노트:** 이 메소드는 `ParentNode` 믹스인의 `querySelectorAll()` 메소드를 기반으로 구현되었습니다.

구문
--

```js
elementList = parentNode.querySelectorAll(selectors);
```

### 파라미터

`selectors`

매칭할 하나 이상의 셀렉터를 포함하는 `DOMString`. 이 스트링은 반드시 유효한 CSS 셀렉터여야 합니다; 그렇지 않을 경우, `SyntaxError` 예외가 발생합니다. 엘리먼트 식별을 위한 셀렉터 사용의 자세한 내용은 셀렉터로 DOM 엘리먼트 찾기 문서를 확인하세요. 콤마를 사용해 분리하여 다중 셀렉터를 지정할수도 있습니다.

**참고:** **노트:** 표준 CSS 구문이 아닌 문자들은 역슬래시를 사용해 이스케이프해야 합니다. JavaScript가 역슬래시 이스케이핑을 사용한 이후로, 그러한 문자들을 사용하는 문자열 리터럴을 작성할 때 특별히 신경써야 합니다. 자세한 내용은 이스케이프 표현을 확인하세요.

### 반환 값

지정한 셀렉터와 하나라도 일치하는 각 엘리먼트에 대한 하나의 `Element` (en-US) 를 포함하는 살아 있지 않은 `NodeList`. 일치하는 것이 없는 경우에는 비어 있는 `NodeList`.

**참고:** **노트:** 지정한 `selectors` 가 CSS 가상 엘리먼트를 포함하면, 반환 리스트는 항상 비어있습니다.

### 예외

`SyntaxError`

지정한 `selectors` 문자열의 구문이 유효하지 않습니다.

예시
--

### 일치하는 리스트 얻기

다큐먼트에서 모든 `<p>` 엘리먼트의 `NodeList` 를 얻으려면:

```js
var matches = document.querySelectorAll("p");
```

이 예시는 다큐먼트 내의 클래스가 "`note`" 또는 "`alert`" 인 모든 `<div>` (en-US) 엘리먼트의 목록을 반환합니다.

```js
var matches = document.querySelectorAll("div.note, div.alert");
```

여기에서는, ID 가 `"test"` 인 컨테이너안에 위치하고 부모 엘리먼트가 `div` 엘리먼트이며 클래스가 `"highlighted"` 인 `<p>` 엘리먼트의 리스트를 얻습니다.

```js
var container = document.querySelector("#test");
var matches = container.querySelectorAll("div.highlighted > p");
```

이 예시는 속성 셀렉터를 사용해 다큐먼트에서 `"data-src"` 속성을 포함하는 `iframe` 엘리먼트의 리스트를 반환합니다:

```js
var matches = document.querySelectorAll("iframe[data-src]");
```

여기에서는, ID 가 `"userlist"` 인 리스트 내에서 `"data-active"` 속성 값이 `"1"` 인 리스트 항목의 목록을 반환하는데 속성 셀렉터가 사용되었습니다:

```js
var container = document.querySelector("#userlist");
var matches = container.querySelectorAll("li[data-active='1']");
```

### 일치 항목에 접근하기

일치하는 항목의 `NodeList` 가 반환되면, 배열처럼 확인하실 수 있습니다. 배열이 비어있다면(`length` 프로퍼티가 0), 일치한 것을 발견하지 못한 것입니다.

다른 방법으로, 리스트의 컨텐츠에 접근하기위한 표준 배열 노테이션을 사용하실수도 있습니다. 다음과 같이 일반적인 모든 반복문을 사용하실 수 있습니다:

```js
var highlightedItems = userList.querySelectorAll(".highlighted");

highlightedItems.forEach(function (userItem) {
  deleteUser(userItem);
});
```

사용자 노트
------

`querySelectorAll()` 은 대부분의 일반적인 JavaScript DOM 라이브러리와 다르게 동작하여 예상치못한 결과를 가져올 수 있습니다.

### HTML

세 번 중첩된 `<div>` (en-US) 블록을 갖는 다음 HTML 을 고려해봅시다.

```html
<div class="outer">
  <div class="select">
    <div class="inner"></div>
  </div>
</div>
```

### JavaScript

```js
var select = document.querySelector(".select");
var inner = select.querySelectorAll(".outer .inner");
inner.length; // 1 입니다. 0 이 아닙니다!
```

클래스 `"select"` 를 갖는 `<div>` 컨텍스트에서 `".outer .inner"` 를 셀렉팅할 때, .outer 가 탐색을 수행하는 기본 엘리먼트(`".select"`)의 자손이 아님에도 클래스 `".inner"` 가 탐색됩니다. 기본적으로 `querySelectorAll()` 은 탐색 범위 내에서 셀렉터의 마지막 엘리먼트만을 검증합니다.

`:scope` (en-US) 가상 클래스는 예상된 동작을하도록 하지만, 베이스 엘리먼트의 자손에 일치하는 셀렉터로만 제한됩니다:

```js
var select = document.querySelector(".select");
var inner = select.querySelectorAll(":scope .outer .inner");
inner.length; // 0
```

명세
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-parentnode-queryselectorall① |

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

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

함께 보기
-----

* 셀렉터를 사용해 DOM 엘리먼트 찾기
* CSS 가이드의 속성 셀렉터
* MDN 학습 영역의 속성 셀렉터
* `Element.querySelector()` (en-US) 와 `Element.querySelectorAll()` (en-US)
* `Document.querySelector()`
* `DocumentFragment.querySelector()` (en-US) 와 `DocumentFragment.querySelectorAll()` (en-US)
* `ParentNode.querySelector()` 와 `ParentNode.querySelectorAll()`
* `querySelector()` 코드 조각


Document.forms - Web API

Document.forms
==============

`forms`는 현재 document에 존재하는 `<form>` element 들이 담긴 collection (an `HTMLCollection`)을 반환합니다.

Syntax
------

```js
collection = document.forms;
```

Example: Getting form information
---------------------------------

```html
<!doctype html>
<html lang="en">
  <head>
    <title>document.forms example</title>
  </head>

  <body>
    <form id="robby">
      <input
 type="button"
 onclick="alert(document.forms[0].id);"
 value="robby's form" />
    </form>

    <form id="dave">
      <input
 type="button"
 onclick="alert(document.forms[1].id);"
 value="dave's form" />
    </form>

    <form id="paul">
      <input
 type="button"
 onclick="alert(document.forms[2].id);"
 value="paul's form" />
    </form>
  </body>
</html>
```

Example 2:Getting an element from within a form
-----------------------------------------------

```js
var selectForm = document.forms[index];
var selectFormElement = document.forms[index].elements[index];
```

명세서
---

| Specification |
| --- |
| HTML Standard # dom-document-forms-dev |

See also
--------

* `HTMLFormElement` (en-US)


Document: visibilitychange 이벤트 - Web API

Document: visibilitychange 이벤트
==============================

`visibilitychange` 이벤트는 브라우저 탭의 콘텐츠가 보여지거나 숨겨질 때 문서에서 발생합니다.

이 이벤트는 취소할 수 없습니다.

구문
--

이벤트 이름을 `addEventListener()` 등의 메서드에 제공하거나, 이벤트 처리기 속성을 사용하세요.

```js
addEventListener("visibilitychange", (event) => {});

onvisibilitychange = (event) => {};
```

이벤트 유형
------

일반 `Event`.

사용 일람
-----

이 이벤트 자체로는 문서의 새로운 노출 상태를 알아낼 수 없습니다. 문서의 `visibilityState` 속성을 사용하세요.

사용자가 새로운 페이지로 이동하거나, 탭을 바꾸거나, 탭을 닫거나, 브라우저를 닫거나 최소화하거나, 모바일 기기에서는 다른 앱으로 전환하는 경우에는 `visibilityState`가 `hidden`으로 바뀌고 이 이벤트가 발생합니다. `hidden`으로의 전환은 페이지에서 안정적으로 관측할 수 있는 마지막 이벤트므로 개발자는 이 시점을 사용자 세션의 마지막으로 취급하여 (분석 정보 전송 등) 마무리 작업을 실행해야 합니다.

`hidden` 전환은 페이지의 UI 갱신을 중단하고, 사용자가 백그라운드에서는 원하지 않을 작업들을 중지할 때로도 적합한 시점입니다.

예제
--

hidden 전환 시 음악 일시중지하기
---------------------

이 예제는 문서가 보이게 되면 음악 트랙을 재생하고, 문서를 더 볼 수 없으면 일시중지합니다.

```js
document.addEventListener("visibilitychange", () => {
  if (document.visibilityState === "visible") {
    backgroundMusic.play();
  } else {
    backgroundMusic.pause();
  }
});
```

hidden 전환 시 세션 종료 분석 정보 전송하기
----------------------------

이 예제는 `hidden`으로의 전환을 사용자 세션의 마지막으로 취급하여, `Navigator.sendBeacon()` API를 사용해 적절한 분석 정보를 전송합니다.

```js
document.onvisibilitychange = () => {
  if (document.visibilityState === "hidden") {
    navigator.sendBeacon("/log", analyticsData);
  }
};
```

명세서
---

| Specification |
| --- |
| HTML Standard # event-visibilitychange |
| HTML Standard # handler-onvisibilitychange |

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

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

같이 보기
-----

* Page Visibility API
* `Document.visibilityState`
* Don't lose user and app state, use Page Visibility에서는 왜 `beforeunload`/`unload` 대신 `visibilitychange`를 사용해야 하는지 자세히 설명합니다.
* Page Lifecycle API에서는 웹 애플리케이션에서 페이지의 수명 주기 동작을 처리하는 최선의 방법들을 제시합니다.


Window: DOMContentLoaded 이벤트 - Web API

Window: DOMContentLoaded 이벤트
============================

**`DOMContentLoaded`** 이벤트는 HTML 문서가 완전히 구문 분석되고 모든 지연된 스크립트(`<script defer src="…">`와 `<script type="module">`)가 다운로드되고 실행될 때 발생합니다. 이미지, 서브프레임, 비동기 스크립트와 같은 다른 항목의 로드가 끝날 때까지 기다리지 않습니다.

`DOMContentLoaded`는 스타일시트의 로드를 기다리지 않습니다. 하지만 지연된 스크립트는 스타일시트를 기다리며 `DOMContentLoaded` 이벤트는 지연된 스크립트 이후에 대기열로 추가됩니다. 또한, 지연되지 않거나 비동기가 아닌 스크립트(예: `<script>`)는 이미 구문 분석된 스타일시트가 로드될 때까지 기다립니다.

이 이벤트의 원래 대상은 로드된 `문서`입니다. `Window` 인터페이스에서 이 이벤트를 수신하여 캡처 혹은 버블링 단계에서 다룰 수 있습니다. 이 이벤트에 대한 자세한 설명은 `DOMContentLoaded` 페이지를 참조하시길 바랍니다.

다른 이벤트인 `load`는 오직 완전히 로드된 페이지를 감지할 때만 사용되어야 합니다. `DOMContentLoaded`가 더 적절한 위치에서 `load`를 사용하는 것은 흔한 실수입니다.

이 이벤트는 취소할 수 없습니다.

구문
--

`addEventListener()`와 같은 메서드에서 이벤트 이름을 사용하거나 이벤트 핸들러 속성을 설정합니다.

```js
addEventListener("DOMContentLoaded", (event) => {});

onDOMContentLoaded = (event) => {};
```

이벤트 타입
------

제네릭 `이벤트`.

예제
--

### 기본 용도

```js
window.addEventListener("DOMContentLoaded", (event) => {
  console.log("DOM fully loaded and parsed");
});
```

명세서
---

| Specification |
| --- |
| HTML Standard # stop-parsing |

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

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

같이 보기
-----

* 관련된 이벤트: `load`, `readystatechange`, `beforeunload`, `unload`
* `문서` 대상에 대한 이벤트: `DOMContentLoaded`


Document: contentType property - Web API

Document: contentType property
==============================

**`Document.contentType`** 은 document가 렌더링 되는 MIME 타입을 반환하는 읽기 전용 속성입니다. `Document.contentType`은 HTTP 헤더나 그 외에 MIME 정보 출처에서 나올 수 있으며 브라우저나 확장 프로그램에서 수행하는 자동 타입 변환의 영향을 받을 수 있습니다.

**참고:** 이 속성은 `<meta>`에 영향을 받지 않습니다.

값
-

`contentType`은 읽기 전용 속성입니다.

명세서
---

| Specification |
| --- |
| DOM Standard # ref-for-dom-document-contenttype① |

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

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


Document.hidden - Web API

Document.hidden
===============

**`Document.hidden`** 읽기 전용 속성은 페이지가 숨겨졌는지 여부를 `Boolean` 값으로 나타냅니다.

예제
--

```js
document.addEventListener("visibilitychange", function () {
  console.log(document.hidden);
  // 숨김 여부가 변했을 때의 행동
});
```

명세
--

| Specification |
| --- |
| HTML Standard # dom-document-hidden |

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

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


Document() - Web API

Document()
==========

**`Document`** 생성자는 브라우저에 로드되고 페이지 컨텐츠로의 진입점으로써 제공되는 웹 페이지인 새로운 `Document` 객체를 생성합니다.

구문
--

```js
new Document();
```

명세
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-document-document① |

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

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


Document.createDocumentFragment() - Web API

Document.createDocumentFragment()
=================================

새로운 빈 `DocumentFragment` 를 생성합니다.

Syntax
------

```js
var docFragment = document.createDocumentFragment();
```

`docFragment` 는 빈 `DocumentFragment` 객체를 나타냅니다.

Description
-----------

`DocumentFragment`s 는 DOM 노드들 입니다. 이것들은 메인 DOM 트리의 일부가 되지 않습니다. 일반적인 유즈 케이스는 다큐먼트 조각을 생성하고, 엘리먼트들을 다큐먼트 조각에 추가하고 그 다큐먼트 조각을 DOM 트리에 추가하는 것입니다. DOM 트리 내에서 다큐먼트 조각은 그것의 모든 자식들로 대체됩니다.

메모리 내에 다큐먼트 조각이 존재하고 메인 DOM 트리의 일부가 아니라면, 이것에 자식들을 추가하는 것은 페이지 reflow (엘리먼트의 위치와 좌표의 계산) 를 유발하지 않습니다. 따라서, 다큐먼트 조각을 사용하는 것은 보통 better performance 의 결과를 가져옵니다.

Example
-------

```js
var ul = document.getElementsByTagName("ul")[0]; // assuming it exists
var docfrag = document.createDocumentFragment();
var browserList = ["Internet Explorer", "Firefox", "Safari", "Chrome", "Opera"];

browserList.forEach(function (e) {
  var li = document.createElement("li");
  li.textContent = e;
  docfrag.appendChild(li);
});

ul.appendChild(docfrag);
// a list with well-known web browsers
```

명세서
---

| Specification |
| --- |
| DOM Standard # ref-for-dom-document-createdocumentfragment① |

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

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

See also
--------

* `document.implementation.createDocument()` (en-US)
* `documentFragment`


Document.body - Web API

Document.body
=============

`Document.body` 속성은 현재 문서의 `<body>` 혹은 `<frameset>` 노드를 나타냅니다. 일치하는 요소가 존재하지 않으면 `null`을 반환합니다.

구문
--

```js
const objRef = document.body;
document.body = objRef;
```

예제
--

```js
// HTML: <body id="oldBodyElement"></body>
alert(document.body.id); // "oldBodyElement"

let aNewBodyElement = document.createElement("body");

aNewBodyElement.id = "newBodyElement";
document.body = aNewBodyElement;
alert(document.body.id); // "newBodyElement"
```

참고
--

`Document.body`는 문서의 콘텐츠를 수용하는 요소입니다. `<body>` 콘텐츠를 가지고 있는 문서는 `<body>` 요소를 반환하고, 프레임셋을 가지고 있는 문서는 가장 바깥쪽의 `<frameset>` 요소를 반환합니다.

`body` 속성에 새로운 값을 설정할 수 있긴 하지만, 문서에 새로운 본문을 설정하는건 `<body>` 요소가 가지고 있던 모든 자식을 제거하는 것과 같습니다.

명세서
---

| Specification |
| --- |
| HTML Standard # dom-document-body-dev |

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

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

같이 보기
-----

* `Document.head`


Document.implementation - Web API

Document.implementation
=======================

현재 document에 연관된 `DOMImplementation` (en-US) 객체를 반환합니다.

Syntax
------

```js
DOMImpObj = document.implementation;
```

Example
-------

```js
var modName = "HTML";
var modVer = "2.0";
var conformTest = document.implementation.hasFeature(modName, modVer);

alert("DOM " + modName + " " + modVer + " supported?: " + conformTest);

// alerts with: "DOM HTML 2.0 supported?: true" if DOM Level 2 HTML module is supported.
```

모듈 네임 목록(예: Core, HTML, XML, 등등)은 DOM Level 2 Conformance 섹션에서 확인하실 수 있습니다.

Notes
-----

W3C의 DOM Level 1 권고안에는 DOM 모듈을 브라우저에서 지원하는지를 확인하는 방법 중 하나인 `hasFeature` 메소드만 명시되어 있습니다(위 예제와 What does your user agent claim to support? 문서를 확인하세요). 사용이 가능한 경우, 다른 `DOMImplementation` 메소드들이 단일 document 외부의 것들을 컨트롤하기 위한 서비스들을 제공합니다. 예를 들어, `DOMImplementation` 인터페이스는 `createDocumentType` 메소드와 implementation에 의해 관리되는 하나 이상의 document를 위해 생성되는 DTD가 무엇인지를 포함합니다.

Specification
-------------

* DOM Level 2 Core: implementation
* DOM Level 3 Core: implementation
브라우저 호환성
--------

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


Document: cut 이벤트 - Web API

Document: cut 이벤트
=================

**`cut`** 이벤트는 사용자가 브라우저의 사용자 인터페이스를 통해 복사했을 때 발생합니다.

|  |  |
| --- | --- |
| 버블링 | 예 |
| 취소 가능 | 예 |
| 인터페이스 | `ClipboardEvent` |
| 이벤트 처리기 속성 | `oncut` (en-US) |

`cut` 이벤트의 원 대상은 복사 동작의 대상인 `Element` (en-US)입니다. `Document`에서 수신할 경우 캡처 또는 버블링 단계의 이벤트를 받게 됩니다. 이벤트에 대한 자세한 정보는 Element: cut 이벤트에서 확인하세요.

예제
--

```js
document.addEventListener("cut", (event) => {
  console.log("잘라내기 동작 실행");
});
```

명세
--

| Specification |
| --- |
| Clipboard API and events # clipboard-event-cut |
| HTML Standard # handler-oncut |

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

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

같이 보기
-----

* 관련 이벤트: `copy`, `paste`
* `Element` (en-US)를 대상으로 한 같은 이벤트: `cut`
* `Window`를 대상으로 한 같은 이벤트: `cut`


Document.styleSheetSets - Web API

Document.styleSheetSets
=======================

**지원이 중단되었습니다:** This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

**비표준:** 이 기능은 비표준이므로 실제 프로덕션에서 사용하지 마세요. 모든 사용자 환경에서 작동하지 않을 수 도 있으며, 미래에 호환성 문제가 생길 수 있습니다.

\*\*`styleSheetSets`\*\*의 읽기 전용 속성은 현재 사용 가능한 모든 스타일 시트 세트의 live 리스트를 반환합니다.

문법
--

```js
var sets = document.styleSheetSets;
```

반환시, `sets`는 사용할 수 있는 스타일 시트 세트의 리스트.

예시
--

ID가 "sheetList"인 `<ul>` (list) 요소가 주어지면, 사용 가능한 모든 스타일 시트 세트의 이름으로 아래와 같은 코드로 채울 수 있습니다.

```js
let list = document.getElementById("sheetList");
let sheets = document.styleSheetSets;

list.innerHTML = "";

for (let i = 0; i < sheets.length; i++) {
  let item = document.createElement("li");

  item.innerHTML = sheets[i];
  list.appendChild(item);
}
```

Notes
-----

사용 가능한 스타일 시트 세트 리스트는 문서에 사용 가능한 모든 스타일 시트를 열거하여 구성되고, `document.styleSheets` 속성에 나열된 순서대로, 리스트에 제목을 가진 각각의 스타일 시트 `title`을 추가합니다. 중복 항목이 리스트에서 삭제됨. (대소문자 구분 비교 사용).

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

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

더보기
---

* `Stylesheet`
* `document.styleSheets`
* `document.lastStyleSheetSet` (en-US)
* `document.preferredStyleSheetSet` (en-US)
* `document.selectedStyleSheetSet` (en-US)
* `document.enableStyleSheetsForSet()` (en-US)


Document.documentElement - Web API

Document.documentElement
========================

**`Document.documentElement`** 읽기 전용 속성은 문서의 루트 요소를 나타내는 `Element` (en-US)를 반환합니다. HTML 문서를 예로 들면 `<html>` 요소를 반환합니다.

구문
--

```js
const element = document.documentElement;
```

예제
--

```js
const rootElement = document.documentElement;
const firstTier = rootElement.childNodes;
// firstTier is a NodeList of the direct children of the root element
// such as <head> and <body>

for (const child of firstTier) {
  // do something with each direct child of the root element
}
```

참고
--

모든 비어있지 않은 HTML 문서의 `documentElement`는 항상 `<html>` 요소를 가리킵니다. 모든 비어있지 않은 XML 문서의 `documentElement`는 종류불문하고 해당 문서의 루트 요소를 가리킵니다.

명세
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-document-documentelement① |

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

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


Document.location - Web API

Document.location
=================

**`Document.location`** 은 `Location` 객체를 반환하는 읽기 전용 속성입니다. `Location`은 document의 URL에 대한 정보를 포함하고 해당 URL을 변경하거나 다른 URL을 로딩하는 메서드를 제공합니다.

`Document.location`은 읽기 전용 `Location` 객체지만, 문자열을 할당할 수도 있습니다. 즉, 대부분의 경우에 `document.location`을 문자열처럼 사용할 수 있습니다. `document.location = 'http://www.example.com'`은 `document.location.href = 'http://www.example.com'`와 동의어입니다. 만약 다른 문자열을 할당한다면 브라우저가 할당된 웹사이트를 로드합니다.

URL을 문자열로 가져오려면 읽기 전용 속성인 `document.URL`도 사용할 수 있습니다.

만약 현재 document가 브라우저 맥락이 아니라면 `null`을 반환합니다.

값
-

`Location` 객체

예제
--

```js
console.log(document.location);
// Location 객체를 console에 출력
```

명세서
---

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

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

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

같이 보기
-----

* 반환 값의 인터페이스 `Location`.
* 비슷한 정보지만 browsing context에 속한 `Window.location` (en-US).


Document: all 속성 - Web API

Document: all 속성
================

**지원이 중단되었습니다:** This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

`Document` 읽기전용 인터페이스인 **`all`** 속성은 문서 노드에 위치한`HTMLAllCollection` (en-US) 반환합니다.

문서순서상의 문서의 모든 요소 `HTMLAllCollection` (en-US)를 리턴하는 `document.all` 대신, 문서순서상의 문서의 모든 요소 `NodeList`를 리턴하는 `Document.querySelectorAll`를 사용 할 수 있습니다:

```js
const allElements = document.querySelectorAll("\*");
```

값
-

`HTMLAllCollection` (en-US)는 문서 내에서 모든 요소를 담고 있다.

명세서
---

| Specification |
| --- |
| HTML Standard # dom-document-all |

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

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


Document.open() - Web API

Document.open()
===============

**`Document.open()`** 메소드는 문서를 쓰기 (en-US) 위해 문서를 열 수 있도록 제공한다.

이 메소드 호출 시 몇 가지 부작용이 발생한다. 예를 들면,

* 현재까지 등록된 모든 요소와 문서, 문서에 속한 윈도우 소속 이벤트 리스너가 모두 삭제된다.
* 현존했던 모든 요소가 문서에서 삭제된다.
문법
--

```js
document.open();
```

### 인자

없음.

### Return value반환값

`Document` 객체 인스턴스.

예시
--

이 간단한 코드는 문서를 열면서, 원하는 내용을 작성하여 기존 HTML 문서 구조를 대체하고, 문서를 닫는 예제이다.

```js
document.open();
document.write("<p>Hello world!</p>");
document.write("<p>I am a fish</p>");
document.write("<p>The number is 42</p>");
document.close();
```

Notes
-----

`document.open()` 메소드는 페이지를 불러온 후 `document.write()` (en-US) 메소드 호출 시 자동으로 호출된다.

Firefox 및 Internet Explorer 에서는 기존까지 모든 요소 뿐 만 아니라 JavaScript 변수까지 제거했었다. 하지만 현재 그런 경우는 없다.document non-spec'ed parameters to document.open

document.open()의 인자 3개
----------------------

잘 사용하지 않지만, `document.open()` 메소드는 3 개의 인자를 받을 수 있으며, 호출할 경우 `Window.open()` (en-US) 메소드와 동일하게 동작한다(`Window.open()` 메소드 참고).

다음 예제는 Github 웹 사이트를 새 창으로 열게 되며, opener 개체를 `null`로 설정한다.

```js
document.open("https://www.github.com", "", "noopener=true");
```

document.open()의 인자 2개
----------------------

브라우저에서는 2개의 인자를 가진 `document.open()` 또한 가지고 있으며, 아래와 같은 구조를 가진다.

```js
document.open(type, replace);
```

Where `type` 인자는 문서를 작성할 MIME 형식을 정의하며(예: `text/html`), 현재 히스토리를 대체(예: `"replace"`) 하는 새 문서 작성을 시작할 수 있다.

하지만 이런 호출은 더 이상 사용할 수 없으며, 예외 또한 발생하지 않는다.대신 인자가 없는 `document.open()` 메소드가 호출되는 효과를 지니며, 대신 브라우저 히스토리 대체는 그대로 작동한다.

명세서
---

| Specification |
| --- |
| HTML Standard # dom-document-open-dev |

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

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

같이보기
----

* `Document`
* `Window.open()` (en-US)


Document.designMode - Web API

Document.designMode
===================

`document.designMode`는 전체 document의 편집 가능 여부를 제어합니다. 유효한 값은 `"on"` 과 `"off"` 입니다. 명세에 따르면, 이 속성은 기본적으로 `"off"`로 설정되어 있습니다. Firefox는 이 표준 명세를 따릅니다. Chrome과 IE의 초기 버전들에서는 `"inherit"` 로 설정되어 있습니다. IE6-10 브라우저에서는, 값이 대문자로 표기됩니다.

Syntax
------

```js
var mode = document.designMode;
document.designMode = "on";
document.designMode = "off";
```

Example
-------

`<iframe>` (en-US)의 document를 편집 가능하게 설정합니다.

```js
iframeNode.contentDocument.designMode = "on";
```

명세서
---

| Specification |
| --- |
| HTML Standard # dom-document-designmode-dev |

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

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

See also
--------

* Rich-Text Editing in Mozilla
* `HTMLElement.contentEditable`
* designMode property on MSDN


Document.getElementById() - Web API

Document.getElementById()
=========================

**`Document.getElementById()`** 메서드는 주어진 문자열과 일치하는 `id` 속성을 가진 요소를 찾고, 이를 나타내는 `Element` (en-US) 객체를 반환합니다. ID는 문서 내에서 유일해야 하기 때문에 특정 요소를 빠르게 찾을 때 유용합니다.

ID가 없는 요소에 접근하려면 `Document.querySelector()`를 사용하세요. 모든 선택자를 사용할 수 있습니다.

구문
--

```js
document.getElementById(id);
```

### 매개변수

**`id`**

찾으려는 요소 ID. ID는 대소문자를 구분하는 문자열로, 문서 내에서 유일해야 합니다. 즉, 하나의 값은 하나의 요소만 사용할 수 있습니다.

### 반환 값

주어진 ID와 일치하는 DOM 요소를 나타내는 `Element` (en-US) 객체. 문서 내에 주어진 ID가 없으면 `null`.

예제
--

### HTML

```html
<html>
  <head>
    <title>getElementById 예제</title>
  </head>
  <body>
    <p id="para">어떤 글</p>
    <button onclick="changeColor('blue');">blue</button>
    <button onclick="changeColor('red');">red</button>
  </body>
</html>
```

### JavaScript

```js
function changeColor(newColor) {
  var elem = document.getElementById("para");
  elem.style.color = newColor;
}
```

### 결과

용법
--

메서드 이름 중 `"Id"`의 대소문자가 정확해야 합니다. `getElementByID()`가 자연스러워 보일지라도 유효하지 않은 이름이기에 사용할 수 없습니다.

`Document.querySelector()`나 `Document.querySelectorAll()`과는 달리 `getElementById()`는 전역 `document` 객체의 메서드로만 사용할 수 있고, DOM의 다른 객체는 메서드로 가지고 있지 않습니다. ID 값은 문서 전체에서 유일해야 하며 "국지적"인 버전을 쓸 이유가 없기 때문입니다.

### 예제

```html
<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <body>
    <div id="parent-id">
      <p>hello word1</p>
      <p id="test1">hello word2</p>
      <p>hello word3</p>
      <p>hello word4</p>
    </div>
    <script>
 var parentDOM = document.getElementById("parent-id");
 var test1 = parentDOM.getElementById("test1");
 //throw error
 //Uncaught TypeError: parentDOM.getElementById is not a function
 </script>
  </body>
</html>
```

`id`에 맞는 요소가 없을 때 `getElementById()`는 `null`을 반환합니다. 매개변수 `id`가 대소문자를 구분한다는 점을 기억하세요. `document.getElementById("Main")`는 `<div id="main">` 대신 `null`을 반환하는데 "M"과 "m"을 구분하기 때문입니다.

**문서에 없는 요소**는 `getElementById()`가 팀색하지 않습니다. 요소를 동적으로 생성해서 ID를 부여하더라도, `Node.insertBefore()` (en-US)나 비슷한 메서드로 문서 트리에 삽입해야 `getElementById()`로 접근할 수 있습니다.

```js
var element = document.createElement("div");
element.id = "testqq";
var el = document.getElementById("testqq"); // el이 null!
```

**HTML이 아닌 문서**. DOM 구현체는 요소의 어떤 속성이 ID인지 알고 있어야 합니다. 문서의 DTD가 정의하고 있지 않으면, 속성명이 "id"라고 해도 ID 유형인건 아닙니다. XHTML, XUL 등 자주 쓰이는 문서의 경우 `id` 속성을 ID 유형으로 정의하고 있습니다. ID 유형의 속성이 어떤 것인지 모르는 다른 구현의 경우 `null`을 반환합니다.

명세
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-nonelementparentnode-getelementbyid② |

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

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

같이 보기
-----

* `Document`는 문서 안의 요소에 접근할 수 있는 다른 메서드와 속성으로의 참조를 가지고 있습니다.
* `Document.querySelector()`를 사용하면 `'div.myclass'` 처럼 선택자로 요소를 탐색할 수 있습니다.
* xml:id - `getElementById()`가 (Ajax 호출 등으로 받은) XML 문서에서 "xml:id" 속성 값을 사용할 수 있도록 도와주는 메서드를 가지고 있습니다.


Document.defaultView - Web API

Document.defaultView
====================

브라우저의 **`document.defaultView`** 는 문서와 연결된 `window` 객체를 반환합니다. 가능하지 않은 경우 `null`을 대신 반환합니다.

명세
--

| Specification |
| --- |
| HTML Standard # dom-document-defaultview-dev |

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

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


DocumentOrShadowRoot.styleSheets - Web API

DocumentOrShadowRoot.styleSheets
================================

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

`DocumentOrShadowRoot` 인터페이스의 **`styleSheets`** 읽기 전용 속성은 문서에서 명시적으로 링크했거나, 안에 포함된 스타일시트에 대한 `CSSStyleSheet` (en-US) 객체의 `StyleSheetList` (en-US)를 반환합니다.

예제
--

```js
function getStyleSheet(unique\_title) {
  for (var i = 0; i < document.styleSheets.length; i++) {
    var sheet = document.styleSheets[i];
    if (sheet.title == unique_title) {
      return sheet;
    }
  }
}
```

### 참고

반환 된 목록은 다음과 같이 정렬됩니다:

* `<link>` 헤더에서 검색된 스타일시트가 먼저 배치되고, 헤더 순서로 정렬됩니다.
* DOM에서 검색된 스타일시트는 tree order로 정렬되어 배치됩니다.
명세
--

| Specification |
| --- |
| CSS Object Model (CSSOM) # dom-documentorshadowroot-stylesheets |

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

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


Quirks 모드 - HTML: Hypertext Markup Language

Quirks 모드
=========

웹의 과거 시절에는 일반적으로 두가지 버전으로 페이지가 작성됐습니다. 하나는 Netscape Navigator를 위한것이고 다른 하나는 Microsoft Internet Explorer를 위한 것이었습니다. 웹 표준이 W3C에서 만들어질때 브라우저들은 이를 그대로 사용할 수 없었습니다. 그렇게 되면 웹의 대부분의 기존 사이트가 동작하지 않기 때문이었습니다. 따라서 브라우저들은 새로운 표준을 준수하는 사이트와 이전 레거시 사이트를 다르게 처리하기 위해 두 가지 모드를 도입했습니다.

현재 웹 브라우저의 레이아웃 엔진에서 사용하는 모드는 세 가지입니다. quirks모드, limited-quirks모드 그리고 no-quirks모드 입니다. **quirks 모드**에서 레이아웃은 Navigator 4와 Internet Explorer5의 동작을 모방합니다. 이것은 웹 표준이 널리 채택되기 전에 구축된 웹 사이트를 지원하기 위해 필수적입니다. **no-quirks모드** 에서는(바라건대) 현대 HTML 및 CSS명세에서 설명한대로 동작합니다. **limited-quirks 모드**에서는 일부 quirks만 구현됩니다.

limited-quirks 및 no-quirks 모드는 이전에 각각 "almost-standards" 모드와 "full standards" 모드로 불렸습니다. 이러한 이름은 이제 동작이 표준화되었기 때문에 변경되었습니다.

브라우저는 어떤 모드를 사용할지 어떻게 결정할까?
---------------------------

HTML문서의 경우 브라우저는 문서 시작 부분에 DOCTYPE을 사용하여 문서를 quirks 모드에서 처리할지 표준 모드에서 처리할지 결정합니다. 페이지가 전체 표준 모드를 사용하도록 하려면 페이지에 아래 예시와 같은 DOCTYPE이 있는지 확인하세요.

```html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Hello World!</title>
  </head>
  <body></body>
</html>
```

예제에 표시된 `<!DOCTYPE html>`이 가장 단순하며 현재 HTML 표준에서 권장하는 DOCTYPE입니다. 이전 버전의 HTML 표준에서는 다른 변형을 권장했지만 현재 모든 기존 브라우저는 이 DOCTYPE에 대한 전체 표준모드를 사용하며 심지어 오래된 Internet Explorer 6도 마찬가지 입니다. 더 복잡한 DOCTYPE을 사용해야 할 타당한 이유는 없습니다. 다른 DOCTYPE을 사용하는 경우 limited-quirks모드 또는 quirks 모드를 트리거 하는것을 선택할 위험이 있습니다.

HTML문서의 시작 부분에 DOCTYPE을 넣어야 합니다. 주석이나 XML 선언과 같이 DOCTYPE 앞에 무엇이든 있으면 Internet Expolorer 9 이상에서는 quirks모드가 트리거 됩니다.

의 유일한 목적은 no-quirks 모드를 활성화하는 것입니다. 이전 버전의 HTML 표준 DOCTYPE은 추가적인 의미를 제공했지만, 어떤 브라우저도 렌더링 모드 전환 이외의 다른 용도로 DOCTYPE을 사용한 적이 없습니다.
브라우저가 다양한 모드를 선택하는 시기에 대한 자세한 설명도 참조하세요.

### XHTML

`Content-Type` HTTP 헤더에 `application/xhtml+xml` MIME 타입으로 설정함으로써 XHTML로 제공 하는 경우 해당 문서는 항상 no-quirks 모드로 렌더링되기 때문에 DOCTYPE이 필요하지 않습니다. 단 인터넷 익스플로러는 9부터 XHTML을 지원하기 때문에 인터넷 익스플로러 8의 경우 `application/xhtml+xml`로 기술된 페이지를 표시하지 않고 알 수 없는 형식으로 판단해 다운로드 대화상자가 표시될 수 있다는 점에 유의하세요.

XHTML 같은(XHTML-like) 콘텐트를 `text/html` MIME 타입으로 제공한다면 웹 브라우저는 이를 HTML로 인식하므로, 표준 모드로 렌더링하려면 DOCTYPE을 기술해야 한다.

어떤 모드가 사용되었는지 확인하려면 어떻게 해야 하나요?
-------------------------------

페이지가 quirks 또는 limited-quirks 모드에서 랜더링 되는 경우 Firefox는 개발자 도구의 콘솔탭에 경고를 기록합니다. 이 경고가 표시되지 않으면 Firefox가 no-quirk 모드를 사용하고 있는것입니다.

자바스크립트에서 `document.compatMode`의 값은 문서가 quirks 모드에 있는지 여부를 표시합니다. 값이 `"BackCompat"`이면 문서가 quirks 모드라는 것이고 그렇지 않으면 `"CSS1Compat"` 값을 가집니다.


HTML 참고서 - HTML: Hypertext Markup Language

HTML 참고서
========

HTML 참고서는 HTML의 모든 **요소**와 **특성**의 설명을 담고 있습니다.

HTML 요소 참고서

태그를 사용해 생성할 수 있는 HTML 요소를 나열하는 문서입니다.

HTML 특성 참고서

HTML의 요소는 특성을 갖습니다. 특성은 요소의 다양한 설정이나 행동을 사용자가 원하는 방식대로 바꿀 수 있는 값입니다.

전역 특성

전역 특성은 모든 HTML에서 공통으로 사용할 수 있는 특성입니다. 일부 요소에는 아무런 효과도 없을 수 있습니다.

콘텐츠 카테고리

HTML 요소는 하나 이상의 콘텐츠 카테고리에 속할 수 있습니다. 콘텐츠 카테고리는 같은 성질을 가진 요소를 묶습니다.

HTML에서 사용하는 날짜와 시간 형식 (en-US)

특정 HTML 요소는 날짜와 시간을 값이나 특성의 값으로 가질 수 있습니다. `<input>` (en-US) 요소의 날짜 및 시간 형태는 물론 `<ins>`와 `<del>` 요소도 이에 해당합니다.