recursal/MDN huggingface dataset:
선택자로 DOM 요소 선택하기
================

선택자 API는 DOM에서 `Element` (en-US) 노드를 선택자를 통해 빠르고 쉽게 가져올 수 있는 메서드를 제공합니다. 이 방법은 JavaScript 코드에서 반복문을 통해 특성 요소를 탐색하던 이전 방법보다 훨씬 빠릅니다.

NodeSelector 인터페이스
------------------

본 명세는 `Document`, `DocumentFragment`, `Element` (en-US) 인터페이스를 구현하는 모든 객체에 메서드 두 개를 추가합니다.

`querySelector`

노드의 하위 트리에서 첫 번째로 일치하는 `Element` (en-US) 노드를 반환합니다. 결과가 없으면 `null`을 반환합니다.

`querySelectorAll`

노드의 하위 트리 안에서 일치하는 모든 `Element`를 포함한 `NodeList`를 반환합니다. 결과가 없으면 빈 `NodeList`를 반환합니다.


**참고:** The `NodeList` (en-US) returned by `querySelectorAll()` (en-US) is not live, which means that changes in the DOM are not reflected in the collection. This is different from other DOM querying methods that return live node lists.

You may find examples and details by reading the documentation for the `querySelector()` (en-US) and `querySelectorAll()` (en-US) methods, as well as in the article Code snippets for querySelector.

선택자
---

The selector methods accept one or more comma-separated selectors to determine what element or elements should be returned. For example, to select all paragraph (`p`) elements in a document whose CSS class is either `warning` or `note`, you can do the following:


```js
var special = document.querySelectorAll("p.warning, p.note");
```


You can also query by ID. For example:


```js
var el = document.querySelector("#main, #basic, #exclamation");
```


After executing the above code, `el` contains the first element in the document whose ID is one of `main`, `basic`, or `exclamation`.

You may use any CSS selectors with the `querySelector()` and `querySelectorAll()` methods.

같이 보기
-----

* Selectors API
* `element.querySelector` (en-US)
* `element.querySelectorAll` (en-US)
* `document.querySelector` (en-US)
* `document.querySelectorAll` (en-US)
* Code snippets for querySelector
W3C DOM Level 1 Core 사용하기
=========================

The W3C's DOM Level 1 Core 는 documents의 콘텐츠 트리를 변경하기 위한 강력한 객체형 모델입니다. 웹 스크립팅을 위한 초석이기도 한 이 모델은 Mozilla Firefox and Microsoft Internet Explorer를 포함한 주요 브라우저에서 지원합니다.

What is a content tree?
-----------------------

많은 HTML 웹 페이지 저자(이하 개발자)는 HTML를 - 태그와 글자로 버무려진 - 평평한 무언가라고 생각할 수 있습니다. 하지만 HTML은, 그 이상의 의미를 가지고 있습니다. 모든 HTML 문서 (SGML document or XML document 또한) 트리 구조를 가지고 있습니다. 예를 들면 아래의 문서와 도면의 구조는 굉장히 유사합니다. (완전히 같지는 않습니다! whitespace in the DOM (en-US) 문서를 참조하세요.)


```html
<html>
  <head>
    <title>My Document</title>
  </head>
  <body>
    <h1>Header</h1>
    <p>Paragraph</p>
  </body>
</html>
```


![내용을 포함하는 루트 및 노드 요소가 있는 문서의 트리 형식의 DOM](/ko/docs/Web/API/Document_object_model/Using_the_Document_Object_Model/using_the_w3c_dom_level_1_core-doctree.jpg)

Mozilla에서 어떤 HTML 문서를 파싱할 때, 컨텐츠 트리를 만들고 이를 HTML 보여줄 때 사용합니다.

DOM Level 1 Core에 대해서 설명하기 위한 용어에 대한 설명입니다. 위 도면에서 나온 모든 박스는 트리의 노드입니다. 한 노드 위의 선은 노드 간의 부모 - 자식 관계를 설명합니다. 상위 노드가 부모 노드이고, 하위 노드는 자식 노드입니다. 두 자식 노드를 같은 부모 노드를 가지고 있기 때문에 형제자매 노드라고 부를 수 있습니다. 비슷하게, ancestors와 descendants라는 용어를 사용할 수도 있습니다.

