recursal/MDN huggingface dataset:
Element: children property
==========================

읽기 전용인 **`children`** 속성은 호출된 요소의 모든 자식 `요소` (en-US)를 포함하는 동적인 `HTMLCollection`을 반환합니다.

`Element.children`은 요소 노드만을 포함합니다. 텍스트 및 주석 노드와 같이 요소가 아닌 노드를 포함한 모든 자식 노드를 가져오기 위해서는 `Node.childNodes`를 사용합니다.

값
-

`HTMLCollection`은 `node`의 자식인 DOM 요소의 동적이고 정렬된 컬렉션입니다. 컬렉션의 `item()` 메서드 혹은 JavaScript 배열 형식 표기법을 사용하여 컬렉션의 개별 자식 노드에 접근할 수 있습니다.

요소에 요소 자식이 없으면 `children`은 `length`가 `0`인 빈 목록입니다.

예제
--


```js
const myElement = document.getElementById("foo");
for (const child of myElement.children) {
  console.log(child.tagName);
}
```

명세서
---

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

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

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

같이 보기
-----

* `Node.childNodes`
HTMLElement: input 이벤트
======================

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

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

* Learn more
* See full compatibility
* Report feedback
**`input`** 이벤트는 `<input>` (en-US), `<select>` (en-US), `<textarea>` (en-US) 요소의 `value`가 바뀔 때 발생합니다.

`input`은 또한 `contenteditable`이나 `designMode`가 활성화된 요소에서도 발생합니다. `contenteditable`과 `designMode`에서의 이벤트 대상은 '편집 호스트'가 됩니다. 이 두 특성이 여러 특성에 적용된 경우, 편집할 수 없는 부모를 둔 가장 가까운 조상 요소이 편집 호스트입니다.

`type=checkbox` 또는 `type=radio`인 `<input>` 요소에서는 HTML Living Standard 명세에 따라 사용자가 컨트롤을 토글할 때마다 `input` 이벤트가 발생해야 합니다. 하지만 역사적으로 이 명세가 항상 맞는 것은 아니었습니다. 호환성을 먼저 확인하세요. 이 요소들에서는 `change` 이벤트로 대체하는 방법도 있습니다.

`<textarea>` (en-US)와 텍스트 입력을 허용하는 `<input>` (en-US)(`type=text`, `type=tel`, ...)에서의 이벤트 인터페이스는 `InputEvent`고, 나머지 요소에서는 `Event`입니다.

**참고:** `input` 이벤트는 요소의 `value`가 변할 때마다 발생합니다. `change` 이벤트는 엔터 키를 누르거나 리스트에서 옵션을 선택하는 등 변경점을 '반영'해야 발생한다는 점에서 다릅니다.

구문
--

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


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

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

이벤트 유형
------

일반 `Event`.

예제
--

이 예제에서는 `<input>` (en-US) 요소의 값을 바꿀 때마다 기록을 남깁니다.

### HTML


```html
<input placeholder="텍스트 입력" name="name" />
<p id="values"></p>
```

### JavaScript


```js
const input = document.querySelector("input");
const log = document.getElementById("values");

input.addEventListener("input", updateValue);

function updateValue(e) {
  log.textContent = e.target.value;
}
```

### 결과

명세서
---

| Specification |
| --- |
| UI Events # event-type-input |
| HTML Standard # handler-oninput |

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

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

같이 보기
-----

* 관련 이벤트
    + `beforeinput` (en-US)
    + `change`
    + `invalid` (en-US)
Element.getElementsByTagName()
==============================

**Element.getElementsByTagName()** 메서드는 제공된 태그 네임(tag name)을 가지는 엘리먼트의 유효한 `HTML 컬랙션`를 반환합니다. 엘리먼트가 특정된 범위를 검색하는 경우, 그 자신의 엘리먼트는 제외하고, 특정된 엘리먼트의 하위에 있는 서브트리가 검색됩니다. 반환된 리스트가 *live* 상태이면, 리스트는 DOM 트리와 함께 자동적으로 업데이트 되는 것을 의미합니다. 결과적으로, 동일한 엘리먼트와 인자값으로 **Element.getElementsByTagName()** 을 여러번 호출할 필요성은 없어집니다.

