recursal/MDN huggingface dataset:
CanvasCaptureMediaStreamTrack.requestFrame()
============================================

The `CanvasCaptureMediaStreamTrack` (en-US) 의 메서드 **`requestFrame()`** 은 canvas에서 프레임을 캡처하여 stream으로 보낼 것을 요청한다. 렌더링 타이밍과 프레임 캡처를 섬세하게 제어해야하는 애플리케이션은 `requestFrame()` 을 사용해 프레임을 캡처할 시기를 직접 지정할 수 있다.

프레임의 자동 캡처를 방지하려면 `requestFrame()` 이 호출될 때만 프레임이 캡처되도록 `captureStream()` (en-US) 메서드에 값을 0으로 지정하세요.

구문
--


```js
stream.requestFrame();
```

### Return 값

`undefined`

참고 사항
-----

현재 사양에는 canvas가 origin-clean 이 아닌 경우 예외를 발생시키지 않는다는 점을 지적하는 문제가 플래그로 표시되어 있다. 이것은 앞으로 바뀔 수 있기 때문에 계획을 미리 세우고 `SecurityError` (적용될 수 있는 구체적인 오류는 사양에 언급되어 있지 않지만, 유력한 후보임)와 같은 예외사항을 지켜보는 것이 좋다.

예시
--


```js
// 캡처할 canvas 요소 찾기
var canvasElt = document.getElementsByTagName("canvas")[0];

// stream 가져오기
var stream = canvasElt.captureStream(25); // 25 FPS

// canvas의 현재 상태를 프레임으로 stream에 보내기
stream.getVideoTracks()[0].requestFrame();
```

명세
--

| Specification |
| --- |
| Media Capture from DOM Elements # dom-canvascapturemediastreamtrack-requestframe |

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

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

더 보기
----

* `CanvasCaptureMediaStream` (en-US), the interface it belongs to.
* `<canvas>`
CanvasCaptureMediaStreamTrack.canvas
====================================

The `CanvasCaptureMediaStreamTrack` (en-US) \*\*`canvas`\*\*읽기 전용 속성은 프레임이 캡쳐되는`HTMLCanvasElement` 를 반환한다.

구문
--


```js
var elt = stream.canvas;
```

### 값

`캡처되는 프레임의 원본인 canvas를 나타내는 HTMLCanvasElement` .

예시
--


```js
// 캡처할 canvas 요소 찾기
var canvasElt = document.getElementsByTagName("canvas")[0];

// stream 얻기
var stream = canvasElt.captureStream(25); // 25 FPS

// stream 처리하기
...

// stream과 연결된 canvas 가져오기
var canvas = stream.canvas;
```

명세
--

| Specification |
| --- |
| Media Capture from DOM Elements # dom-canvascapturemediastreamtrack-canvas |

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

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

더 보기
----

* `HTMLCanvasElement.captureStream()` (en-US) to create a stream to capture a given canvas element.
* `<canvas>`
AudioWorkletProcessor.parameterDescriptors (static getter)
==========================================================

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

`AudioWorkletProcessor`로부터 파생된 클래스의 **`parameterDescriptors`** 읽기 전용 속성은 *static getter* 인데, 이는 `AudioParamDescriptor` 기반 객체의 iterable을 반환합니다.

이 속성은 `AudioWorkletProcessor` 인터페이스의 일부가 아니지만, 만약 정의된다면, 이것은 `AudioWorkletProcessor` 생성자에 의해 연관된 `AudioWorkletNode`의 `parameters` 속성에서 사용자 정의 `AudioParam` 객체들의 리스트를 생성하기 위해 내부적으로 호출됩니다.

getter를 정의하는 것은 선택 사항입니다.

구문
--


```js
AudioWorkletProcessorSubclass.parameterDescriptors;
```

### Value

`AudioParamDescriptor` 기반 객체들의 iterable. 이 객체들의 속성은 다음과 같습니다.

`name`