What does the DOM Level 1 Core let me do?
-----------------------------------------

The W3C DOM Level 1은 컨텐츠 트리를 웹 페이지 **개발자가 원하는 어떤 방식으로든** 바꿀 수 있게 합니다. 백지 상태에서 HTML 문서를 제작할 수 있을 만큼 강력합니다. 또한 스크립트 언어를 통해 언제 어디서든 HTML 문서를 개발자가 조작할 수 있도록 합니다. JavaScript를 통해서 개발자는 동적으로 DOM을 가장 쉽게 변경할 수 있습니다. JavaScript는 전역 객체의 `document` 객체를 통해 오래된 브라우저가 접근했던 그 방식대로, HTML 문서에 접근 가능합니다, 이 `document` 객체는 the W3C's DOM Level 1 spec의 Document interface 가 적용되어 있습니다.

A simple example
----------------

개발자가 상단의 HTML 문서에서 header의 내용을 바꾸고, 한 문단(Paragraph) 대신 두 문단으로 적용하고 싶다면, 아래와 같은 스크립트를 작성할 수 있습니다.

### HTML Content


```html
<body>
  <input type="button" value="Change this document." onclick="change()" />
  <h2>Header</h2>
  <p>Paragraph</p>
</body>
```

### JavaScript Content


```js
function change() {
  // document.getElementsByTagName("H2") 는 <h2> 엘리먼트의
  // NodeList를 반환(return)합니다. 0부터 시작합니다.

  var header = document.getElementsByTagName("H2").item(0);
  // 헤더의 첫번째 자식 노드는 Text 노드입니다.
  header.firstChild.data = "A dynamic document";
  // 이제 헤더는 "A dynamic document"가 되었습니다.

  var para = document.getElementsByTagName("P").item(0);
  para.firstChild.data = "This is the first paragraph.";

  // 두번째 문단을 만들기 위한 새로운 Text 노드를 만들었습니다.
  var newText = document.createTextNode("This is the second paragraph.");
  // 두번째 문단을 만들기 위한 새로운 p 엘리먼트를 만들었습니다.
  var newElement = document.createElement("P");
  // 새로운 p 엘리먼트에 텍스트를 넣어 문단을 만듭니다.
  newElement.appendChild(newText);
  // 생성한 문단을 HTML 문서 마지막에 넣기 위해
  // (para의 부모인) HTML BODY에 append합니다.
  para.parentNode.appendChild(newElement);
}
```


여기에서 완성된 예시를 확인할 수 있습니다.

How can I learn more?
---------------------

이제 DOM의 기본적인 개념에 대한 설명이 끝났습니다. DOM Level 1 fundamental methods (en-US) 에 대해서 궁금하시다면, 더 자세히 공부하실 수 있습니다.

더욱 정확하고 엄밀한 설명은 W3C DOM Level 1 Core specification 에서 확인하실 수 있습니다. 개발자에게 정보는 DOM 객체에 대한 설명과, 객체의 특성과 메소드에 대한 설명이 특히 유용합니다. MDN의 다른 DOM 관련 문서도 참고 부탁 드립니다.
IdleDeadline.didTimeout
=======================

**`IdleDeadline`** 인터페이스의 읽기 전용 속성(property)인 **`didTimeout`** 는 `Window.requestIdleCallback()`이 호출될 때 지정된 timeout 간격이 만료되어, 유휴 콜백(idle callback)이 호출되는지 여부를 나타내는 Boolean 값 입니다.

`didTimeout` 이 `true` 면, `IdleDeadline` 객체의 `timeRemaining()` (en-US) 메서드는 대략 0을 반환합니다..