HTML 문서 내에서 HTML 엘리먼트가 호출되면, getElementsByTagName는 진행하기 전에 그 인자들을 소문자로 변환합니다. 따라서, 카멜케이스로 이루어진 SVG 엘리먼트를 HTML문서의 서브트리 내에서 매칭하고자 하는 경우에는 `Element.getElementsByTagNameNS()` (en-US)을 사용해야 합니다.

Element.getElementsByTagName는 특정된 엘리먼트의 하위에 있는 엘리먼트 만을 검색하는 것으로 한정된 것을 제외하고는 `Document.getElementsByTagName()`와 실질적으로 유사합니다.

문법
--


```js
elements = element.getElementsByTagName(tagName);
```


* `elements` is a *live* `HTMLCollection` of found elements in the order they appear in the sub-tree. If no elements were found, the `HTMLCollection` is empty.
* 요소들의 서브트리안에서 나타나는 순서대로 발견된 요소들은 live `HTMLCollection` 입니다.
* `element` is the element from where the search should start. Note that only the descendants of this element are included in the search, but not the element itself.
* 검색이 시작되어야 하는 요소에서부터 요소들이라고 할 수 있습니다. 요소 그 자체가 아니라 요소들에서 파생된 요소만 검색에 포함된다는 것을 알아두세요.
* `tagName` is the qualified name to look for. The special string `"*"` represents all elements. For compatibility with XHTML, lower-case should be used.
* tagName은 둘러볼 만한 가치가 있는 이름이다.특별한 문자열인 "\*"은 모든 요소들을 대표합니다. XHTML과의 호환성을 위해서, 소문자가 사용되어야 합니다.
Example 예제
----------


```js
// check the alignment on a number of cells in a table.
var table = document.getElementById("forecast-table");
var cells = table.getElementsByTagName("td");
for (var i = 0; i < cells.length; i++) {
  var status = cells[i].getAttribute("data-status");
  if (status == "open") {
    // grab the data
  }
}
```

Specifications 명세
-----------------

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

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

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

`blur` 이벤트는 엘리먼트의 포커스가 해제되었을때 발생합니다. 이 이벤트와 `focusout` (en-US) 이벤트의 가장 다른점은 `focusout` (en-US) 은 이벤트 버블링이 발생합니다.

General info
------------

Specification

DOM L3

Interface
`FocusEvent` (en-US)
Bubbles

No

Cancelable

No

Target

Element

Default Action

None.


> 
> **Note:** 이 이벤트가 처리될때 `Document.activeElement`의 값이 브라우저마다 다릅니다 (Firefox bug 452307): IE10은 이 값을 포커스가 옮겨가는 엘리먼트에 추가하지만, Firefox와 크롬은 도큐먼트의 `body` 에 추가합니다.
> 
> 
> 

Properties
----------

| Property | Type | Description |
| --- | --- | --- |
| `target` 읽기 전용 | `EventTarget` | Event target (DOM element) |
| `type` 읽기 전용 | `DOMString` | The type of event. |
| `bubbles` 읽기 전용 | `Boolean` | Whether the event normally bubbles or not. |
| `cancelable` 읽기 전용 | `Boolean` | Whether the event is cancellable or not. |
| `relatedTarget` 읽기 전용 | `EventTarget` (DOM element) | null |

이벤트 위임
------

이 이벤트에 이벤트 위임을 적용하는 방법은 두가지가 있습니다 : 브라우저가 지원한다면 `focusout` 이벤트를 사용하거나, `addEventListener` (en-US)의 "useCapture" 파라미터를 `true`로 설정하세요:

### HTML Content


```html
<form id="form">
  <input type="text" placeholder="text input" />
  <input type="password" placeholder="password" />
</form>
```

### JavaScript Content


```js
var form = document.getElementById("form");
form.addEventListener(
  "focus",
  function (event) {
    event.target.style.background = "pink";
  },
  true,
);
form.addEventListener(
  "blur",
  function (event) {
    event.target.style.background = "";
  },
  true,
);
```


#### 결과

명세서
---

| Specification |
| --- |
| UI Events # event-type-blur |
| HTML Standard # handler-onblur |

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

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

같이 보기
-----

* The `HTMLElement.blur()` (en-US) method
* Related events: `focus` (en-US), `focusin` (en-US), `focusout` (en-US)
* This event on `Window` targets: `blur` (en-US) event
* Focusing: focus/blur
Element.removeAttribute()
=========================

**`Element.removeAttribute()`** 메서드는 요소에서 주어진 이름의 특성을 제거합니다.

구문
--


```js
element.removeAttribute(attrName);
```

### 매개변수

`attrName`

요소에서 제거할 특성 이름을 지정하는 `DOMString`. 지정하지 않으면 오류 없이 아무 동작도 하지 않습니다.

### 반환 값

`undefined`.

사용 일람
-----

많은 특성은 `null`을 대입했을 때 예상치 못한 동작을 하곤 합니다. 그러므로 특성을 삭제할 때 `null`을 직접 대입하거나, `setAttribute()`의 매개변수로 제공하기보단 `removeAttribute()` 메서드를 사용해야 합니다.

예제
--


```js
// Given: <div id="div1" align="left" width="200px">
document.getElementById("div1").removeAttribute("align");
// Now: <div id="div1" width="200px">
```

명세
--

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

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

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

**`Element.classList`** 는 엘리먼트의 클래스 속성의 컬렉션인 활성 `DOMTokenList` (en-US)를 반환하는 읽기 전용 프로퍼티이다.

`classList` 사용은 공백으로 구분된 문자열인 `element.className`을 통해 엘리먼트의 클래스 목록에 접근하는 방식을 대체하는 간편한 방법이다.

구문
--
```

const elementClasses = elementNodeReference.classList;
```


`elementClasses`는 `elementNodeReference`의 클래스 속성을 나타내는 `DOMTokenList` (en-US)이다. 만약 클래스 속성이 설정되어 있지 않거나 비어있다면 *elementClasses.length*는 `0`을 반환한다. `element.classList` 그 자체는 읽기 전용 프로퍼티지만 `add()`와 `remove()` 메서드를 이용하여 변형할 수 있다.

메서드
---

`add( String [, String [, ...]] )`
지정한 클래스 값을 추가한다. 만약 추가하려는 클래스가 엘리먼트의 `class` 속성에 이미 존재한다면 무시한다.
`remove( String [, String [, ...]] )`
지정한 클래스 값을 제거한다.

**노트:** 존재하지 않는 클래스를 제거하는 것은 **에러를 발생시키지 않습니다.**

`**item**( Number )`
콜렉션의 인덱스를 이용하여 클래스 값을 반환한다.
`**toggle**( String [, force] )`
하나의 인수만 있을 때: 클래스 값을 토글링한다. 즉, 클래스가 존재한다면 제거하고 `false`를 반환하며, 존재하지 않으면 클래스를 추가하고 `true`를 반환한다.
두번째 인수가 있을 때: 두번째 인수가 `true`로 평가되면 지정한 클래스 값을 추가하고 `false`로 평가되면 제거한다.
`contains( String )`
지정한 클래스 값이 엘리먼트의 `class` 속성에 존재하는지 확인한다.
`replace( oldClass, newClass )`
존재하는 클래스를 새로운 클래스로 교체한다.
예제
--