`AudioParam` 의 이름을 나타내는 `DOMString`. 이 이름 아래에서 `AudioParam` 은 이 노드의 `parameters` 속성에서 사용 가능하고, 이 이름 아래에서 `AudioWorkletProcessor.process` 메서드는 이 `AudioParam` 의 계산된 값을 획득할 것입니다.

`automationRate` Optional

이 `AudioParam` 의 자동화 비율을 나타내는 `"a-rate"`, 또는 `"k-rate"` 문자열. 기본값은 `"a-rate"` 입니다.

`minValue` Optional

`AudioParam` 의 최소 값을 나타내는 `float`. 기본 값은 `-3.4028235e38` 입니다.

`maxValue` Optional

`AudioParam` 의 최대 값을 나타내는 `float`. 기본 값은 `3.4028235e38` 입니다.

`defaultValue` Optional

`AudioParam` 의 초기 값을 나타내는 `float`. 기본값은 `0` 입니다.

예제
--

어떻게 static `parameterDescriptors` getter를 사용자 정의 `AudioWorkletProcessor` 에 추가하는지를 보여주는 예제 코드를 보시려면 `AudioWorkletNode.parameters` 를 참고해 보세요.

명세서
---

| Specification |
| --- |
| Web Audio API # audioworkletprocess-callback-parameters |

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

{{Compat}}같이 보기
-----

* Web Audio API
* Web Audio
API 사용하기
AudioWorkletProcessor()
=======================

**`AudioWorkletProcessor()`** 생성자는 `AudioWorkletNode`의 근본적인 오디오 프로세싱 메커니즘을 나타내는 새로운 `AudioWorkletProcessor` 객체를 생성합니다.

구문
--

**참고:** `AudioWorkletProcessor` 와 이것으로부터 파생된 클래스들은
 사용자에 의해 제공된 코드로부터 직접적으로 초기화될 수 없습니다.
 대신, 이것들은 오직 연관된 `AudioWorkletNode`들의 생성에 의해서만 내부적으로 생성됩니다.



```js
new AudioWorkletProcessor(options);
```

### 매개변수

`options`

`AudioWorkletNode constructor`에 *options* 매개변수로서 전달되고 structured clone algorithm에 통과되는 객체. 사용 가능한 속성들은 다음과 같습니다:

`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 constructor`에 전달되는 *options* 객체가 없을지라도, 노드에 의해 `AudioWorkletProcessor` 생성자에 전달된 *options* 객체는 존재할 것이고 최소한 `numberOfInputs` 과 `numberOfOutputs` 을 가질 것이라는 데 주목하세요.

### 반환 값

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

예제
--

이 예제에서 우리는 `AudioWorkletNode constructor`에 사용자 정의 옵션들을 전달하고 어떻게 그것들의 structured
clone이 우리의 `AudioWorkletProcessor` 생성자에 전달되는지 관찰합니다.

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


```js
// test-processor.js
class TestProcessor extends AudioWorkletProcessor {
  constructor(options) {
    super();
    console.log(options.numberOfInputs);
    console.log(options.processorOptions.someUsefulVariable);
  }
  process(inputs, outputs, parameters) {
    return true;
  }
}

registerProcessor("test-processor", TestProcessor);
```


다음으로, 메인 스크립트 파일에서 우리는 프로세서를 로드하고, `AudioWorkletNode` 에 프로세서의 이름과 *options* 객체를 전달하며 `AudioWorkletNode` 의 인스턴스를 생성합니다.

*options* 객체에서 우리는 `someUsefulVariable` 키 아래에서 `Map` 인스턴스와 함께 `processorOptions` 를 전달합니다. 우리는 `numberOfInputs` 을 전달하지 않았고 어떻게 이것이 기본 값을 얻게 되는지 관찰해 봅시다.


```js
const audioContext = new AudioContext();
await audioContext.audioWorklet.addModule("test-processor.js");
const testNode = new AudioWorkletNode(audioContext, "test-processor", {
  processorOptions: {
    someUsefulVariable: new Map([
      [1, "one"],
      [2, "two"],
    ]),
  },
});
```


콘솔 출력은 다음과 같을 것입니다:


```js
> 1 // AudioWorkletNode options.numberOfInputs가 기본 값으로 설정됨
> Map(2) {1 => "one", 2 => "two"} // someUsefulVariable 아래의 복제된 map
```

명세
--

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

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

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

같이 보기
-----

* `AudioWorkletNode` 인터페이스
AudioWorkletProcessor.port
==========================

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

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

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


구문
--


```js
AudioWorkletProcessorInstance.port;
```

### 값

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

예제
--

`AudioWorkletNode.port`에서 예제 코드를 볼 수 있습니다.

명세
--

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

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

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

같이 보기
-----

* Web Audio API
* Web Audio
API 사용하기
Blob.type
=========

`Blob` 객체의 **`type`** 속성은 데이터의 MIME 유형을 반환합니다.

값
-

파일의 MIME 유형을 나타내는 `DOMString`. 유형을 알아낼 수 없는 경우 빈 문자열입니다.

예제
--

이 예제는 사용자가 선택한 모든 파일 각각에 대해, 허용된 이미지 파일 유형 중 하나인지 검사합니다.

### HTML


```html
<input type="file" id="input" multiple />
<output id="output">이미지 파일 선택...</output>
```


```
output {
  display: block;
  margin-top: 16px;
}
```

### JavaScript


```js
// 우리 애플리케이션에서는 GIF, PNG, JPEG 이미지만 허용
const allowedFileTypes = ["image/png", "image/jpeg", "image/gif"];

const input = document.getElementById("input");
const output = document.getElementById("output");

input.addEventListener("change", (event) => {
  const files = event.target.files;

  if (files.length === 0) {
    output.innerText = "이미지 파일 선택...";
    return;
  }

  if (Array.from(files).every((file) => allowedFileTypes.includes(file.type))) {
    output.innerText = "모든 파일 사용 가능!";
  } else {
    output.innerText = "이미지 파일만 선택하세요.";
  }
});
```

### 결과

명세
--

| Specification |
| --- |
| File API # dfn-type |

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

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

같이 보기
-----

* `Blob`
* 웹 애플리케이션에서 파일 사용하기
Blob()
======

**`Blob()`** 생성자는 새로운 `Blob` 객체를 반환합니다. 반환하는 블롭의 데이터는 `array` 매개변수에 제공한 배열을 이어붙인 값입니다.

구문
--


```js
new Blob(array);
new Blob(array, options);
```

### 매개변수

`array`

`ArrayBuffer`, `ArrayBufferView` (en-US), `Blob`, `USVString` 또는 이 값들을 혼합해 구성한 `Array`입니다. `Blob`의 데이터를 구성하게 됩니다. `USVString`은 UTF-8로 인코딩됩니다.

`options` Optional

다음 속성을 지정할 수 있는 `BlobPropertyBag` 객체입니다.

`type` Optional

블롭에 저장할 데이터의 MIME 유형입니다. 기본 값은 빈 문자열(`''`)입니다.

`endings` Optional 
비표준

데이터가 텍스트일 때, 개행 문자(`\n`)를 어떻게 해석할지 지정합니다. 기본 값인 `transparent`는 개행 문자를 바꾸지 않고 블롭 데이터로 복사합니다. `native`를 지정하면 호스트 시스템 컨벤션에 맞춰서 변환합니다.


### 반환 값

지정한 데이터를 담은 새로운 `Blob` 객체.

예제
--


```js
const array = ['<a id="a"><b id="b">hey!</b></a>']; // 하나의 DOMString을 포함한 배열
const blob = new Blob(array, { type: "text/html" }); // 생성한 블롭
```

명세
--

| Specification |
| --- |
| File API # constructorBlob |

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

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

`Blob` 인터페이스의 **`size`** 속성은 `Blob` 또는 `File`의 크기를 바이트 단위로 반환합니다.

값
-

`Blob` 또는 `File`과 같은 `Blob` 기반 객체의 데이터 크기를 바이트 단위로 나타낸 숫자입니다.

예제
--