유휴 콜백은 사용자 에이전트가 충분한 유휴 시간을 사용할 수 없는 경우에도, 수행하려는 작업이 실제로 발생하는지 확인하기 위해 timeout 개념을 지원합니다. 브라우저가 너무 바빠서 시간을 허락하지 않더라도, 액션을 수행해야 하는 경우 콜백은 일반적으로 `didTimeout`값을 확인합니다. 필요로 하는 작업을 수행하거나, 이상적인 상황을 유지하기 위해 수행할 수 있는 최소한의 작업을 수행하도록 대응하고, 새로운 콜백을 예약하여 나머지 작업을 다시 시도하도록 해야합니다.

Syntax
------


```js
var timedOut = IdleDeadline.didTimeout;
```

### Value

Boolean 으로, 콜백의 timeout 기간이 경과하여 콜백이 실행 중이면 `true` 입니다. 사용자 에이전트가 유휴 상태이고 콜백에 시간을 제공하고 있기 때문에 콜백이 실행 중이면, `false` 입니다.

Example
-------

Cooperative Scheduling of Background Tasks API의 complete example 를 참조하세요

명세서
---

| Specification |
| --- |
| requestIdleCallback() Cooperative Scheduling of Background Tasks # dom-idledeadline-didtimeout |

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

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

See also
--------

* Collaborative Scheduling of Background Tasks
* `IdleDeadline`
* `Window.requestIdleCallback()`
* `Window.cancelIdleCallback()` (en-US)
AudioWorkletNode()
==================

**`AudioWorkletNode()`** 생성자는 새로운 `AudioWorkletNode` 객체를 생성하는데, 이는 사용자 정의 오디오 프로세싱을 수행하기 위해 JavaScript 함수를 사용하는 `AudioNode`를 나타냅니다.

구문
--


```js
var node = new AudioWorkletNode(context, name);
var node = new AudioWorkletNode(context, name, options);
```

### 매개변수

`context`

이 노드가 관련될 `BaseAudioContext` 인스턴스.

`name`

이 노드가 기반으로 할 `AudioWorkletProcessor`의 이름을 나타내는 문자열. 제공된 이름을 가진 프로세서는 `AudioWorkletGlobalScope.registerProcessor()` 메서드를 사용하여 반드시 맨 먼저 등록되어야 합니다.

`options` Optional

새로운 노드를 설정하기 위해 다음의 선택적인 속성들 중 0개 또는 그 이상을 포함하는 객체:

**참고:** 이 객체에 적용된 structured clone algorithm의 결과는
 또한 연관된 `AudioWorkletProcessor()` 생성자로 내부적으로 전달됩니다
 — 이는 근본적인 사용자 정의 `AudioWorkletProcessor`의 커스텀 초기화를 가능케 합니다.


`numberOfInputs` Optional

`numberOfInputs` 속성을 초기화할 값. 기본값은 1입니다.

`numberOfOutputs` Optional

`numberOfOutputs` 속성을 초기화할 값. 기본값은 1입니다.

`outputChannelCount` Optional

각 출력에 대한 채널의 숫자를 정의하는 **배열**. 예를 들자면, *outputChannelCount: [n, m]* 은 첫번째 출력의 채널 숫자를 *n* 으로 그리고 두번째 출력을 *m* 으로 명시합니다. 배열의 길이는 반드시 `numberOfOutputs`과 일치해야 합니다.

`parameterData` Optional

`key`가 사용자 정의 파라미터의 이름이고 `value`가 이것의 초기 값인 채로, (노드의 `parameters` 속성에 있는) 이 노드에 있는 사용자 정의 `AudioParam` 객체의 초기 값을 포함하는 객체.

`processorOptions` Optional

근본적인 `AudioWorkletProcessor`의 사용자 정의 초기화를 위해 사용될 수 있는 모든 추가적인 데이터.


### 반환 값

새롭게 생성된 `AudioWorkletNode` 인스턴스.

### 예외

`NotSupportedError` `DOMException` (en-US)

명시된 `options.outputChannelCount` 이 `0` 또는 현재 구현 지원보다 더 큽니다.

`options.numberOfInputs`와 `options.numberOfOutputs`가 둘 다 0입니다.

`IndexSizeError` `DOMException` (en-US)

`options.outputChannelCount` 배열의 길이가 `options.numberOfOutputs`와 일치하지 않습니다.

사용 일람
-----

