From da78a9e329e272dedb2400b79a3bdeebff387d47 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:17 -0500 Subject: initial commit --- files/ko/web/api/nodelist/entries/index.html | 70 ++++++++++++ files/ko/web/api/nodelist/foreach/index.html | 118 +++++++++++++++++++++ files/ko/web/api/nodelist/index.html | 153 +++++++++++++++++++++++++++ files/ko/web/api/nodelist/item/index.html | 44 ++++++++ files/ko/web/api/nodelist/keys/index.html | 72 +++++++++++++ files/ko/web/api/nodelist/length/index.html | 35 ++++++ files/ko/web/api/nodelist/values/index.html | 72 +++++++++++++ 7 files changed, 564 insertions(+) create mode 100644 files/ko/web/api/nodelist/entries/index.html create mode 100644 files/ko/web/api/nodelist/foreach/index.html create mode 100644 files/ko/web/api/nodelist/index.html create mode 100644 files/ko/web/api/nodelist/item/index.html create mode 100644 files/ko/web/api/nodelist/keys/index.html create mode 100644 files/ko/web/api/nodelist/length/index.html create mode 100644 files/ko/web/api/nodelist/values/index.html (limited to 'files/ko/web/api/nodelist') diff --git a/files/ko/web/api/nodelist/entries/index.html b/files/ko/web/api/nodelist/entries/index.html new file mode 100644 index 0000000000..8e9387311c --- /dev/null +++ b/files/ko/web/api/nodelist/entries/index.html @@ -0,0 +1,70 @@ +--- +title: NodeList.entries() +slug: Web/API/NodeList/entries +translation_of: Web/API/NodeList/entries +--- +
{{APIRef("DOM")}}
+ +

NodeList.entries() 메서드는 이 객체에 포함된 모든 key/value 쌍을 통과하는 {{jsxref("Iteration_protocols",'iterator')}} 를 반환합니다. 이 값(value)은 {{domxref("Node")}} 객체입니다.

+ +

Syntax

+ +
list.entries();
+ +

Return value

+ +

{{jsxref("Iteration_protocols","iterator")}} 를 반환합니다.

+ +

Example

+ +
var node = document.createElement("div");
+var kid1 = document.createElement("p");
+var kid2 = document.createTextNode("hey");
+var kid3 = document.createElement("span");
+node.appendChild(kid1);
+node.appendChild(kid2);
+node.appendChild(kid3);
+
+var list = node.childNodes;
+
+// Using for..of
+for(var entry of list.entries()) {
+  console.log(entry);
+}
+
+ +

결과는 다음과 같습니다:

+ +
Array [ 0, <p> ]
+Array [ 1, #text "hey" ]
+Array [ 2, <span> ]
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG','#interface-nodelist','entries() (as iterable<Node>)')}}{{Spec2('DOM WHATWG')}}Initial definition.
+ +

Browser compatibility

+ + + +

{{Compat("api.NodeList.entries")}}

+ +

See also

+ + diff --git a/files/ko/web/api/nodelist/foreach/index.html b/files/ko/web/api/nodelist/foreach/index.html new file mode 100644 index 0000000000..b12325d134 --- /dev/null +++ b/files/ko/web/api/nodelist/foreach/index.html @@ -0,0 +1,118 @@ +--- +title: NodeList.prototype.forEach() +slug: Web/API/NodeList/forEach +translation_of: Web/API/NodeList/forEach +--- +

{{APIRef("DOM")}}

+ +

{{domxref("NodeList")}} 인터페이스의 forEach() 메서드는 리스트 내의 각각의 값 쌍에 대해 매개 변수에 지정된 콜백을 삽입 순서로 호출합니다.

+ +

문법Syntax

+ +
NodeList.forEach(callback[, thisArg]);
+
+ +

Parameters

+ +
+
callback
+
각각의 요소에 대해 실행하는 함수로, 3개의 인수(arguments)를 갖습니다: +
+
currentValue
+
NodeList에서 처리중인 현재 요소(element)입니다.
+
currentIndex
+
NodeList에서 처리중인 현재 요소의 인덱스입니다.
+
listObj
+
forEach() 가 적용되고 있는 NodeList 객체입니다. 
+
+
+
thisArg {{Optional_inline}}
+
callback 을 실행할 때 {{jsxref("this")}} 에 대입할 값입니다.
+
+ +

Return value

+ +

{{jsxref('undefined')}}.

+ +

Exceptions

+ +

None.

+ +

Example

+ +
var node = document.createElement("div");
+var kid1 = document.createElement("p");
+var kid2 = document.createTextNode("hey");
+var kid3 = document.createElement("span");
+
+node.appendChild(kid1);
+node.appendChild(kid2);
+node.appendChild(kid3);
+
+var list = node.childNodes;
+
+list.forEach(
+  function(currentValue, currentIndex, listObj) {
+    console.log(currentValue + ', ' + currentIndex + ', ' + this);
+  },
+  'myThisArg'
+);
+ +

결과는 다음과 같습니다.

+ +
[object HTMLParagraphElement], 0, myThisArg
+[object Text], 1, myThisArg
+[object HTMLSpanElement], 2, myThisArg
+ +

Polyfill

+ +

이 {{Glossary("Polyfill","polyfill")}} 은 ES5 를 지원하는 모든 브라우저에서 동작합니다:

+ +
if (window.NodeList && !NodeList.prototype.forEach) {
+    NodeList.prototype.forEach = function (callback, thisArg) {
+        thisArg = thisArg || window;
+        for (var i = 0; i < this.length; i++) {
+            callback.call(thisArg, this[i], i, this);
+        }
+    };
+}
+ +

또는

+ +
if (window.NodeList && !NodeList.prototype.forEach) {
+    NodeList.prototype.forEach = Array.prototype.forEach;
+}
+ +

The above behavior is how many browsers actually implement NodeList.prototype.forEach (Chrome, for example).

+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("WebIDL", "#es-forEach", "forEach")}}{{Spec2("WebIDL")}}Defines forEach on iterable declarations
+ +

Browser Compatibility

+ + + +

{{Compat("api.NodeList.forEach")}}

+ +

See also

+ + diff --git a/files/ko/web/api/nodelist/index.html b/files/ko/web/api/nodelist/index.html new file mode 100644 index 0000000000..a0829a7eca --- /dev/null +++ b/files/ko/web/api/nodelist/index.html @@ -0,0 +1,153 @@ +--- +title: NodeList +slug: Web/API/NodeList +tags: + - DOM + - Interface +translation_of: Web/API/NodeList +--- +
{{APIRef("DOM")}}
+ +

NodeList 객체는 일반적으로 {{domxref("element.childNodes")}}와 같은 속성(property)과 {{domxref("document.querySelectorAll")}} 와 같은 메서드에 의해 반환되는  노드의 콜렉션입니다.

+ +
+

NodeList 가 Array 는 아니지만, forEach() 를 사용하여 반복할 수 있습니다. 또한 {{jsxref("Array.from()")}} 을 사용하여 Array 로 변환 할 수도 있습니다.

+ +

그러나 일부 오래된 브라우저는 아직NodeList.forEach() 또는 Array.from() 를 구현하지 않았습니다. 이것은 {{jsxref("Array.forEach()", "Array.prototype.forEach()")}} 를 사용하여 회피할 수 있습니다. — 이 문서의 예제를 참조하세요.

+
+ +

경우에 따라, NodeList는 라이브 콜렉션으로, DOM의 변경 사항을 실시간으로 콜렉션에 반영합니다. 예를 들어, {{domxref("Node.childNodes")}} 는 실시간입니다:

+ +
var parent = document.getElementById('parent');
+var child_nodes = parent.childNodes;
+console.log(child_nodes.length); // let's assume "2"
+parent.appendChild(document.createElement('div'));
+console.log(child_nodes.length); // should output "3"
+
+ +