이 예제는 `file` 유형의 `<input>` (en-US) 요소를 통해 사용자가 선택한 여러 파일을 순회하면서, 각각의 파일 이름과 바이트 크기를 출력합니다.

### HTML


```html
<input type="file" id="input" multiple />
<output id="output">파일 선택...</output>
```


```
output {
  display: block;
  margin-top: 16px;
}
```

### JavaScript


```js
const input = document.getElementById("input");
const output = document.getElementById("output");

input.addEventListener("change", (event) => {
  output.innerText = "";

  for (const file of event.target.files) {
    output.innerText += `${file.name}의 크기는 ${file.size} 바이트입니다.\n`;
  }
});
```

### 결과

명세
--

| Specification |
| --- |
| File API # dfn-size |

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

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

같이 보기
-----

* `Blob`
* 웹 애플리케이션에서 파일 사용하기
Range.selectNodeContents()
==========================

**`Range.selectNodeContents()`** 는 `Node` (en-US)의 내용을 포함하는 `Range`를 설정합니다.

부모 `Node` (en-US) 의 start, end 값이 Reference가 됩니다. `startOffset` 은 0이고, `endOffset` 은 Child Node의 수 혹은 Reference Node에 포함되어 있는 Child Node의 수가 됩니다.

구문
--


```js
range.selectNodeContents(referenceNode);
```

### 매개변수

`referenceNode`
`Range` 로 선택될 내용의 `Node` (en-US)
예제
--


```js
range = document.createRange();
referenceNode = document.getElementsByTagName("div")[0];
range.selectNodeContents(referenceNode);
```

명세
--

| Specification |
| --- |
| DOM Standard # dom-range-selectnodecontents |

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

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

같이 보기
-----

* The DOM interfaces index (en-US)
Node.replaceChild()
===================

**`Node.replaceChild()`** 메소드는 특정 부모 노드의 한 자식 노드를 다른 노드로 교체합니다.

Syntax
------


```js
replacedNode = parentNode.replaceChild(newChild, oldChild);
```


* `newChild` 는 `oldChild` 를 교체할 새로운 노드입니다. 만약 이미 `DOM` 안에 존재한다면 가장 먼저 제거됩니다.
* `oldChild` 는 이미 존재하는, 교체될 자식 노드입니다.
* `replacedNode` 는 교체된 노드입니다. `oldChild` 와 동일한 노드입니다.
Example
-------


```js
// <div>
// <span id="childSpan">foo bar</span>
// </div>

// 텅빈 요소 노드를 하나 생성합니다.
// ID도, 속성도, 컨텐츠도 없습니다.
var sp1 = document.createElement("span");

// 'newSpan'이란 id 속성을 부여합니다.
sp1.id = "newSpan";

// 새로운 요소를 위한 컨텐츠를 생성합니다.
var sp1_content = document.createTextNode("new replacement span element.");

// 컨텐츠를 생성한 요소에 붙입니다.
sp1.appendChild(sp1_content);

// DOM에 존재하던, 교체되야할 노드를 참조합니다.
var sp2 = document.getElementById("childSpan");
var parentDiv = sp2.parentNode;

// 이미 존재하던 sp2 노드를 새로운 span 요소인 sp1으로 교체합니다.
parentDiv.replaceChild(sp1, sp2);

// 결과:
// <div>
// <span id="newSpan">new replacement span element.</span>
// </div>
```

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

* DOM Level 1 Core: replaceChild
* DOM Level 2 Core: replaceChild
* DOM Level 3 Core: replaceChild
See also
--------

* `Node.removeChild` (en-US)
Node.normalize()
================

**`Node.normalize()`** 메소드는 지정된 노드와 하위 트리의 모든 노드를 "정규화된" 형태로 놓습니다. 정규화된 하위 트리의 텍스트 노드는 비어있지 않으며 인접한 텍스트 노드도 존재하지 않습니다.

문법
--


```js
element.normalize();
```

예제
--