```js
const div = document.createElement("div");
div.className = "foo";

// our starting state: <div class="foo"></div>
console.log(div.outerHTML);

// use the classList API to remove and add classes
div.classList.remove("foo");
div.classList.add("anotherclass");

// <div class="anotherclass"></div>
console.log(div.outerHTML);

// if visible is set remove it, otherwise add it
div.classList.toggle("visible");

// add/remove visible, depending on test conditional, i less than 10
div.classList.toggle("visible", i < 10);

console.log(div.classList.contains("foo"));

// add or remove multiple classes
div.classList.add("foo", "bar", "baz");
div.classList.remove("foo", "bar", "baz");

// add or remove multiple classes using spread syntax
const cls = ["foo", "bar"];
div.classList.add(...cls);
div.classList.remove(...cls);

// replace class "foo" with class "bar"
div.classList.replace("foo", "bar");
```


**참고:** Firefox 26 이전의 버전에서는 add/remove/toggle 메서드에서 여러 인수의 사용을 구현하지 않았다. https://bugzilla.mozilla.org/show\_bug.cgi?id=814014 링크를 참조하라.

명세
--

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

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

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

참고
--

* `element.className`
* `DOMTokenList` (en-US)
Element.closest()
=================

`Element` (en-US)의 **`closest()`** 메서드는 주어진 CSS 선택자와 일치하는 요소를 찾을 때까지, 자기 자신을 포함해 위쪽(부모 방향, 문서 루트까지)으로 문서 트리를 순회합니다.

구문
--


```js
closest(selectors);
```

### 매개변수

`selectors`

`Element` (en-US)와 그 조상 요소들에 테스트할, 유효한 CSS 선택자 문자열입니다.

### 반환 값

`selectors`에 일치하는 가장 가까운 조상 `Element` (en-US) 또는 자기 자신, 일치하는 요소가 없으면 `null`.

### 예외

`SyntaxError` `DOMException` (en-US)

`selectors`가 유효한 CSS 선택자가 아니면 발생합니다.

예제
--

### HTML


```html
<article>
  <div id="div-01">
    Here is div-01
    <div id="div-02">
      Here is div-02
      <div id="div-03">Here is div-03</div>
    </div>
  </div>
</article>
```

### JavaScript


```js
const el = document.getElementById("div-03");

// ID가 "div-02"인 가장 가까운 조상
console.log(el.closest("#div-02")); // <div id="div-02">

// div 안에 놓인 div인 가장 가까운 조상
console.log(el.closest("div div")); // <div id="div-03">

// div면서 article을 부모로 둔 가장 가까운 조상
console.log(el.closest("article > div")); // <div id="div-01">

// div가 아닌 가장 가까운 조상
console.log(el.closest(":not(div)")); // <article>
```

폴리필
---

`element.closest()`는 지원하지 않지만, `element.matches()`(또는 공급자 접두사를 포함한 동일 메서드, 즉 IE9+)는 지원하는 브라우저를 위한 폴리필입니다.


```js
if (!Element.prototype.matches) {
  Element.prototype.matches =
    Element.prototype.msMatchesSelector ||
    Element.prototype.webkitMatchesSelector;
}

if (!Element.prototype.closest) {
  Element.prototype.closest = function (s) {
    var el = this;

    do {
      if (Element.prototype.matches.call(el, s)) return el;
      el = el.parentElement || el.parentNode;
    } while (el !== null && el.nodeType === 1);
    return null;
  };
}
```


정말 IE 8을 지원해야 하는 경우, 아래의 폴리필을 사용하면 비록 느리게나마 같은 작업을 할 수 있습니다. 하지만 IE 8에서는 CSS 2.1 선택자만 사용할 수 있고, 이 폴리필을 실제 운영하는 웹 사이트에 적용하면 심각한 지연 시간의 원인이 될 수 있습니다.