각기 다른 `options` 매개변수 값들은 다음의 영향을 가질 수 있습니다.

만약 입력의 수와 출력의 수가 둘 다 0으로 설정된다면, `NotSupportedError`가 발생될 것이고 노드 구성 과정은 중단됩니다. 만약 `outputChannelCount` 배열의 길이가 `numberOfOutputs`과 일치하지 않다면, `IndexSizeError` `DOMException` (en-US)이 발생할 것입니다.

만약 `outputChannelCount`이 명시되지 않았고, `numberOfInputs`와 `numberOfOutputs`가 모두 1이라면, `AudioWorkletNode`의 초기 채널 카운트는 1으로 설정됩니다. 이것은 계산된 채널의 수로 동적으로 변화하는 출력 채널 카운트를 변화시키는 효과를 가지는데, 이는 입력의 채널 카운트와 `AudioNode` 속성 `channelCountMode`의 현재 설정에 기반합니다.

그렇지 않으면, 만약 `outputChannelCount`이 제공되고 만약 `numberOfInputs`와 `numberOfOutputs`의 값이 둘 다 1이라면, 오디오 worklet 노드의 채널 카운트는 `outputChannelCount`의 값으로 설정됩니다. 그렇지 않으면, 출력 채널의 집합에 있는 각 채널의 채널 카운트는 해당하는 `outputChannelCount` 배열의 값과 일치되도록 설정됩니다.

예제
--

*사용자 정의 오디오 프로세싱을 시연하는 완전한 예제는 `AudioWorkletNode` 페이지에서 찾아보실 수 있습니다.*

명세
--

| Specification |
| --- |
| Web Audio API # dom-audioworkletnode-audioworkletnode |

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

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

같이 보기
-----

* Web Audio API
* AudioWorklet을 사용한 백그라운드 오디오 프로세싱
* `AudioWorkletNode` 인터페이스
AudioWorkletNode.onprocessorerror
=================================

`AudioWorkletNode` 인터페이스의 `onprocessorerror` 속성은 `processorerror` 이벤트가 발생했을 때 호출될 이벤트 처리기 함수를 정의합니다. 이것은 노드 뒤의 근본적인 `AudioWorkletProcessor`가 이것의 생성자, `process` 메서드, 또는 유저에 의해 정의된 모든 클래스 메서드에서 예외를 발생시켰을 때 발생합니다.

한 번 예외가 발생되면, 프로세서 (그리고 따라서 노드) 는 생애 주기 내내 무음을 출력할 것입니다.

구문
--


```js
audioWorkletNode.onprocessorerror = function() { ... };
```

예제
--

// 예제 코드 추가하기

명세서
---

| Specification |
| --- |
| Web Audio API # dom-audioworkletnode-onprocessorerror |

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

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

같이 보기
-----

* Web Audio API 사용하기
AudioWorkletNode.port
=====================

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

`AudioWorkletNode` 인터페이스의 읽기 전용 **`port`** 속성은 연관된 `MessagePort` (en-US)를 반환합니다. 이것은 노드와 노드에 연관된 `AudioWorkletProcessor` 사이에서 소통하기 위해 사용될 수 있습니다.

**참고:** 채널의 다른 쪽 끝에 있는 포트는
 프로세서의 `port` 속성 아래에서
 사용 가능합니다.


구문
--


```js
audioWorkletNodeInstance.port;
```

### 값

`AudioWorkletNode` 와 이것에 연관된 `AudioWorkletProcessor`를 연결하는 `MessagePort` (en-US) 객체.

예제
--

양방향 소통 능력을 시연하기 위해서, 우리는 `AudioWorkletProcessor` 를 생성할 것인데, 이는 무음을 출력하고 이것의 `AudioWorkletNode` 으로부터의 핑 요청에 응답할 것입니다.

우선, 우리는 커스텀 `AudioWorkletProcessor` 를 정의하고, 등록할 필요가 있습니다. 이 작업은 별도의 파일에서 이루어져야 함에 주의하세요.