```js
var wrapper = document.createElement("div");

wrapper.appendChild(document.createTextNode("Part 1 "));
wrapper.appendChild(document.createTextNode("Part 2 "));

// 이 때, wrapper.childNodes.length === 2
// wrapper.childNodes[0].textContent === "Part 1 "
// wrapper.childNodes[1].textContent === "Part 2 "

wrapper.normalize();

// 이제, wrapper.childNodes.length === 1
// wrapper.childNodes[0].textContent === "Part 1 Part 2 "
```

명세
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-node-normalize① |

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

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

함께 보기
-----

* `Text.splitText`
Node.textContent
================

`Node` (en-US) 인터페이스의 **`textContent`** 속성은 노드와 그 자손의 텍스트 콘텐츠를 표현합니다.

**참고:** `textContent`와 `HTMLElement.innerText`가 자주 혼동되곤 하지만, 두 속성에는 몇 가지 중요한 차이점이 있습니다.

구문
--


```js
let text = someNode.textContent;
someOtherNode.textContent = string;
```

### 값

문자열 또는 `null`.

설명
--

`textContent`의 값은 상황에 따라 다릅니다.

* 노드가 `document` 또는 Doctype이면 `null`을 반환합니다.

**참고:** 전체 문서의 모든 텍스트와 CDATA 데이터를 얻으려면 `document.documentElement.textContent`를 사용하세요.
* 노드가 CDATA 구획 (en-US), 주석, 처리 명령 (en-US), 텍스트 노드면 노드 내의 텍스트, 즉 `Node.nodeValue` (en-US)를 반환합니다.
* 다른 노드 유형에 대해서는 주석과 처리 명령을 제외한 모든 자식 노드의 `textContent`를 병합한 결과를 반환합니다. 자식이 없는 경우 빈 문자열입니다.

노드의 `textContent`를 설정하면, 노드의 모든 자식을 주어진 문자열로 이루어진 하나의 텍스트 노드로 대치합니다.

### `innerText`와의 차이점

비록 `Node.textContent`와 `HTMLElement.innerText`의 이름이 유사하긴 하지만, 중요한 차이가 있으므로 헷갈리지 마세요.

* `textContent`는 `<script>`와 `<style>` 요소를 포함한 모든 요소의 콘텐츠를 가져옵니다. 반면 `innerText`는 "사람이 읽을 수 있는" 요소만 처리합니다.
* `textContent`는 노드의 모든 요소를 반환합니다. 그에 비해 `innerText`는 스타일링을 고려하며, "숨겨진" 요소의 텍스트는 반환하지 않습니다.
    + 또한, `innerText`의 CSS 고려로 인해, innerText 값을 읽으면 최신 계산값을 반영하기 위해 리플로우가 발생합니다. (리플로우 계산은 비싸므로 가능하면 피해야 합니다)
* Internet Explorer 기준, `innerText`를 수정하면 요소의 모든 자식 노드를 제거하고, 모든 자손 텍스트 노드를 영구히 파괴합니다. 이로 인해, 해당 텍스트 노드를 이후에 다른 노드는 물론 같은 노드에 삽입하는 것도 불가능합니다.
### `innerHTML`과의 차이점

`Element.innerHTML`는 이름 그대로 HTML을 반환합니다. 간혹 innerHTML을 사용해 요소의 텍스트를 가져오거나 쓰는 경우가 있지만, HTML로 분석할 필요가 없다는 점에서 `textContent`의 성능이 더 좋습니다.

이에 더해, `textContent`는 XSS 공격의 위험이 없습니다.

예제
--

다음과 같은 HTML 조각에서...


```html
<div id="divA">This is <span>some</span> text!</div>
```


`textContent`를 사용해 요소의 텍스트 콘텐츠를 가져오거나...


```js
let text = document.getElementById("divA").textContent;
// The text variable is now: 'This is some text!'
```


텍스트 내용을 설정할 수 있습니다.


```js
document.getElementById("divA").textContent = "This text is different!";
// The HTML for divA is now:
// <div id="divA">This text is different!</div>
```

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

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

명세
--

| Specification |
| --- |
| DOM Standard # dom-node-textcontent |