```js
if (window.Element && !Element.prototype.closest) {
  Element.prototype.closest = function (s) {
    var matches = (this.document || this.ownerDocument).querySelectorAll(s),
      i,
      el = this;
    do {
      i = matches.length;
      while (--i >= 0 && matches.item(i) !== el) {}
    } while (i < 0 && (el = el.parentElement));
    return el;
  };
}
```

명세
--

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

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

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

### 호환성 참고사항

* Edge 15-18에서는 요소가 컨텍스트 객체(일반 DOM의 경우, `Document`)와 연결되지 않은 경우 `null`을 반환합니다. 따라서 `document.createElement(tagName).closest(tagName)`의 결과는 항상 `null`입니다.
같이보기
----

* CSS 선택자 참고서
* 선택자를 받는 `Element` (en-US) 메서드: `Element.querySelector()` (en-US), `Element.querySelectorAll()` (en-US), `Element.matches()` (en-US)
Element: cut 이벤트
================

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

사용자가 수정 불가능한 콘텐츠에 대해 잘라내기를 시도할 경우에도 `cut` 이벤트는 발생하지만, 데이터는 비어있을 것입니다.

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

이벤트의 기본 동작은 선택한 영역(존재하는 경우)을 클립보드로 복사한 후 문서에서 제거하는 것입니다.

`cut` 이벤트 처리기는 이벤트의 `ClipboardEvent.clipboardData` 속성에 대해 `setData(format, data)` (en-US) 메서드를 호출해 클립보드로 복사할 콘텐츠를 수정할 수 있고, `event.preventDefault()`를 호출해 기본 동작을 취소할 수도 있습니다.

기본 동작을 취소할 경우 잘라낸 영역을 문서에서 제거하지도 않는다는 점에 주의하세요. 따라서 기본 잘라내기 동작을 흉내내는 처리기를 구현하는 경우, 문서의 수정도 직접 해줘야 합니다.

처리기에서 클립보드 데이터를 읽을 수는 없습니다.

합성 `cut` 이벤트를 생성해서 발송할 수는 있지만, 이 방법으로는 시스템 클립보드나 문서 내용에 영향을 줄 수 없습니다.

예제
--

### 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 source = document.querySelector("div.source");

source.addEventListener("cut", (event) => {
  const selection = document.getSelection();
  const reversed = Array.from(selection.toString()).reverse().join("");

  event.clipboardData.setData("text/plain", reversed);
  selection.deleteFromDocument();
  event.preventDefault();
});
```

### 결과

명세
--

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

윈도우에서 마우스 오른쪽 클릭시 발생하는 이벤트 이벤트 핸들러 속성 입니다. 기본동작을 막지 않는 한 (아래의 예제를 참조하세요), 브라우저의 컨텍스트 메뉴가 활성화됩니다. (그러나 IE8는 이것과 관련된 버그가 있어 contextmenu 가 정의 되어있다고 할지라도 활성화 되지 않습니다). 이 이벤트는 비활성화되지 않은(non-disabled) 오른쪽 클릭 이벤트와 함께 발생하며 "contextmenu" 속성 을 가진 엘리먼트에는 달리지 않는다는 것을 유의하세요.

Syntax
------


```js
window.oncontextmenu = funcRef;
//funcRef refers to the function to be called
```

Example
-------

페이지상에서 오른쪽 클릭을 막는 예제들 입니다:


```js
document.oncontextmenu = function () {
  // Use document as opposed to window for IE8 compatibility
  return false;
};

