recursal/MDN huggingface dataset:
Element.clientWidth
===================

**`Element.clientWidth`** 속성은 인라인 요소나 CSS 상에 존재하지 않는 요소에 대해서는 0을 나타내고, 그렇지 않다면 엘리먼트의 내부 너비를 픽셀로 나타냅니다. 내부 너비는 안쪽 여백(패딩)을 포함하지만, 테두리, 바깥 여백(마진) 그리고 수직 스크롤바의 너비는 포함하지 않습니다.

`clientWidth`를 루트 요소(`<html>` 요소 또는 호환 모드 상에서의 `<body>` 요소)에서 사용하면 스크롤바를 제외한 뷰포트의 너비를 반환합니다. 이 방식은 `clientWidth`의 특별한 사용법입니다.

**참고:** 이 속성은 integer로 반올림됩니다. 소수점이 포함된 값이 필요하다면 `element.getBoundingClientRect()`를 사용하시기 바랍니다.

값
-

number.

구문
--


```js
var w = element.clientWidth;
```


`w` 는 요소의 너비를 나타내는 픽셀 단위의 integer입니다.

예제
--

![](/ko/docs/Web/API/Element/clientWidth/dimensions-client.png)

명세서
---

| Specification |
| --- |
| CSSOM View Module # dom-element-clientwidth |

### 참고

`clientWidth`는 MS IE DHTML 요소 모델에서 처음 도입되었습니다.

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

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

같이 보기
-----

* `HTMLElement.offsetWidth` (en-US)
* `Element.scrollWidth` (en-US)
* Determining
the dimensions of elements
Element.outerHTML
=================

`outerHTML` 속성은 요소(element)의 자식 요소를 포함하여 요소를 나타내는 직렬화된 HTML 파편을 가져옵니다. 또한 주어진 문자열에서 파싱한 노드로 요소를 대체할 수 있습니다.

요소의 내용만을 HTML 형태로 가져오거나 설정하기 위해서는 `innerHTML` 속성을 대신 사용하십시오.

문법
--


```js
var content = element.outerHTML;

element.outerHTML = htmlString;
```

### 값

`outerHTML`로 값을 읽어올 때는 요소와 요소의 자식 요소가 직렬화된 HTML이 포함된 `DOMString`을 반환합니다. `outerHTML`로 값을 설정할 때는 요소와 요소의 모든 자식 요소를 `htmlString` 형태로 파싱된 새로운 DOM 트리 구조로 대체합니다.

### 예외

`SyntaxError`

유효하지 않은 HTML 문자열을 사용해 `outerHTML`을 설정하도록 시도할 경우 `SyntaxError` 예외가 발생합니다.

`NoModificationAllowedError`

`Document.documentElement`와 같이 `Document`의 바로 아래 자식 요소에 `outerHTML`을 설정하도록 시도할 경우 `NoModificationAllowedError` 예외가 발생합니다.

예제
--

다음은 요소의 `outerHTML` 속성을 가져오는 예시입니다.


```js
// HTML:
// <div id="d"><p>Content</p><p>Further Elaborated</p></div>

d = document.getElementById("d");
console.log(d.outerHTML);

// '<div id="d"><p>Content</p><p>Further Elaborated</p></div>'
// 위 문자열이 콘솔창에 출력됩니다.
```


다음은 `outerHTML` 속성으로 노드를 대체하는 예시입니다.


```js
// HTML:
// <div id="container"><div id="d">This is a div.</div></div>

container = document.getElementById("container");
d = document.getElementById("d");
console.log(container.firstChild.nodeName); // "DIV"를 출력합니다.

d.outerHTML = "<p>This paragraph replaced the original div.</p>";
console.log(container.firstChild.nodeName); // "P"를 출력합니다.

// #d의 div 요소가 문서 트리에서 제거되고,
// 새 p 요소로 대체되었습니다.
```

참고
--

부모 요소가 없는 요소에 `outerHTML` 속성을 설정하려고 하면 변경되지 않습니다. 많은 브라우저는 예외를 발생시킵니다. 아래는 예시입니다.