참고
--

* `HTMLElement.innerText`
* `Element.innerHTML`
Node.previousSibling
====================

`Node.previousSibling` 은 읽기전용 속성이며 현재 호출하는 노드가 속해 있는 부모의 `childNodes` 목록에서 특정 자식 노드를 리턴하거나 `childNodes` 목록의 첫번째 노드일 경우 Null값을 리턴합니다.`

Syntax
------


```js
previousNode = node.previousSibling;
```

Example
-------


```js
// <a><b1 id="b1"/><b2 id="b2"/></a>

alert(document.getElementById("b1").previousSibling); // null
alert(document.getElementById("b2").previousSibling.id); // "b1"
```

Notes
-----

 Gecko 기반 브라우저는 소스 마크업에서 공백을 나타내기 위해 문서 내에 텍스트 노드를 삽입합니다.
 그러므로 예를 들어 `Node.firstChild`나 `Node.previousSibling`을 통해서 얻은 노드는 작성자가 얻으려 한 실제 요소와는
 달리 공백 텍스트 노드를 참조할 지도 모릅니다.

 더 많은 정보는 Whitespace in the DOM (en-US)과
 W3C DOM 3 FAQ: Why are some Text nodes empty?를 보세요.

To navigate the opposite way through the child nodes list use Node.nextSibling (en-US).

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

* DOM Level 1 Core: previousSibling
* DOM Level 2 Core: previousSibling
* DOM Level 3 Core: previousSibling
element.firstChild
==================

요약
--

트리에서 노드의 첫 번째 자식이나 `null`(노드가 자식이 없으면)을 반환합니다.

구문
--


```js
childNode = node.firstChild;
```


`childNode`는 자식이 있으면 `node`의 첫 번째 자식 참조이고 없으면 `null`입니다.

예시
--

이 예는 `firstChild`의 쓰임과 공백 노드가 어떻게 이 프로퍼티 사용을 방해하는 지 실제로 보입니다. Gecko DOM에서 공백 처리에 관한 더 많은 정보는 Notes 절을 보세요.


```html
<p id="para-01">
  <span>First span</span>
</p>

<script type="text/javascript">
 var p01 = document.getElementById("para-01");
 alert(p01.firstChild.nodeName);
</script>
```


위에서, alert은 텍스트 노드가 여는 태그 <p>의 끝과 여는 태그 <span> 사이에 공백을 유지하여 삽입되었기 때문에 '#text'를 보입니다. space 하나에서 여럿, return, tab 등 **어떤** 공백이든 #text 노드에 삽입되게 됩니다.

다른 #text 노드는 닫는 태그 </span>과 닫는 태그 </p> 사이에 삽입됩니다.

이 공백을 소스에서 제거하면, #text 노드는 삽입되지 않고 span 요소가 paragraph의 첫 번째 자식이 됩니다.


```html
<p id="para-01"><span>First span</span></p>

<script type="text/javascript">
 var p01 = document.getElementById("para-01");
 alert(p01.firstChild.nodeName);
</script>
```


이제 alert은 'SPAN'을 보입니다.

주의
--

 Gecko 기반 브라우저는 소스 마크업에서 공백을 나타내기 위해 문서 내에 텍스트 노드를 삽입합니다.
 그러므로 예를 들어 `Node.firstChild`나 `Node.previousSibling`을 통해서 얻은 노드는 작성자가 얻으려 한 실제 요소와는
 달리 공백 텍스트 노드를 참조할 지도 모릅니다.

 더 많은 정보는 Whitespace in the DOM (en-US)과
 W3C DOM 3 FAQ: Why are some Text nodes empty?를 보세요.

명세
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-node-firstchild① |
element.childNodes
==================

요약
--

**childNodes**는 주어진 요소의 자식 노드 모음(
 *collection*
 )을 반환합니다.

구문과 값
-----


```js
var ndList = elementNodeReference.childNodes;
```


*ndList*는 현재 요소의 자식인 노드 개체의 순서 있는 모음입니다. 요소가 자식이 없으면, *ndList*는 아무 노드도 포함하지 않습니다.

*ndList*는 childNodes의 노드 목록을 저장하는 변수입니다. 그 목록은 NodeList 형입니다. childNodes 속성은 읽기 전용입니다.

예시
--


```js
// parg는 <p> 요소 개체 참조
if (parg.hasChildNodes()) {
  // 그래서, 먼저 개체가 찼는 지(자식 노드가 있는 지) 검사
  var children = parg.childNodes;
  for (var i = 0; i < children.length; i++) {
    // children[i]로 각 자식에 무언가를 함
    // 주의: 목록은 유효해(live), 자식 추가나 제거는 목록을 바꿈
  }
}