window.addEventListener(
  "contextmenu",
  function (e) {
    // Not compatible with IE < 9
    e.preventDefault();
  },
  false,
);
```

명세서
---

| Specification |
| --- |
| UI Events # event-type-contextmenu |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Element: prepend() 메서드
======================

**`Element.prepend()`** 메서드는 `Element` (en-US)의 첫 번째 자식 이전에 `Node` (en-US) 객체 혹은 문자열 객체 집합을 삽입합니다. 문자열 객체는 `Text` 노드와 동등하게 삽입됩니다.

구문
--


```js
prepend(param1)
prepend(param1, param2)
prepend(param1, param2, /\* … ,\*/ paramN)
```

### 매개변수

`param1`, …, `paramN`

삽입할 `Node` (en-US) 혹은 문자열 객체 집합.

### 반환 값

없음 (`undefined`).

### 예외

`HierarchyRequestError` `DOMException` (en-US)

노드가 계층에서 지정된 위치에 삽입될 수 없을 때 에러를 던집니다.

예제
--

### 요소를 앞에 추가하기


```js
let div = document.createElement("div");
let p = document.createElement("p");
let span = document.createElement("span");
div.append(p);
div.prepend(span);

console.log(div.childNodes); // NodeList [ <span>, <p> ]
```

### 텍스트를 앞에 추가하기


```js
let div = document.createElement("div");
div.append("Some text");
div.prepend("Headline: ");

console.log(div.textContent); // "Headline: Some text"
```

### 요소와 텍스트를 앞에 추가하기


```js
let div = document.createElement("div");
let p = document.createElement("p");
div.prepend("Some text", p);

console.log(div.childNodes); // NodeList [ #text "Some text", <p> ]
```

### prepend 메서드는 범위가 지정되지 않습니다

`prepend()` 메서드는 `with` 문으로 범위가 지정되지 않습니다.
 자세한 내용은 `Symbol.unscopables` (en-US) 참고하시기 바랍니다.


```js
let div = document.createElement("div");

with (div) {
  prepend("foo");
}
// ReferenceError: prepend is not defined
```

명세서
---

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

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

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

같이 보기
-----

* `Element.append()` (en-US)
* `Node.appendChild()`
* `Node.insertBefore()` (en-US)
* `Element.before()` (en-US)
* `Element.insertAdjacentElement()` (en-US)
* `NodeList`
Element: copy 이벤트
=================

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

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

이벤트의 기본 동작은 선택한 영역(존재하는 경우)을 클립보드로 복사하는 것입니다.

`copy` 이벤트 처리기는 이벤트의 `ClipboardEvent.clipboardData` 속성에 대해 `setData(format, data)` (en-US) 메서드를 호출해 클립보드로 복사할 콘텐츠를 수정할 수 있고, `event.preventDefault()`를 호출해 기본 동작을 취소할 수도 있습니다.

그러나, 처리기에서 클립보드 데이터를 읽을 수는 없습니다.

합성 `copy` 이벤트를 생성해서 발송할 수는 있지만, 이 방법으로는 시스템 클립보드에 영향을 줄 수 없습니다.

예제
--

### 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 source = document.querySelector("div.source");

source.addEventListener("copy", (event) => {
  const selection = document.getSelection();
  const reversed = Array.from(selection.toString()).reverse().join("");

  event.clipboardData.setData("text/plain", reversed);
  event.preventDefault();
});
```

### 결과

명세
--