```js
// ping-pong-processor.js
class PingPongProcessor extends AudioWorkletProcessor {
  constructor(...args) {
    super(...args);
    this.port.onmessage = (e) => {
      console.log(e.data);
      this.port.postMessage("pong");
    };
  }
  process(inputs, outputs, parameters) {
    return true;
  }
}

registerProcessor("ping-pong-processor", PingPongProcessor);
```


이제 메인 스크립트 파일에서 우리는 프로세서를 로드하고, 프로세서의 이름을 전달하며 `AudioWorkletNode` 의 인스턴스를 생성하고, 노드를 오디오 그래프에 연결할 것입니다.


```js
const audioContext = new AudioContext();
await audioContext.audioWorklet.addModule("ping-pong-processor.js");
const pingPongNode = new AudioWorkletNode(audioContext, "ping-pong-processor");
// 매 초 AudioWorkletNode로부터
// AudioWorkletProcessor에 'ping' 문자열을 포함하는 메시지를 보냅니다
setInterval(() => pingPongNode.port.postMessage("ping"), 1000);
pingPongNode.port.onmessage = (e) => console.log(e.data);
pingPongNode.connect(audioContext.destination);
```


이것은 `"ping"` 과 `"pong"` 문자열을 콘솔에 매 초 출력할 것입니다.

명세
--

| Specification |
| --- |
| Web Audio API # dom-audioworkletnode-port |

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

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

같이 보기
-----

* Web Audio API
* Web Audio
API 사용하기
AudioWorkletNode.parameters
===========================

`AudioWorkletNode` 인터페이스의 읽기 전용 **`parameters`** 속성은 연관된 `AudioParamMap`을 반환합니다 — 즉, `AudioParam` 객체들의 유사 `Map` 컬렉션입니다. 이것들은 `AudioWorkletProcessor`의 static `parameterDescriptors` getter에 따라 근본적인 `AudioWorkletProcessor`의 생성 중에 초기화됩니다.

구문
--


```js
audioWorkletNodeInstance.parameters;
```

### 값

`AudioParam` 인스턴스들을 포함하는 `AudioParamMap` 객체. 이것들은 기본 `AudioNode` 들과 같은 방법으로 자동화 가능하고, 그들의 계산된 값들은 여러분의 `AudioWorkletProcessor`의 `process` 메서드에서 사용될 수 있습니다.

예제
--

사용자 정의 `AudioParam` 들의 생성과 사용을 시연하기 위해, 우리는 `AudioWorkletNode` 페이지의 예제를 확장할 것입니다. 저 글에서 우리는 백색소음을 출력하는 단순한 노드를 생성했습니다. 여기서 추가적으로, 우리는 출력의 볼륨을 직접 변경할 수 있도록 사용자 정의 gain 속성을 생성할 것입니다 (비록 여러분은 이를 달성하기 위해 `GainNode` (en-US)를 또한 사용할 수도 있지만요).

우선, 우리는 커스텀 `AudioWorkletProcessor`를 정의하고, 등록할 필요가 있습니다. 이 작업은 별도의 파일에서 이루어져야 함을 기억하세요.

우리는 static `parameterDescriptors` getter를 추가함으로써 프로세서를 확장합니다. 이것은 초기화된 `AudioParam` 객체들로 이것의 `parameters` 를 채우기 위해 `AudioWorkletNode` 생성자에 의해 내부적으로 사용될 것입니다.


```js
// white-noise-processor.js
class WhiteNoiseProcessor extends AudioWorkletProcessor {
  static get parameterDescriptors() {
    return [
      {
        name: "customGain",
        defaultValue: 1,
        minValue: 0,
        maxValue: 1,
        automationRate: "a-rate",
      },
    ];
  }

  process(inputs, outputs, parameters) {
    const output = outputs[0];
    output.forEach((channel) => {
      for (let i = 0; i < channel.length; i++) {
        channel[i] =
          (Math.random() \* 2 - 1) \*
          (parameters["customGain"].length > 1
            ? parameters["customGain"][i]
            : parameters["customGain"][0]);
        // 참고: 파라미터는 128개의 값 (각 128 샘플에 대한 하나의 값) 을 가진 배열을 포함하지만,
        // 만약 그 순간에 자동화가 스케쥴되어 있지 않다면
        // 모든 128개의 샘플에 대해 사용될 하나의 값을 포함할 수도 있습니다.
      }
    });
    return true;
  }
}

registerProcessor("white-noise-processor", WhiteNoiseProcessor);
```