다른 경우 NodeList는 정적 콜렉션입니다. DOM을 변경해도 콜렉션 내용에는 영향을 주지 않습니다. {{domxref("document.querySelectorAll()")}} 은 정적 NodeList를 반환합니다.

+ +

NodeList의 항목(items)을 순회(iterate)하거나, 특히 리스트의 길이를 캐시(cache)해야 할 때, 이 구분을 유지하는것이 좋습니다.

+ +

속성(Properties)

+ +
+
{{domxref("NodeList.length")}}
+
NodeList의 노드의 개수를 반환합니다.
+
+ +

메서드(Methods)

+ +
+
{{domxref("NodeList.item()")}}
+
리스트 내 항목(item)의 인덱스를 반환하고, 인덱스가 범위 외의 경우일 땐 null을 반환합니다.
+
nodeList[idx]의 대안으로 사용할 수 있습니다.(i 가범위를 벗어날 때(out-of-bounds) undefined 를 반환합니다.) 이것은 비 자바스크립트 언어 DOM 구현에 유용합니다.
+
{{domxref("NodeList.entries()")}}
+
{{jsxref("Iteration_protocols","iterator")}} 를 반환하여 코드가 콜렉션에 포함된 모든 키/값 쌍을 순회할 수 있도록 합니다. (이 경우 키는 0부터 시작하는 숫자이고, 값은 노드가 됩니다.)
+
{{domxref("NodeList.forEach()")}}
+
NodeList의 요소(element)마다 한 번씩, 인자로 전달 받은 함수를 실행하여 요소를 인수(argument)로 함수에 전달합니다.
+
{{domxref("NodeList.keys()")}}
+
{{jsxref("Iteration_protocols", "iterator")}}를 반환하여 콜렉션에 포함된 키/값 쌍의 모든 키를 코드가 순회하도록 합니다. (이 경우 키는 0부터 시작하는 숫자입니다.)
+
{{domxref("NodeList.values()")}}
+
콜렉션에 포함된 키/값 쌍의 모든 값(nodes)을 코드가 순회할 수 있게 해주는 {{jsxref("Iteration_protocols", "iterator")}}를 반환합니다.
+
+ +

Example

+ +

for 루프를 사용하여 NodeList의 항목을 반복할 수 있습니다.

+ +
for (var i = 0; i < myNodeList.length; ++i) {
+  var item = myNodeList[i];  // Calling myNodeList.item(i) isn't necessary in JavaScript
+}
+
+ +

리스트의 항목(items)을 열거하기 위해 for...in 또는 for each...in를 사용하지 않길 바랍니다. NodeList의 길이와 항목 속성까지 열거합니다. 또한 스크립트가 요소({{domxref("element")}}) 객체만 처리한다고 가정하면 오류가 발생할 수 있습니다. 게다가, for..in은 고정된 순서로 각 속성들을 접근한다는 보장이 없습니다.

+ +

for...of 루프는 NodeList 객체를 올바르게 반복합니다.

+ +
var list = document.querySelectorAll( 'input[type=checkbox]' );
+for (var item of list) {
+  item.checked = true;
+}
+ +

최신 브라우저는 반복자(iterator) 메서드인 {{domxref("NodeList.forEach()", "forEach()")}}만이 아니라, {{domxref("NodeList.entries()", "entries()")}}, {{domxref("NodeList.values()", "values()")}}, {{domxref("NodeList.keys()", "keys()")}} 까지도 지원합니다.

+ +

인터넷 익스플로러의 호환을 위해서는 {{jsxref("Array.forEach()", "Array.prototype.forEach")}} 를 사용하는 방법도 있습니다.

+ +
var list = document.querySelectorAll( 'input[type=checkbox]' );
+Array.prototype.forEach.call(list, function (item) {
+  item.checked = true;
+});
+
+ +

Array로 변환하는 법

+ +

NodeList의 컨텐츠를 Array의 메소드를 통해 다루는 것이 더 쉬울 때도 있다. 아래는 NodeList 객체를 Array로 변환하는 기법이다.