```js
var div = document.createElement("div");
div.outerHTML = '<div class="test">test</div>';
// 많은 브라우저에서 DOMException 예외를 발생시킵니다.
console.log(div.outerHTML); // 결과: "<div></div>"
```


또한, 문서 내의 요소가 변경되더라도 변수의 `outerHTML` 속성은 원본 요소를 계속 참조합니다.


```js
var p = document.getElementsByTagName("p")[0];
console.log(p.nodeName); // "P"를 출력합니다.
p.outerHTML = "<div>This div replaced a paragraph.</div>";
console.log(p.nodeName); // 여전히 "P"를 출력합니다.
```

명세
--

| Specification |
| --- |
| DOM Parsing and Serialization # dom-element-outerhtml |

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

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

같이 보기
-----

* DOM 트리를 XML이나 HTML으로 직렬화하는 `XMLSerializer` (en-US)
* XML이나 HTML을 파싱하여 DOM 트리로 변환하는 `DOMParser`
* `HTMLElement.outerText`
element.attributes
==================

요약
--

주어진 요소의 속성 모음(collection)을 반환합니다.

구문
--


```js
var attrs = element.attributes;
```


반환하는 개체는 `Attr` 노드를 포함하는 NamedNodeMap 형입니다. 요소가 지정된 속성이 없으면, 반환하는 개체는 길이가 0입니다. 이 속성은 읽기 전용입니다.

예시
--


```js
// 문서에서 첫 <p> 요소 얻기
var para = document.getElementsByTagName("p")[0];
var atts = para.attributes;
```

주의
--

모음의 항목은 이름과 찾아보기(index)로 접근할 수 있습니다. `NodeList`와는 달리, `NamedNodeMap`은 항목을 어떤 특정 순서로 유지하지 않음을 주의하세요.

여러분은 문서에서 "p1" 요소의 모든 속성값을 찍는 다음 예에서처럼 요소의 속성을 열거(enumerate)할 때 오직 찾아보기로 접근(access by index)을 써야 합니다.


```html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
  <head>
    <title>Attributes example</title>
    <script type="text/javascript">
 function showFirstAttr() {
 var firstPara = document.getElementById("p1");
 var outputText = document.getElementById("result");

 // 먼저, paragraph에 어떤 속성이 있는지 검증
 if (firstPara.hasAttributes()) {
 var attrs = firstPara.attributes;
 var text = "";
 for (var i = attrs.length - 1; i >= 0; i--) {
 text += attrs[i].name + "->" + attrs[i].value;
 }
 outputText.value = text;
 } else {
 outputText.value = "No attributes to show";
 }
 }
 </script>
  </head>

  <body>
    <p id="p1" style="color: green;">Sample Paragraph</p>
    <form action="">
      <p>
        <input
 type="button"
 value="Show first attribute name and value"
 onclick="showFirstAttr();" />
        <input id="result" type="text" value="" />
      </p>
    </form>
  </body>
</html>
```


`NamedNodeMap`은 배열처럼 반복될 수 있지만, `join`, `split` 등과 같은 `Array`에 있는 어떤 특수 메소드는 없습니다.

이름으로 특정 속성에 접근하려면, getAttribute 메소드를 쓰세요.

명세
--

| Specification |
| --- |
| DOM Standard # dom-element-attributes |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Document: keyup event
=====================

\*\*`keyup`\*\*키를 놓을 때 이벤트가 발생합니다.

| 거품 | 예 |
| --- | --- |
| 취소 가능 | 예 |
| 상호 작용 | `KeyboardEvent` |
| 이벤트 핸들러 속성 | `onkeyup` (en-US) |

`keydown` 및 `keyup`이벤트는 어떤 키를 눌렀는지 나타내는 코드를 제공하고 `keypress` 는 입력 된 *문자를* 나타냅니다. . 예를 들어, 소문자 "a"는 `keydown`및 `keyup`에서는 65로보고 되지만에서는 97 로보고 됩니다 `keypress`. 모든 이벤트에서 대문자 "A"는 65로보고됩니다.