| 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`
* `Document`를 대상으로 한 같은 이벤트: `copy`
* `Window`를 대상으로 한 같은 이벤트: `copy`
Element.getElementsByClassName()
================================

`Element` (en-US)의 메소드 **`getElementsByClassName()`** 는 주어진 클래스를 가진 모든 자식 엘리먼트의 실시간 `HTMLCollection` 을 반환합니다.

`Document`의 `getElementsByClassName()` (en-US) 메소드는 도큐먼트 루트로부터 도큐먼트 전체를 탐색한다는 점을 제외하고는 동일하게 작동합니다.

Syntax
------


```js
var elements = element.getElementsByClassName(names);
```

### Parameters

`names`

검색할 클래스 혹은 클래스들을 띄어쓰기로 구분한 `DOMString`

### Return value

실시간으로 업데이트되는 해당 클래스명을 가진 요소 목록의 `HTMLCollection` 이 반환됩니다.

Usage notes
-----------

항상 그렇듯, 반환되는 collection은 실시간입니다. 즉, 함수가 호출된 이후에도 DOM 트리의 현재 상태가 반영됩니다. `names` 에 해당하는 클래스를 가진 요소가 하위에 추가되면, 그 요소는 즉시 collection에 나타납니다. 비슷하게, `names` 에 매칭되는 클래스를 갖고 있지 않은 요소에 매칭되는 클래스명이 적용되면, 그 요소 역시 즉시 collection에 나타나게 됩니다.

반대도 역시 마찬가지입니다. 클래스명이 더 이상 `names` 와 일치하지 않게 되면, collection으로 부터 즉시 제거됩니다.

**참고:** 호환모드에서는 클래스명의 대소문자를 구분하지 않습니다. 그 외의 경우에는, 대소문자를 구분합니다.

Examples
--------

### 단일 클래스 찾기

요소들 중 하나의 클래스를 포함하고 있는 요소를 검색하기 위해서는, 그 클래스명을 `getElementsByClassName()`의 인자로 넣으세요:


```js
element.getElementsByClassName("test");
```


아래의 예시는 `main` 이라는 `id` 를 가진 요소의 하위 요소들 중 `test`라는 클래스를 가진 모든 요소를 탐색합니다.


```js
document.getElementById("main").getElementsByClassName("test");
```

### 여러개의 클래스로 탐색하기

`red` 와 `test` 라는 클래스를 모두 포함하고 있는 요소를 탐색하기 위해서는 다음과 같이 합니다:


```js
element.getElementsByClassName("red test");
```

### 결과값 검토하기

collection의 개별 요소를 가져오기 위해 `HTMLCollection` 의`item()` 메소드를 이용하거나 표준 배열 문법을 사용할 수 있습니다. 아래는 잘못된 코드의 예시입니다. `"matches"` 는 `"colorbox"` 클래스가 삭제됨에 따라 바로 변경될것이기 때문에 **아래의 코드는 작동하지 않습니다.**


```js
var matches = element.getElementsByClassName("colorbox");

for (var i = 0; i < matches.length; i++) {
  matches[i].classList.remove("colorbox");
  matches.item(i).classList.add("hueframe");
}
```


대신 다른 방법을 사용하세요. 예시:


```js
var matches = element.getElementsByClassName("colorbox");

while (matches.length > 0) {
  matches.item(0).classList.add("hueframe");
  matches[0].classList.remove("colorbox");
}
```


위 코드는 `"colorbox"` 클래스를 가진 모든 자식 요소를 찾고, `item(0)` 을 호출해 `"hueframe"`이라는 클래스를 추가합니다 . 그리고 `"colorbox"` 클래스를 제거합니다(배열 표기법을 사용하여). 다른 요소 (만약 남아있다면) 가 `item(0)` 이 될 것입니다.

### 배열 함수를 이용해 결과값을 필터링하기

`HTMLCollection`을 `this` 로 사용하면 `Array.prototype` 을 어떤 `HTMLCollection`에서든 사용할 수 있습니다. 아래의 예제에서는 `test` 클래스를 가진 모든 `<div>` (en-US) 요소를 찾아봅니다 :


```js
var testElements = document.getElementsByClassName("test");
var testDivs = Array.prototype.filter.call(
  testElements,
  function (testElement) {
    return testElement.nodeName === "DIV";
  },
);
```

명세서
---

| Specification |
| --- |
| DOM Standard # ref-for-dom-element-getelementsbyclassname |

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

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

지정된 요소의 속성 값을 설정합니다. 속성이 이미 있으면 값은 업데이트됩니다. 속성이 없다면 지정된 이름과 값으로 새 속성이 추가됩니다.

속성의 현재 값을 얻으려면 `getAttribute()` (en-US)를 사용하고, 속성을 제거하려면 `removeAttribute()`를 호출하세요.

구문
--


```js
setAttribute(name, value)
```

### 매개변수

`name`

값을 설정할 속성의 이름을 지정하는 문자열입니다. 속성 이름은 HTML 문서의 HTML 요소에서 `setAttribute()`가 호출될 때 모두 자동으로 소문자로 변환됩니다.

`value`

속성에 할당할 값이 포함된 문자열입니다. 지정된 문자열이 아닌 값은 자동으로 문자열로 변환됩니다.

불리언 속성은 값이 요소에 존재하는 경우 `true`로 간주됩니다. 선행 또는 후행 공백 없이 값을 빈 문자열(`""`)로 설정하거나 속성의 이름으로 설정해야 합니다. 실제 예제는 아래를 참조하세요.

지정된 `value`가 문자열로 변환되기 때문에 `null`을 지정한다고 해서 반드시 예상대로 작동하지 않습니다. 속성을 제거하거나 해당 값을 `null`로 설정하는 대신 속성 값을 문자열 `"null"`로 설정합니다. 속성을 제거하려면 `removeAttribute()`를 호출하세요.

### 반환 값

없음 (`undefined`).

### 예외

`InvalidCharacterError` `DOMException` (en-US)

지정된 속성 `name`에 속성 이름에 유효하지 않은 문자가 하나 이상 포함되어 있습니다.

예제
--

다음 예제에서 `setAttribute()`는 `<button>`에 속성을 설정합니다.

### HTML


```html
<button>Hello World</button>
```


```
button {
  height: 30px;
  width: 100px;
  margin: 1em;
}
```

### JavaScript


```js
const button = document.querySelector("button");