다음으로, 메인 스크립트 파일에서 우리는 프로세서를 로드하고, 프로세서의 이름을 전달하며 `AudioWorkletNode` 의 인스턴스를 생성하고, 노드를 오디오 그래프에 연결합니다.


```js
const audioContext = new AudioContext();
await audioContext.audioWorklet.addModule("white-noise-processor.js");
const whiteNoiseNode = new AudioWorkletNode(
  audioContext,
  "white-noise-processor",
);
whiteNoiseNode.connect(audioContext.destination);
```


이제 우리는 노드의 gain을 다음과 같이 변경할 수 있습니다:


```js
const gainParam = whiteNoiseNode.parameters.get("customGain");
gainParam.setValueAtTime(0, audioContext.currentTime);
gainParam.linearRampToValueAtTime(0.5, audioContext.currentTime + 0.5);
```

명세
--

| Specification |
| --- |
| Web Audio API # dom-audioworkletnode-parameters |

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

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

같이 보기
-----

* Web Audio API
* Web Audio
API 사용하기
GeolocationCoordinates: latitude 속성
===================================

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

**`GeolocationCoordinates.latitude`** 읽기 전용 속성은 위치의 위도를 십진수 도(°, DD)로 나타낸 `double`입니다.

값
-

위치의 위도를 십진수 도(°, DD)로 나타낸 `double`입니다.

명세서
---

| Specification |
| --- |
| Geolocation API # latitude-longitude-and-accuracy-attributes |

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

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

같이 보기
-----

* Geolocation API 사용하기
* `GeolocationCoordinates`
GeolocationCoordinates: speed 속성
================================

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

**`GeolocationCoordinates.speed`** 읽기 전용 속성은 장치의 속도를 초속 미터 단위로 나타낸 `double`입니다. 구현체가 속도를 측정하지 못하면 이 값은 `null`입니다.

값
-

장치의 속도를 초속 미터 단위로 나타낸 `double`입니다.

명세서
---

| Specification |
| --- |
| Geolocation API # speed-attribute |

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

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

같이 보기
-----

* Geolocation API 사용하기
* `GeolocationCoordinates`
GeolocationCoordinates: longitude 속성
====================================

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

`GeolocationCoordinates` 인터페이스의 읽기 전용 **`longitude`** 속성은 위치의 경도를 십진수 도(°, DD)로 나타낸 숫자입니다. `GeolocationCoordinates` 객체는 측정 시간을 나타내는 밀리초 Unix 시간의 타임스탬프와 함께 `GeolocationPosition` 인터페이스를 구성하며, `GeolocationPosition`은 Geolocation API에서 지리적 위치를 반환하는 함수들의 반환 타입입니다.

값
-

`longitude`의 값은 `Coordinates` 객체가 나타내는 지구상 위치의 경도를 십진수 도(°, DD)로 나타낸 숫자입니다. 이 값은 World Geodetic System 1984 명세 (WGS 84)가 정의합니다.

**참고:** 0°의 본초 자오선은 대부분의 사람들이 알고 있는 그리니치 자오선과 정확히 일치하지는 않습니다. 0°는 IERS 기준 자오선으로, 그리니치 자오선에서 5.3 아크초(102미터) 동쪽에 위치합니다. 이 표준은 GPS가 사용하는 것과 같습니다.

예제
--

다음의 간단한 예제에서는 사용자의 위치를 가져와서 그 좌표를 출력합니다.

### JavaScript

아래 JavaScript 코드는 사용자가 버튼을 클릭하면 위치 정보를 가져와서 출력하는 이벤트 수신기를 생성합니다.