> 
> **참고 :** 입력 값의 변경에 대응하는 방법을 찾고 있다면 `[input event](/ko/docs/Web/API/HTMLElement/input_event)`를 사용해야합니다. `keyup` 예를 들어 컨텍스트 메뉴의 텍스트를 텍스트 입력에 붙여 넣는 등의 일부 변경 사항은에서 감지 할 수 없습니다.
> 
> 
> 


```js
eventTarget.addEventListener("keyup", (event) => {
  if (event.isComposing || event.keyCode === 229) {
    return;
  }
  // 무언가를합니다
});
```

예
-

이 예에서는 키를 놓을 때마다 `KeyboardEvent.code` (en-US) 값을 기록합니다.

### addEventListener 키업 예제


```html
<p>먼저 IFrame에 초점을 맞춘 다음 (예 : 클릭하여) 몇 가지 키를 눌러보십시오.</p>
<p id="log"></p>
```



```js
const log = document.getElementById ( 'log');

document.addEventListener ( 'keyup', logKey);

function logKey (e) {
  log.textContent + =`$ {e.code}`;
}
```

### onkeyup 해당


```js
document.onkeyup = logKey;
```

명세서
---

| Specification |
| --- |
| UI Events # event-type-keyup |
| HTML Standard # handler-onkeyup |

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

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

또한보십시오
------

* `keydown`
* `keypress`
* `Element` (en-US) : `keyup` 이벤트
Element.tagName
===============

`Element` (en-US) 인터페이스의 **`tagName`** 읽기 전용 속성은 요소에 호출된 태그 명을 가져온다. 예를 들면, 만약 `<img>` 요소일 경우, 해당 요소의 `tagName` 속성의 내용은 `"IMG"` 가 된다 (이것은 HTML인 경우에 대한 내용이고, XML/XHTML 문서에서는 대소문자가 다르게 나올 수 있다).

구문
--


```js
elementName = Element.tagName;
```

### Value

태그 명이 명시된 문자열을 가져온다, 이 때, 아래 경우에 따라 대소문자가 달라질 수 있다.

* HTML 문서에 설계된 DOM 구조에서 가져온 요소는 항시 대소문자로만 이루어진 값을 가져오게 된다.예를 들면, `<div>` (en-US) 객체로 생성한 요소의 `tagName` 값은 `"DIV"`가 된다.
* XML 문서에 설계된 요소 구조의 경우 문서에 작성된 태그 명을 그대로 가져오게 된다. `"<SomeTag>"` 이라는 명칭으로 태그를 작성하였을 경우, `tagName` 속성 값은 `"SomeTag"`이 된다.

`Element` (en-US) 객체에서 사용하는 `tagName` 속성의 값은 `Node` (en-US) 객체의 `nodeName` (en-US) 속성과 동일한 값을 가져온다.

예시
--

### HTML


```html
<span id="born">내가 어렸을 적...</span>
```

### JavaScript


```js
var span = document.getElementById("born");
console.log(span.tagName);
```


XHTML (또는 여느 XML 방식) 문서의 경우, 정의한 태그 명 그대로 가져오기 때문에, `"span"` 같은 소문자 태그명을 가져오게 될 것이다.그에 반해 HTML 문서에서는, 원본 문서에 정의된 태그명과 달리 대소문자를 무시하면서 대문자로만 이루어진 `"SPAN"` 값을 가져오게 된다.

명세서
---

| Specification |
| --- |
| DOM Standard # ref-for-dom-element-tagname① |

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

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

개요
--

**className** 특정 엘리먼트의 클래스 속성의 값을 가져오거나 설정할 수 있다.

문법
--


```js
var cName = elementNodeReference.className;
elementNodeReference.className = cName;
```


* *cName은 현재 요소의 클래스 혹은 공백으로 구분된 클래스들을 표현하는 문자열 변수이다.*
예제
--


```js
let elm = document.getElementById("item");

if (elm.className === "active") {
  elm.className = "inactive";
} else {
  elm.className = "active";
}
```

주의
--

