recursal/MDN huggingface dataset:
Geolocation.getCurrentPosition()
================================

**Secure context:** This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

**`Geolocation.getCurrentPosition()`** 메서드는 장치의 현재 위치를 가져옵니다.

구문
--


```js
navigator.geolocation.getCurrentPosition(success, error, [options]);
```

### 매개변수

`success`

`GeolocationPosition` 객체를 유일한 매개변수로 받는 콜백 함수입니다.

`error` Optional

`GeolocationPositionError` (en-US) 객체를 유일한 매개변수로 받는 콜백 함수입니다.

`options` Optional

다음을 포함하는 객체입니다.

`maximumAge`

캐시에 저장한 위치정보를 대신 반환할 수 있는 최대 시간을 나타내는 양의 `long` 값입니다. `0`을 지정한 경우 장치가 위치정보 캐시를 사용할 수 없으며 반드시 실시간으로 위치를 알아내려 시도해야 한다는 뜻입니다. `Infinity`를 지정한 경우 지난 시간에 상관없이 항상 캐시에 저장된 위치정보를 반환해야 함을 나타냅니다. 기본 값은 0입니다.

`timeout`

기기가 위치를 반환할 때 소모할 수 있는 최대 시간(밀리초)을 나타내는 양의 `long` 값입니다. 기본 값은 `Infinity`로, 위치를 알아내기 전에는 `getCurrentPosition()`이 반환하지 않을 것임을 나타냅니다.

`enableHighAccuracy`

위치정보를 가장 높은 정확도로 수신하고 싶음을 나타내는 불리언 값입니다. `true`를 지정했으면, 지원하는 경우 장치가 더 정확한 위치를 제공합니다. 그러나 응답 속도가 느려지며 전력 소모량이 증가하는 점에 주의해야 합니다. 반면 `false`를 지정한 경우 기기가 더 빠르게 반응하고 전력 소모도 줄일 수 있는 대신 정확도가 떨어집니다. 기본 값은 `false`입니다.


예제
--


```js
var options = {
  enableHighAccuracy: true,
  timeout: 5000,
  maximumAge: 0,
};

function success(pos) {
  var crd = pos.coords;

  console.log("Your current position is:");
  console.log(`Latitude : ${crd.latitude}`);
  console.log(`Longitude: ${crd.longitude}`);
  console.log(`More or less ${crd.accuracy} meters.`);
}

function error(err) {
  console.warn(`ERROR(${err.code}): ${err.message}`);
}

navigator.geolocation.getCurrentPosition(success, error, options);
```

명세
--

| Specification |
| --- |
| Geolocation API # getcurrentposition-method |

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

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

같이 보기
-----

* Geolocation API 사용하기
* `Navigator.geolocation`
CustomEvent()
=============

**`CustomEvent()`** 생성자는 새로운 `CustomEvent`를 생성합니다.

구문
--


```js
CustomEvent(typeArg);
CustomEvent(typeArg, options);
```

### 매개변수

`typeArg`

이벤트의 이름을 나타내는 문자열입니다.

`options` Optional

다음 속성을 포함하는 객체입니다.

* `"detail"`: 이 이벤트 내에 포함할, 이벤트의 세부 정보를 나타내는 값입니다. 기본 값은 `null`입니다. 처리기에서 `CustomEvent.detail` 속성을 통해 이 값에 접근할 수 있습니다.
* `Event()` 생성자의 옵션에 지정할 수 있는 모든 속성.

예제
--


```js
// CustomEvent 생성
const catFound = new CustomEvent("animalfound", {
  detail: {
    name: "cat",
  },
});
const dogFound = new CustomEvent("animalfound", {
  detail: {
    name: "dog",
  },
});

// 적합한 이벤트 수신기 부착
obj.addEventListener("animalfound", (e) => console.log(e.detail.name));

// 이벤트 발송
obj.dispatchEvent(catFound);
obj.dispatchEvent(dogFound);

// 콘솔에 "cat"과 "dog"가 기록됨
```


이벤트 생성 및 발동 문서에서 더 많은 예제를 확인하세요.

명세서
---

| Specification |
| --- |
| DOM Standard # ref-for-dom-customevent-customevent |

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

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

함께 보기
-----

* `CustomEvent`
* 이벤트 생성 및 발동
CustomEvent.detail
==================

`CustomEvent` 인터페이스의 **`detail`** 읽기 전용 속성은 이벤트를 초기화할 때 제공한 데이터를 반환합니다.

값
-

이벤트를 초기화할 때 제공한 데이터입니다.

예제
--


```js
// CustomEvent 생성
const catFound = new CustomEvent("animalfound", {
  detail: {
    name: "cat",
  },
});
const dogFound = new CustomEvent("animalfound", {
  detail: {
    name: "dog",
  },
});

// 적합한 이벤트 수신기 부착
obj.addEventListener("animalfound", (e) => console.log(e.detail.name));

// 이벤트 발송
obj.dispatchEvent(catFound);
obj.dispatchEvent(dogFound);

// 콘솔에 "cat"과 "dog"가 기록됨
```

명세서
---

| Specification |
| --- |
| DOM Standard # ref-for-dom-customevent-detail② |

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

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

같이 보기
-----

* `CustomEvent`
FileReader.readAsText()
=======================

**`readAsText()`** 메서드는 지정된 `Blob` 이나 `File` 의 컨텐츠를 읽기 위해 사용합니다. 읽기 연산이 끝나면, `readyState` (en-US) 가 `DONE`으로 바뀌고, `loadend (en-US)` 이벤트가 트리거 되고, `result` 프로퍼티는 파일의 내용을 텍스트 문자열로 가집니다.

**참고:** `Blob.text()` (en-US) 메서드는 파일을 텍스트로 읽는 프로미스 기반의 새 API 입니다.

문법
--


```js
instanceOfFileReader.readAsText(blob[, encoding]);
```

### 매개변수

`blob`

읽어 들일 `Blob` 이나 `File`

`encoding` Optional

반환 데이터에 사용될 문자열 인코딩을 지정. 매개변수가 지정되지 않으면 기본적으로 UTF-8이라고 가정합니다.

명세
--

| Specification |
| --- |
| File API # readAsDataText |

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

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

함께 보기
-----

* `FileReader`
FileReader.result
=================

파일의 내용을 반환한다. 이 속성은 읽기가 완료 된 후에만 사용 가능 하며 데이터의 형식은 읽기 작업에 어떤 함수가 사용되었는가에 의해 정해진다.

Syntax
------


```js
var file = instanceOfFileReader.result;
```

Value
-----

읽기 작업에 사용된 함수에 의해 string 또는 `ArrayBuffer` 가 된다.

명세서
---

| Specification |
| --- |
| File API # dom-filereader-result |

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

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

See also
--------

* `FileReader`
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
=========================

`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
===================

`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
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)
============================

**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
================

현재 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.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
============

`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
====================

`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
===============

`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.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
================================

**`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() 메서드
===================================

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