```js
let button = document.getElementById("get-location");
let latText = document.getElementById("latitude");
let longText = document.getElementById("longitude");

button.addEventListener("click", () => {
  navigator.geolocation.getCurrentPosition((position) => {
    let lat = position.coords.latitude;
    let long = position.coords.longitude;

    latText.innerText = lat.toFixed(2);
    longText.innerText = long.toFixed(2);
  });
});
```


버튼과 위도/경도를 각각 표시할 두 요소에 대한 참조를 쉽게 하기 위해 변수를 설정한 후, `<button>`의 `addEventListener()`를 호출해서 이벤트 수신기는 부착하는 모습입니다. 사용자가 이 버튼을 클릭하면 위치 정보를 가져오고 출력할 것입니다.

`click` 이벤트를 수신하면, 우리 코드는 `getCurrentPosition()`을 호출해 장치의 현재 위치를 요청합니다. 이 요청은 비동기 작업이므로 요청 완료 시 호출될 콜백을 제공하고, 이 콜백은 알아낸 위치를 나타내는 `GeolocationPosition` 객체를 입력받습니다.

이 `GeolocationPosition` 객체에서 사용자의 위도와 경도를 각각 `position.coords.latitude`와 `position.coords.longitude`로 가져옵니다. 두 값을 소숫점 아래 두 자리까지의 값으로 변환한 후, `<span>` 요소들이 두 값을 각각 표시하도록 갱신합니다.

### HTML

결과를 출력하기 위한 HTML은 다음과 같습니다.


```html
<p>
  당신의 위치는 위도 <span id="latitude">0.00</span>°, 경도
  <span id="longitude">0.00</span>° 입니다.
</p>
<button id="get-location">내 위치 찾기</button>
```

### 결과

여기서 예제를 시험해 보세요.

명세서
---

| Specification |
| --- |
| Geolocation API # latitude-longitude-and-accuracy-attributes |

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

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

같이 보기
-----

* Geolocation API 사용하기
* 이 속성이 속한 `GeolocationCoordinates`
* `Geolocation.getCurrentPosition()`과 `watchPosition()`이 가져오는 위치정보를 나타내는 최상위 인터페이스, `GeolocationPosition`
GeolocationCoordinates: heading 속성
==================================

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

**`GeolocationCoordinates.heading`** 읽기 전용 속성은 장치가 이동 중인 방위를 나타내는 `double`입니다. 이 값은 장치가 북쪽에서 벗어난 각도를 도(°) 단위로 표현하며, 진북(真北)의 `0`도부터 시계방향으로 진행하므로 `90`도는 동쪽, `270`도는 서쪽입니다. `heading`은 `GeolocationCoordinates.speed`가 `0`이면 `NaN`이고, 장치가 방위 정보를 제공하지 못하면 `null`입니다.

값
-

장치가 이동 중인 방위를 나타내는 `double`입니다.

명세서
---

| Specification |
| --- |
| Geolocation API # heading-attribute |

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

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

같이 보기
-----

* Geolocation API 사용하기
* `GeolocationCoordinates`
GeolocationCoordinates: accuracy 속성
===================================

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

**`GeolocationCoordinates.accuracy`** 읽기 전용 속성은 `GeolocationCoordinates.latitude`와 `GeolocationCoordinates.longitude`의 오차범위(신뢰수준 95%)를 미터 단위로 표현한, 엄격히 양수로 제한된 `double`입니다.

값
-

`GeolocationCoordinates.latitude`와 `GeolocationCoordinates.longitude`의 오차범위(신뢰수준 95%)를 미터로 나타낸 양의 `double`입니다.

명세서
---

| Specification |
| --- |
| Geolocation API # latitude-longitude-and-accuracy-attributes |

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

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

같이 보기
-----

* Geolocation API 사용하기
* `GeolocationCoordinates`
GeolocationCoordinates: altitudeAccuracy 속성
===========================================

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

**`GeolocationCoordinates.altitudeAccuracy`** 읽기 전용 속성은 `GeolocationCoordinates.altitude`의 오차범위(신뢰수준 95%)를 미터 단위로 표현한, 엄격히 양수로 제한된 `double`입니다. 구현체가 고도 데이터를 제공하지 못하면 이 값은 `null`입니다.

값
-