많은 언어에서 DOM 조작을 위해 사용되는 "class " 키워드와의 혼란을 줄이기 위하여 class 대신 className이라는 프로퍼티 명을 사용한다.

명세
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-element-classname① |

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

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

살펴보기
----

* `element.classList`
Element.clientHeight
====================

`읽기 전용 속성인 Element.clientHeight은` 엘리먼트의 내부 높이를 픽셀로 반환합니다. 이 내부 높이라는 것은 내부 여백(padding)을 포함하지만, 수평 스크롤바의 높이, 경계선, 또는 외부 여백(margin)은 포함하지 않습니다.

`clientHeight` 는 CSS상의 높이 + CSS상의 내부 여백 - 수평 스크롤바의 높이(존재하는 경우에만)로 계산됩니다.

**참고:** 이 속성은 integer로 반올림됩니다. 소수점이 포함된 값이 필요하다면, `element.getBoundingClientRect()`을 사용하시기 바랍니다.

구문
--


```js
var h = element.clientHeight;
```


`h는` 엘리먼트의 높이를 나타내는 픽셀 단위의 integer입니다.

예
-

![Image:Dimensions-client.png](/ko/docs/Web/API/Element/clientHeight/dimensions-client.png)

명세서
---

| Specification |
| --- |
| CSSOM View Module # dom-element-clientheight |

### 주의

`clientHeight` 는 Internet Explorer 의 객체 모델에서 소개된 속성입니다.

같이 보기
-----

* `HTMLElement.offsetHeight`
* `Element.scrollHeight`
* Determining the dimensions of elements
* MSDN Determining the dimensions of elements
Element.id
==========

**`Element.id`** 속성은 요소의 식별자를 나타내며, HTML의 전역적인 id 속성을 반영합니다.

이 값은 도큐먼트 내에서 유일해야 하며, 종종 `getElementById`를 사용하여 요소를 찾아내는데 사용됩니다. `id` 속성을 이용하는 다른 보편적인 방법에는 CSS로 도큐먼트를 스타일링 할때 ID를 선택자로 사용하는 방법이 있습니다.

**참고:** 식별자는 대소문자를 구분하지만, 그래도 ID를 대소문자만 다르게 생성해서는 안됩니다. (클래스명과 식별자에서의 대소문자 구분참고).

Syntax
------


```js
var idStr = elt.id; // 아이디를 가져옵니다.
elt.id = idStr; // 아이디를 부여합니다
```


* \*`idStr`\*는 요소의 식별자입니다.
명세서
---

| Specification |
| --- |
| DOM Standard # ref-for-dom-element-id① |

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

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

See also
--------

* The DOM **id** global attribute.
element.scrollIntoView
======================

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2020.

* Learn more
* See full compatibility
* Report feedback
`Element` (en-US) 인터페이스의 **`scrollIntoView()`** 메소드는 `scrollIntoView()`가 호출 된 요소가 사용자에게 표시되도록 요소의 상위 컨테이너를 스크롤합니다.

문법
--


```js
element.scrollIntoView();
element.scrollIntoView(alignToTop); // Boolean parameter
element.scrollIntoView(scrollIntoViewOptions); // Object parameter
```

### 매개변수

`alignToTop` Optional

불리언 값입니다.

* `true`일 경우, 요소의 상단은 스크롤 가능한 조상 요소의 보이는 영역 상단에 정렬됩니다.
 `scrollIntoViewOptions: {block: "start", inline: "nearest"}`와 일치합니다.
 이 값이 기본 값입니다.
* `false`일 경우, 요소의 하단은 스크롤 가능한 조상 요소의 보이는 영역 하단에 정렬됩니다.
 `scrollIntoViewOptions: {block: "end", inline: "nearest"}`와 일치합니다.

`scrollIntoViewOptions` Optional

Experimental

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

`behavior` Optional

스크롤을 즉시 적용할지 아니면 부드러운 애니메이션을 적용할지 결정합니다. 이 옵션은 다음 값 중 하나의 문자열을 취해야 합니다.