+ +
var div_list = document.querySelectorAll('div'); // returns NodeList
+var div_array = Array.prototype.slice.call(div_list); // converts NodeList to Array
+ +

NodeList prototype

+ +

NodeList에 프로토타입을 추가할 수도 있다.

+ +
var elements = document.querySelectorAll(".suggestions");
+
+NodeList.prototype.addEventListener = function(event, func) {
+    this.forEach(function(content, item) {
+       content.addEventListener(event, func);
+    });
+}
+
+function log() {
+    console.log(this, " was clicked");
+}
+
+elements.addEventListener("click", log);
+//or
+elements.addEventListener("click", function() {
+    console.log(this, "  awas clicked");
+});
+// 클릭된 요소로부터 출력될 요소는 둘 모두 HTML 요소가 된다.
+ +

forEach에 대한 자세한 내용은 Array.prototype.forEach()를 참조하길 바란다.

+ +

명세서

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#interface-nodelist', 'NodeList')}}{{ Spec2('DOM WHATWG') }}
{{SpecName('DOM3 Core', 'core.html#ID-536297177', 'NodeList')}}{{ Spec2('DOM3 Core') }}
{{SpecName('DOM2 Core', 'core.html#ID-536297177', 'NodeList')}}{{ Spec2('DOM2 Core') }}
{{SpecName('DOM1', 'level-one-core.html#ID-536297177', 'NodeList')}}{{ Spec2('DOM1') }}Initial definition.
+ +

브라우저 호환성

+ + + +

{{Compat("api.NodeList")}}

diff --git a/files/ko/web/api/nodelist/item/index.html b/files/ko/web/api/nodelist/item/index.html new file mode 100644 index 0000000000..8e46ba48f4 --- /dev/null +++ b/files/ko/web/api/nodelist/item/index.html @@ -0,0 +1,44 @@ +--- +title: NodeList.item() +slug: Web/API/NodeList/item +translation_of: Web/API/NodeList/item +--- +
{{APIRef("DOM")}}
+ +

NodeList 의 node를 index로 돌려줍니다. 이 메서드는 인수(arguments)를 제공하는 한 exceptions 을 throw 하지 않습니다. index가 범위를 벗어나면 null 값이 반환되고, 인수가 제공되지 않으면 TypeError 가 throw 됩니다.

+ +

Syntax

+ +
nodeItem = nodeList.item(index)
+
+ + + +

Alternate Syntax

+ +

자바스크립트는 NodeList 에서 index를 얻기 위한, 배열과 같은 브라켓 문법([])을 제공합니다 :

+ +
nodeItem = nodeList[index]
+
+ +

Example

+ +
var tables = document.getElementsByTagName("table");
+var firstTable = tables.item(1); // or simply tables[1] - returns the second table in the DOM
+
+ +

Specification

+ +

DOM Level 1 Core: NodeList.item()

+ +

DOM Level 2 Core: NodeList.item()

+ +

Browser compatibility

+ + + +

{{Compat("api.NodeList.item")}}

diff --git a/files/ko/web/api/nodelist/keys/index.html b/files/ko/web/api/nodelist/keys/index.html new file mode 100644 index 0000000000..36160b9e1b --- /dev/null +++ b/files/ko/web/api/nodelist/keys/index.html @@ -0,0 +1,72 @@ +--- +title: NodeList.keys() +slug: Web/API/NodeList/keys +translation_of: Web/API/NodeList/keys +--- +

{{APIRef("DOM")}}

+ +

NodeList.keys() 메서드는 이 객체에 포함된 모든 키를 통과할 수 있는 {{jsxref("Iteration_protocols",'iterator')}} 를 반환합니다. 이 키는 부호없는 정수형(unsigned integer) 입니다.

+ +

Syntax

+ +
nodeList.keys();
+ +

Return value

+ +

{{jsxref("Iteration_protocols","iterator")}}를 반환합니다.

+ +

Example