button.setAttribute("name", "helloButton");
button.setAttribute("disabled", "");
```


이 예제는 다음 두 가지를 보여줍니다.

* 위의 `setAttribute()`에 대한 첫 번째 호출은 `name` 속성의 값을 "helloButton"으로 변경하는 것을 보여줍니다. 브라우저의 페이지 검사기(Chrome, Edge, Firefox, Safari)를 사용하여 이를 확인할 수 있습니다.
* `disabled`와 같은 불리언 속성의 값을 설정하려면 아무 값으로든 설정할 수 있습니다.
 빈 문자열 또는 속성의 이름이 권장되는 값입니다. 중요한 것은 속성이 존재하는 경우 **실제 값에 관계없이** 해당 값이 참으로 간주된다는 것입니다. 속성이 없다는 것은 해당 값이 `false`임을 의미합니다. `disabled` 속성의 값을 빈 문자열(`""`)로 설정하면 `disabled`를 `true`로 설정하여 버튼이 비활성화됩니다.

DOM methods dealing with element's attributes:

| Not namespace-aware, most commonly used methods | Namespace-aware variants (DOM Level 2) | DOM Level 1 methods for dealing with `Attr` nodes directly (seldom used) | DOM Level 2 namespace-aware methods for dealing with `Attr` nodes directly (seldom used) |
| --- | --- | --- | --- |
| `setAttribute` (DOM 1) | `setAttributeNS` (en-US) | `setAttributeNode` (en-US) | `setAttributeNodeNS` (en-US) |
| `getAttribute` (en-US) (DOM 1) | `getAttributeNS` (en-US) | `getAttributeNode` (en-US) | `getAttributeNodeNS` (en-US) |
| `hasAttribute` (en-US) (DOM 2) | `hasAttributeNS` (en-US) | - | - |
| `removeAttribute` (DOM 1) | `removeAttributeNS` (en-US) | `removeAttributeNode` (en-US) | - |

명세서
---

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

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

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

### Gecko 참고

`setAttribute()`를 사용하여 특정 속성, 특히 XUL의 `value`를 수정하는 것은 속성이 기본값을 지정하기 때문에 일관되지 않게 작동합니다. 현재 값에 액세스하거나 수정하려면 속성을 사용해야 합니다. 예를 들어 `Element.setAttribute()` 대신 `Element.value`를 사용합니다.