* `smooth`: 스크롤이 부드럽게 움직입니다.
* `instant`: 스크롤이 단번에 즉시 적용됩니다.
* `auto`: 스크롤 동작은 `scroll-behavior` (en-US)의 계산된 값에 의해 결정됩니다.

`block` Optional

 수직 정렬을 정의합니다.
 `start`, `center`, `end`, 또는
 `nearest` 중 하나입니다. 기본 값은 `start`입니다.


`inline` Optional

 수평 정렬을 정의합니다.
 `start`, `center`, `end`, 또는
 `nearest` 중 하나입니다. 기본 값은 `nearest`입니다.



### 반환 값

없음 (`undefined`).

예제
--


```js
const element = document.getElementById("box");

element.scrollIntoView();
element.scrollIntoView(false);
element.scrollIntoView({ block: "end" });
element.scrollIntoView({ behavior: "smooth", block: "end", inline: "nearest" });
```

참고
--

다른 요소의 레이아웃에 따라 위쪽 또는 아래쪽으로 완전히 스크롤되지 않을 수 있습니다.

명세서
---

| Specification |
| --- |
| CSSOM View Module # dom-element-scrollintoview |

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

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

더보기
---

* `Element.scrollIntoViewIfNeeded()` (en-US) 
비표준
Element: insertAdjacentHTML() 메서드
=================================

`Element` (en-US) 인터페이스의 **`insertAdjacentHTML()`** 메서드는 지정된 텍스트를 HTML 혹은 XML로 파싱하고 결과 노드들을 지정된 위치의 DOM 트리에 삽입합니다.

구문
--


```js
insertAdjacentHTML(position, text)
```

### 매개변수

`position`

요소와 상대적인 위치를 나타내는 문자열입니다. 다음 문자열 중 하나여야 합니다.

`"beforebegin"`

요소 이전에 위치합니다. 오직 요소가 DOM 트리에 있고 부모 요소를 가지고 있을 때만 유효합니다.

`"afterbegin"`

요소 바로 안에서 처음 자식 이전에 위치합니다.

`"beforeend"`

요소 바로 안에서 마지막 자식 이후에 위치합니다.

`"afterend"`

요소 이후에 위치합니다. 오직 요소가 DOM 트리에 있고 부모 요소를 가지고 있을 때만 유효합니다.


`text`

HTML 혹은 XML로 파싱되고 트리에 삽입되는 문자열입니다.

### 반환 값

없음 (`undefined`).

### 예외

이 메서드는 다음 타입 중 하나의 `DOMException` (en-US)를 발생시킬 수 있습니다.

`NoModificationAllowedError` `DOMException` (en-US)

`position`이 `"beforebegin"` 혹은 `"afterend"`이고 요소가 부모를 가지고 있지 않거나 부모가 `Document` 객체인 경우 에러를 던집니다.

`SyntaxError` `DOMException` (en-US)

`position`이 나열된 네 개의 값 중 하나가 아닌 경우 에러를 던집니다.

설명
--

`insertAdjacentHTML()` 메서드는 사용되고 있는 요소를 다시 파싱하지 않아서 해당 요소 내의 기존 요소들을 손상시키지 않습니다. 이는 추가적인 직렬화 단계를 피하므로 직접적인 `innerHTML` 조작보다 훨씬 빠릅니다.

다음과 같이 삽입된 콘텐츠의 가능한 위치를 시각화할 수 있습니다.


```html
<!-- beforebegin -->
<p>
  <!-- afterbegin -->
  foo
  <!-- beforeend -->
</p>
<!-- afterend -->
```

### 보안 고려 사항

`insertAdjacentHTML()`을 사용하여 페이지에 HTML을 삽입할 때, 이스케이프 문자열이 아닌 사용자 입력을 사용하지 않도록 조심해야 합니다.

일반 텍스트를 삽입할 때 `insertAdjacentHTML()`을 사용해서는 안됩니다. 대신, `Node.textContent` 속성 혹은 `Element.insertAdjacentText()` (en-US) 메서드를 사용합니다. 이는 전달된 콘텐츠를 HTML로 해석하지 않습니다. 대신 원시 텍스트로 삽입합니다.

예시
--