`GeolocationCoordinates.altitude`의 오차범위(신뢰수준 95%)를 미터로 나타낸 양의 `double`입니다.

명세서
---

| Specification |
| --- |
| Geolocation API # altitude-and-altitudeaccuracy-attributes |

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

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

같이 보기
-----

* Geolocation API 사용하기
* `GeolocationCoordinates`
GeolocationCoordinates: altitude 속성
===================================

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

**`GeolocationCoordinates.altitude`** 읽기 전용 속성은 평균 해수면을 정의하는 WGS84 타원체를 기준으로 했을 때, 이 위치의 고도를 미터 단위로 표현한 `double`입니다. 구현체가 고도 데이터를 제공하지 못하면 이 값은 `null`입니다.

값
-

WGS84 타원체를 기준으로 한 미터 단위의 고도를 나타내는 `double`입니다.

명세서
---

| Specification |
| --- |
| Geolocation API # altitude-and-altitudeaccuracy-attributes |

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

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

같이 보기
-----

* Geolocation API 사용하기
* 이 속성이 속한 `GeolocationCoordinates`
* National Imagery and Mapping Agency Technical Report 8350.2, Third Edition (WGS84)
DOMRect()
=========

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

구문
--


```js
new DOMRect(x, y, width, height);
```

### 매개변수

`x`

`DOMRect` 원점의 X 좌표입니다.

`y`

`DOMRect` 원점의 Y 좌표입니다.

`width`

`DOMRect`의 너비입니다.

`height`

`DOMRect`의 높이입니다.

### 반환 값

새로운 `DOMRect` 객체.

명세
--

| Specification |
| --- |
| Geometry Interfaces Module Level 1 # dom-domrect-domrect |

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

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

같이 보기
-----

* `DOMPoint` (en-US)
* `DOMRect`
* `DOMRect.fromRect()`
DOMRect.fromRect()
==================

`DOMRect` 객체의 **`fromRect()`** 정적 메서드는 주어진 좌표와 크기를 가진 새로운 `DOMRect` 객체를 반환합니다.

구문
--


```js
DOMRect.fromRect(rectangle);
```

### 매개변수

`rectangle` Optional

직사각형의 위치와 크기를 지정하는 객체입니다. 모든 속성의 기본 값은 `0`입니다. 포함할 수 있는 속성은 다음과 같습니다.

* `x`: 직사각형 왼쪽 모서리의 좌표입니다.
* `y`: 직사각형 위쪽 모서리의 좌표입니다.
* `width`: 직사각형의 너비입니다.
* `height`: 직사각형의 높이입니다.

### 반환 값

`DOMRect` 인스턴스.

명세
--

| Specification |
| --- |
| Geometry Interfaces Module Level 1 # dom-domrect-fromrect |

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

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

`HTMLCollection` 의 메소드 `item()` 은 컬렉션 안의 특정 인덱스에 위치한 노드를 반환합니다.

**참고:**`HTMLCollection`은 실시간이기 때문에, DOM을 변경하면 컬렉션 내의 노드도 변경됩니다. 따라서, 한 노드의 인덱스 값이 항상 일정하지는 않습니다.

Syntax
------


```js
var element = HTMLCollection.item(index);
```

### 파라미터

`index`

반환받을 `Node` (en-US)의 위치. `HTMLCollection`에 들어있는 요소들은 도큐먼트에 나타나는 순서와 동일합니다.

### 반환값

주어진 인덱스의 `Node` (en-US). `index`가 0보다 작거나 length 속성보다 크다면 `null`을 반환합니다.

참고사항
----

`item()` 메소드는 `HTMLCollection`으로부터 순서가 매겨진 하나의 요소를 반환합니다. JavaScript에서, `HTMLCollection`을 배열처럼 다루는건 아주 쉽습니다. 아래의 예시를 보세요.

Example
-------


```js
var c = document.images; // HTMLCollection입니다
var img0 = c.item(0); // 이렇게 item() 메소드를 이용할 수 있지만
var img1 = c[1]; // 이렇게 표기하는게 쉽고 더 보편적입니다
```

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

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

See also
--------

* `NodeList.item()`