+ +
var node = document.createElement("div");
+var kid1 = document.createElement("p");
+var kid2 = document.createTextNode("hey");
+var kid3 = document.createElement("span");
+
+node.appendChild(kid1);
+node.appendChild(kid2);
+node.appendChild(kid3);
+
+var list = node.childNodes;
+
+// Using for..of
+for(var key of list.keys()) {
+   console.log(key);
+}
+
+ +

결과는 다음과 같습니다 :

+ +
0
+1
+2
+
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG','#interface-nodelist','keys() (as iterable)')}}{{Spec2('DOM WHATWG')}}Initial definition
+ +

Browser compatibility

+ + + +

{{Compat("api.NodeList.keys")}}

+ +

See also

+ + diff --git a/files/ko/web/api/nodelist/length/index.html b/files/ko/web/api/nodelist/length/index.html new file mode 100644 index 0000000000..4e931dd73e --- /dev/null +++ b/files/ko/web/api/nodelist/length/index.html @@ -0,0 +1,35 @@ +--- +title: element.length +slug: Web/API/NodeList/length +tags: + - DOM + - Gecko + - Gecko DOM Reference +translation_of: Web/API/NodeList/length +--- +

{{ ApiRef() }}

+

요약

+

length는 NodeList의 항목수를 반환합니다.

+

구문

+
numItems =nodeList.length
+
+ +

예

+
// 문서의 모든 paragraph
+var items = document.getElementsByTagName("p");
+// 목록의 각 항목에,
+// HTML의 문자열로 전체 요소를 추가
+var gross = "";
+for (var i = 0; i < items.length; i++) {
+  gross += items[i].innerHTML;
+}
+// gross는 이제 모두 paragraph을 위한 HTML
+
+

주의

+

reference에서 이 페이지의 위치에도 불구하고, length는 Element의 프로퍼티가 아니고, NodeList의 프로퍼티입니다. NodeList 개체는 document.getElementsByTagName과 같은 많은 DOM 메소드에서 반환됩니다.

+

length는 DOM 프로그래밍에서 아주 흔한 프로퍼티입니다. 위 예에서처럼 목록의 길이(적어도 있는 지 보기 위해)를 조사하고 for 루프에서 훑개(반복자, iterator)로 널리 쓰입니다.

+

명세

+

length

+

{{ languages( { "en": "en/DOM/element.length", "pl": "pl/DOM/element.length" } ) }}

diff --git a/files/ko/web/api/nodelist/values/index.html b/files/ko/web/api/nodelist/values/index.html new file mode 100644 index 0000000000..5613e630ae --- /dev/null +++ b/files/ko/web/api/nodelist/values/index.html @@ -0,0 +1,72 @@ +--- +title: NodeList.values() +slug: Web/API/NodeList/values +translation_of: Web/API/NodeList/values +--- +

{{APIRef("DOM")}}

+ +

NodeList.values() 메서드는 이 객체에 포함된 모든 값을 통과할 수 있는 {{jsxref("Iteration_protocols",'iterator')}}를 반환합니다. 값은 {{domxref("Node")}} 객체 입니다.

+ +

Syntax

+ +
nodeList.values();
+ +

Return value

+ +

{{jsxref("Iteration_protocols","iterator")}}를 반환합니다.

+ +

Example

+ +
var node = document.createElement("div");
+var kid1 = document.createElement("p");
+var kid2 = document.createTextNode("hey");
+var kid3 = document.createElement("span");
+
+node.appendChild(kid1);
+node.appendChild(kid2);
+node.appendChild(kid3);
+
+var list = node.childNodes;
+
+// Using for..of
+for(var value of list.values()) {
+  console.log(value);
+}
+
+ +

결과는 다음과 같습니다 :

+ +
<p>
+#text "hey"
+<span>
+
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG','#interface-nodelist','values() (as iterable<Node>)')}}{{Spec2('DOM WHATWG')}}Initial definition
+ +

Browser compatibility

+ + + +

{{Compat("api.NodeList.values")}}

+ +

See also

+ + -- cgit v1.2.3-54-g00ecf