### HTML 삽입

#### HTML


```html
<select id="position">
  <option>beforebegin</option>
  <option>afterbegin</option>
  <option>beforeend</option>
  <option>afterend</option>
</select>

<button id="insert">Insert HTML</button>
<button id="reset">Reset</button>

<p>
  Some text, with a <code id="subject">code-formatted element</code> inside it.
</p>
```


#### CSS


```css
code {
  color: red;
}
```


#### JavaScript


```js
const insert = document.querySelector("#insert");
insert.addEventListener("click", () => {
  const subject = document.querySelector("#subject");
  const positionSelect = document.querySelector("#position");
  subject.insertAdjacentHTML(
    positionSelect.value,
    "<strong>inserted text</strong>",
  );
});
const reset = document.querySelector("#reset");
reset.addEventListener("click", () => {
  document.location.reload();
});
```


#### 결과

명세
--

| Specification |
| --- |
| DOM Parsing and Serialization # dom-element-insertadjacenthtml |

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

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

같이 보기
-----

* `Element.insertAdjacentElement()` (en-US)
* `Element.insertAdjacentText()` (en-US)
* `XMLSerializer` (en-US): DOM 트리를 XML 문자열로 직렬화
* hacks.mozilla.org guest post 경우에 따라 insertAdjacentHTML가 더 빠를 수 있다는 것을 벤치마크를 포함해 보여주는 Henri Sivonen 게시물.
ParentNode.childElementCount
============================

**`ParentNode.childElementCount`** 읽기 전용 속성은 주어진 요소의 자식 요소 개수를 `unsigned long` 타입으로 반환합니다.

**참고:** 이 속성은 처음에 `ElementTraversal` 인터페이스에 정의되었습니다. 이 인터페이스는 자식이 있는 `Node` (en-US)와 자식 `Node` (en-US)를 위한 두 가지 고유한 속성 집합을 포함하고 있었는데, 각각 `ParentNode`와 `ChildNode` 개별 인터페이스로 이동되었습니다. `childElementCount`의 경우 `ParentNode`로 이동했습니다. 이것은 기술적인 변화로 호환성에는 영향을 미치지 않습니다.

문법
--


```js
var count = node.childElementCount;
```


`count`

`unsigned long`(정수) 타입의 반환값.

`node`

`Document`, `DocumentFragment` 또는 `Element` (en-US) 객체.

예제
--


```js
var foo = document.getElementById("foo");
if (foo.childElementCount > 0) {
  // Do something
}
```

폴리필 (IE8 & IE9 & Safari)
------------------------

이 속성은 IE9 이전 버전에서는 지원하지 않습니다. IE9과 Safari는 `Document`와 `DocumentFragment` 객체에서 이 속성을 지원하지 않습니다.


```js
(function (constructor) {
  if (
    constructor &&
    constructor.prototype &&
    constructor.prototype.childElementCount == null
  ) {
    Object.defineProperty(constructor.prototype, "childElementCount", {
      get: function () {
        var i = 0,
          count = 0,
          node,
          nodes = this.childNodes;
        while ((node = nodes[i++])) {
          if (node.nodeType === 1) count++;
        }
        return count;
      },
    });
  }
})(window.Node || window.Element);
```

명세
--

| Specification |
| --- |
| DOM Standard # dom-parentnode-childelementcount |

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

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

참조
--

* `ParentNode`와 `ChildNode` 인터페이스.
* 이 인터페이스를 구현한 객체 타입: `Document`, `Element` (en-US), `DocumentFragment`.
Element: paste 이벤트
==================

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

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

현재 커서가 편집 가능한 맥락 (`<textarea>` (en-US) 등, 또는 `contenteditable` 특성이 `true`인 요소) 내에 위치한 경우, 이벤트의 기본 동작은 커서 위치에 클립보드의 내용을 삽입하는 것입니다.

`paste` 이벤트 처리기는 이벤트의 `ClipboardEvent.clipboardData` 속성에 대해 `getData()` 메서드를 호출해 클립보드 콘텐츠를 읽을 수 있습니다.