// This는 노드에서 모든 자식을 제거하는 한 방법
// box는 자식 있는 요소 개체 참조
while (box.firstChild) {
  //목록은 유효해서(LIVE) 호출마다 재배열(re-index)함
  box.removeChild(box.firstChild);
}
```

명세
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-node-childnodes① |

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

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

같이 보기
-----

* `Node.firstChild`
* `Node.lastChild`
* `Node.nextSibling`
* `Node.previousSibling`
* `Element.children`
Node.ownerDocument
==================

**`Node.ownerDocument`** 읽기 전용 속성은 이 node 의 최상위 document 객체를 반환합니다.

Syntax
------


```js
document = element.ownerDocument;
```


* `document` 는 element 의 부모 `document` 객체입니다.
Example
-------


```js
// given a node "p", get the top-level HTML child
// of the document object

var d = p.ownerDocument;
var html = d.documentElement;
```

Notes
-----

이 속성에 의해 반환된`document` 객체는 실제 HTML 문서의 모든 child 노드들이 생성되는 메인 객체입니다. 이 속성이 document 그 자체 노드에서 사용될 경우, 결과는 `null` 이 됩니다.

명세서
---

| Specification |
| --- |
| DOM Standard # ref-for-dom-node-ownerdocument① |

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

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

**`Node.appendChild()`** 메소드는 한 노드를 특정 부모 노드의 자식 노드 리스트 중 마지막 자식으로 붙입니다. 만약 주어진 노드가 이미 문서에 존재하는 노드를 참조하고 있다면 `appendChild()` 메소드는 노드를 현재 위치에서 새로운 위치로 이동시킵니다. (문서에 존재하는 노드를 다른 곳으로 붙이기 전에 부모 노드로 부터 지워버릴 필요는 없습니다.)

이것은 한 노드가 문서상의 두 지점에 동시에 존재할 수 없다는 것을 의미합니다. 그래서 만약 노드가 이미 부모를 가지고 있다면 우선 삭제되고 새로운 위치로 이동합니다.

`Node.cloneNode()` (en-US) 메소드는 노드가 새로운 부모의 밑으로 붙기 전에 노드를 복제합니다. `cloneNode 메소드로 만들어진 복사된 노드들은 자동적으로 문서에 적용되지 않는다는 것에 주의하세요`.

이 메소드는 서로 다른 문서로 노드를 이동시키진 못합니다. 만약 노드를 다른 문서로 이동시키고 싶다면 `document.importNode()` 메소드를 사용하셔야 합니다.

Syntax
------


```js
var aChild = element.appendChild(aChild);
```


이동한 자식 노드를 반환합니다.

Example
-------


```js
// 새로운 단락 요소를 생성하고 문서에 있는 바디 요소의 끝에 붙입니다.
var p = document.createElement("p");
document.body.appendChild(p);
```

명세서
---

| Specification |
| --- |
| DOM Standard # dom-node-appendchild |

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

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

See also
--------

* `Node.removeChild()` (en-US)
* `Node.replaceChild()`
* `Node.insertBefore()` (en-US)
* `Node.hasChildNodes()`
Node.nextSibling
================

읽기 전용 속성인 **`Node.nextSibling`** 은 부모의 `childNodes` 목록에서 지정된 노드 바로 다음에 있는 노드를 반환하거나 지정된 노드가 해당 목록의 마지막 노드이면 `null` 값을 반환합니다.

Syntax
------


```js
nextNode = node.nextSibling;
```

Notes
-----

 Gecko 기반 브라우저는 소스 마크업에서 공백을 나타내기 위해 문서 내에 텍스트 노드를 삽입합니다.
 그러므로 예를 들어 `Node.firstChild`나 `Node.previousSibling`을 통해서 얻은 노드는 작성자가 얻으려 한 실제 요소와는
 달리 공백 텍스트 노드를 참조할 지도 모릅니다.

 더 많은 정보는 Whitespace in the DOM (en-US)과
 W3C DOM 3 FAQ: Why are some Text nodes empty?를 보세요.

Example
-------


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

<script type="text/javascript">
 var el = document.getElementById("div-01").nextSibling,
 i = 1;

 console.log("Siblings of div-01:");

 while (el) {
 console.log(i + ". " + el.nodeName);
 el = el.nextSibling;
 i++;
 }
</script>

/************************************************** 로드될 때 다음과 같이 콘솔에
기록됩니다. : Siblings of div-01 1. #text 2. DIV 3. #text 4. SCRIPT
**************************************************/
```


