recursal/MDN huggingface dataset:
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()
========================

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

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

**지원이 중단되었습니다:** 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
===============

### Summary

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

### Syntax


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

### 명세서

| Specification |
| --- |
| HTML Standard # dom-document-embeds-dev |
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
=================

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


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

Notes
-----

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

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

* DOM Level 2: referrer
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()
=======================

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

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

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

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

외부 문서로부터 노드를 가져온다. 해당 노드와 그 하위트리는 기존의 문서에서 지워지고 해당 노드의 `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()
========================

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

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

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

**`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 이벤트
==================

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

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

새로운 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()
=========================

### 요약

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

### 문법


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