데이터 가공 등을 위해 기본 동작을 재정의해야 할 필요가 있는 경우 `event.preventDefault()`을 호출해 취소하고, 직접 데이터를 삽입하면 됩니다.

합성 `paste` 이벤트를 생성해서 발송할 수는 있지만, 이 방법으로는 문서 내용에 영향을 줄 수 없습니다.

예제
--

### HTML


```html
<div class="source" contenteditable="true">
  이 상자에서 텍스트를 복사해보세요...
</div>
<div class="target" contenteditable="true">...여기에 붙여 넣어 보세요.</div>
```


```
div.source,
div.target {
  border: 1px solid gray;
  margin: 0.5rem;
  padding: 0.5rem;
  height: 1rem;
  background-color: #e9eef1;
}
```

### JS


```js
const target = document.querySelector("div.target");

target.addEventListener("paste", (event) => {
  const paste = (event.clipboardData || window.clipboardData).getData("text");
  const reversed = Array.from(paste).reverse().join("");

  const selection = window.getSelection();
  if (!selection.rangeCount) return false;
  selection.deleteFromDocument();
  selection.getRangeAt(0).insertNode(document.createTextNode(reversed));

  event.preventDefault();
});
```

### 결과

명세
--

| 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`
* `Document`를 대상으로 한 같은 이벤트: `paste`
* `Window`를 대상으로 한 같은 이벤트: `paste`
GlobalEventHandlers.ondblclick
==============================

**`ondblclick`** property는 현재 요소(element)의 onDblClick 이벤트 핸들러 코드를 돌려줍니다.

구문
--


```js
element.ondblclick = function;
```


* `function` 은 사용자 정의 함수이며, () 나 변수를 제외하고 생성할 수 있고 또는 아래와 같이 함수명을 선언하지 않고 생성할 수 있습니다.


```js
element.ondblclick = function () {
  console.log("ondblclick event detected!");
};
```

예제
--

다음 예제는 더블클릭의 위치를 기록합니다.

### HTML


```html
<p>Double click anywhere in this example.</p>
<p id="log"></p>
```

### JavaScript


```js
let log = document.getElementById("log");

document.ondblclick = logDoubleClick;