위의 예에서 `#text` 노드는 태그 사이의 마크 업 에서 공백이 발생하는 DOM에 삽입되며 ( 즉 요소의 닫기 태그와 다음 태그의 열기 태그 사이에 있습니다 ) `document.write` 구문에 의해 삽입 된 요소간에 공백이 생성되지 않습니다.

`nextSibling` 을 사용하여 DOM을 탐색 할 때, DOM에 텍스트 노드를 포함시킬 수 있어야 합니다. 노트 섹션의 리소스를 참조하세요.

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

* DOM Level 1 Core: nextSibling
* DOM Level 2 Core: nextSibling
See also
--------

* `Element.nextElementSibling` (en-US)
Node.hasChildNodes()
====================

**`Node.hasChildNodes()`** 메소드는 현재 노드(`Node` (en-US))에게 자식노드(child nodes (en-US))가 있는지를 `Boolean` 값으로 반환합니다.

구문
--


```js
node.hasChildNodes();
```

예시
--

아래 예시에서는 "foo"라는 id를 가진 요소를 찾고 "foo" 요소에게 자식노드가 있으면 첫번째 자식노드를 제거해줍니다.


```js
var foo = document.getElementById("foo");

if (foo.hasChildNodes()) {
  foo.removeChild(foo.childNodes[0]);
}
```

명세
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-node-haschildnodes① |

같이 보기
-----

* `Node.childNodes`
* `Node.hasAttributes`
element.lastChild
=================

요약
--

**lastChild**는 노드의 마지막 자식을 반환합니다.

구문과 값
-----


```js
last_child = element.lastChild;
```


반환되는 `last_child`는 노드입니다. 노드의 부모가 요소이면, 자식은 보통 요소 노드, 텍스트 노드, 주석 노드입니다.

예시
--


```js
var tr = document.getElementById("row1");
corner_td = tr.lastChild;
```

주의
--

자식 요소가 없으면 `null`을 반환합니다.

명세
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-node-lastchild① |

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

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

**`Node.contains()`** 메소드는 주어진 인자가 node 의 자손인지, 아닌지에 대한 `Boolean` 값을 리턴합니다.

Syntax
------


```js
node.contains(otherNode);
```

Example
-------

이 함수는 요소가 페이지의 body 안에 있는지 검사합니다. `contains` 는 포괄적이므로 node 가 body 자기 자신일 경우에도 true 가 반환됩니다. 만약 이걸 원하지 않는 경우에는 node 가 body 자기 자신인지 검사하여 `false` 를 반환하여 버리면 됩니다.


```js
function isInPage(node) {
  return node === document.body ? false : document.body.contains(node);
}
```

명세서
---

| Specification |
| --- |
| DOM Standard # ref-for-dom-node-contains① |

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

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

See also
--------

* `Node.compareDocumentPosition` (en-US)
* `Node.hasChildNodes`