function logDoubleClick(e) {
  log.textContent = `Position: (${e.clientX}, ${e.clientY})`;
}
```

### 결과

명세
--

| Specification |
| --- |
| UI Events # event-type-dblclick |
| HTML Standard # handler-ondblclick |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
UIEvent: UIEvent() 생성자
======================

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

**참고:** 이 생성자로 생성한 인공 이벤트는 보안상의 이유로 신뢰되지 않습니다. 브라우저가 생성한 `UIEvent` 객체들만 신뢰되며 기본 동작을 유발할 수 있습니다.

구문
--


```js
new UIEvent(type)
new UIEvent(type, options)
```

### 매개변수

`type`

이벤트 이름 문자열입니다. 대소문자를 구분하며 브라우저는 `load`, `unload`, `abort`, `error`, `select`를 사용합니다.

`options` Optional

`Event()`에서 사용할 수 있는 속성에 더해 다음 속성들도 포함하는 객체입니다.

`detail` Optional

이벤트 유형에 따라 의미가 다른 숫자 값입니다. 기본 값은 `0`으로, 이 값이 표준 이벤트들에서 갖는 뜻은 `UIEvent.detail` 문서에서 확인할 수 있습니다.

`view` Optional

이벤트에 연관된 `Window`입니다. 기본 값은 `null`입니다.

`sourceCapabilities` Optional 
비표준

터치 이벤트를 생성하는 물리적 장치에 대한 정보를 담고 있는 `InputDeviceCapabilities` (en-US) 객체입니다.


### 반환 값

새로운 `UIEvent` 객체.

명세서
---

| Specification |
| --- |
| UI Events # dom-uievent-uievent |

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

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

같이 보기
-----

* 생성자가 생성하는 객체의 인터페이스인 `UIEvent`
UIEvent: detail 속성
==================

**`UIEvent.detail`** 읽기 전용 속성은, 0이 아니라면, 현재 (또는 이벤트에 따라 다음) 클릭 수를 나타냅니다.

`click`과 `dblclick` 이벤트에서의 `UIEvent.detail`은 현재 클릭 수입니다.

`mousedown` (en-US)과 `mouseup` (en-US) 이벤트에서의 `UIEvent.detail`은 현재 클릭 수에 1을 더한 값입니다.

다른 모든 `UIEvent` 객체의 `UIEvent.detail`은 항상 0입니다.

명세서
---

| Specification |
| --- |
| UI Events # dom-uievent-detail |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
UIEvent: view 속성
================

**`UIEvent.view`** 읽기 전용 속성은 이벤트가 생성된 WindowProxy 객체를 반환합니다. 브라우저에서는 이벤트가 발생한 `Window` 객체입니다.

값
-

`AbstractView` 객체 참조입니다.

명세서
---

| Specification |
| --- |
| UI Events # dom-uievent-view |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
IntersectionObserver.disconnect()
=================================

`IntersectionObserver`의 **`disconnect()`** 메서드는 감지기의 모든 가시성 변화 주시 대상을 해제합니다.

구문
--


```js
intersectionObserver.disconnect();
```

### 반환 값

`undefined`.

명세
--

| Specification |
| --- |
| Intersection Observer # dom-intersectionobserver-disconnect |

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

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

같이 보기
-----

* `observe()`
* `unobserve()`
IntersectionObserver.takeRecords()
==================================

`IntersectionObserver`의 **`takeRecords()`** 메서드는 주시 대상 중에서 마지막 교차 변화 알림 이후, 즉 명시적인 `takeRecords()` 호출 또는 감지기의 콜백 자동 호출 이후 교차 영역에 변화가 생긴 요소를 나타내는 `IntersectionObserverEntry` (en-US) 객체의 배열을 반환합니다.

**참고:** 콜백으로 교차 영역의 변화를 관측하고 있으면 굳이 이 메서드를 호출하지 않아도 됩니다. `takeRecords()`를 호출하면 대기 중인 교차 변화 감지 목록을 초기화하므로 감지기가 콜백을 호출하지 않을 것입니다.

구문
--


```js
intersectionObserverEntries = intersectionObserver.takeRecords();
```

### 반환 값

마지막 교차 변화 알림 이후 교차 영역의 변화를 감지한 대상 요소를 나타내는 `IntersectionObserverEntry` (en-US)의 배열.

명세
--

| Specification |
| --- |
| Intersection Observer # dom-intersectionobserver-takerecords |

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

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

같이 보기
-----

* Intersection Observer API
IntersectionObserver.root
=========================

`IntersectionObserver` 인터페이스의 **`root`** 읽기 전용 속성은 바운딩 박스를 주시 대상의 뷰포트로 취급하는 `Element` (en-US) 또는 `Document`를 나타냅니다.

`root`가 `null`이면 문서의 실제 뷰포트 바운딩 박스를 사용합니다.

값
-

대상 요소가 얼마나 보이는지 판별할 때, 그 뷰포트 경계로서 바운딩 박스를 가져오는 `Element` (en-US) 또는 `Document` 객체입니다.

이 뷰포트 경계에 `IntersectionObserver()` 생성자로 제공한 여백 설정을 적용한 직사각형 영역과, 대상 요소의 경계에서 그 위에 겹치는 다른 요소의 경계를 뺐을 때의 직사각형 영역을 대상 요소에서 볼 수 있는 영역으로 취급합니다.

`root`가 `null`이면 현재 문서를 루트로, 그 뷰포트(문서에서 지금 보이는 영역)를 루트 경계로 사용합니다.

예제
--

CSS `border` 속성을 사용해서 교차 감지기의 루트 요소에 2픽셀 초록색 테두리를 추가하는 예제입니다.


```js
observer.root.style.border = "2px solid #44aa44";
```

명세
--

| Specification |
| --- |
| Intersection Observer # dom-intersectionobserver-root |

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

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

같이 보기
-----

* Intersection Observer API로 요소가 보여진 시간 측정하기 (en-US)