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/parentnode/append/index.html | 134 +++++++++++++++++++++ .../api/parentnode/childelementcount/index.html | 97 +++++++++++++++ files/ko/web/api/parentnode/children/index.html | 85 +++++++++++++ files/ko/web/api/parentnode/index.html | 80 ++++++++++++ files/ko/web/api/parentnode/prepend/index.html | 133 ++++++++++++++++++++ 5 files changed, 529 insertions(+) create mode 100644 files/ko/web/api/parentnode/append/index.html create mode 100644 files/ko/web/api/parentnode/childelementcount/index.html create mode 100644 files/ko/web/api/parentnode/children/index.html create mode 100644 files/ko/web/api/parentnode/index.html create mode 100644 files/ko/web/api/parentnode/prepend/index.html (limited to 'files/ko/web/api/parentnode') diff --git a/files/ko/web/api/parentnode/append/index.html b/files/ko/web/api/parentnode/append/index.html new file mode 100644 index 0000000000..1c9496b65b --- /dev/null +++ b/files/ko/web/api/parentnode/append/index.html @@ -0,0 +1,134 @@ +--- +title: ParentNode.append() +slug: Web/API/ParentNode/append +translation_of: Web/API/ParentNode/append +--- +
{{APIRef("DOM")}}
+ +

ParentNode.append() 메서드는 ParentNode의 마지막 자식 뒤에 {{domxref("Node")}} 객체 또는 {{domxref("DOMString")}} 객체를 삽입한다. {{domxref("DOMString")}} 객체는 {{domxref("Text")}} 노드처럼 삽입한다.

+ +

{{domxref("Node.appendChild()")}}와 다른 점:

+ + + +

문법

+ +
[Throws, Unscopable]
+void ParentNode.append((Node or DOMString)... nodes);
+
+ +

매개 변수

+ +
+
nodes
+
삽입하려고 하는 {{domxref("Node")}} 객체 집합 또는 {{domxref("DOMString")}} 객체 집합.
+
+ +

예외

+ + + +

예제

+ +

요소(element) 추가하기

+ +
var parent = document.createElement("div");
+var p = document.createElement("p");
+parent.append(p);
+
+console.log(parent.childNodes); // NodeList [ <p> ]
+
+ +

문자(text) 추가하기

+ +
var parent = document.createElement("div");
+parent.append("Some text");
+
+console.log(parent.textContent); // "Some text"
+ +

요소(element)와 문자(text) 함께 추가하기

+ +
var parent = document.createElement("div");
+var p = document.createElement("p");
+parent.append("Some text", p);
+
+console.log(parent.childNodes); // NodeList [ #text "Some text", <p> ]
+ +

ParentNode.append() 범위 지정 불가

+ +

append() 메소드는 with 문으로 범위를 지정하지 않는다. 더 자세한 내용은 {{jsxref("Symbol.unscopables")}} 참고.

+ +
var parent = document.createElement("div");
+
+with(parent) {
+  append("foo");
+}
+// ReferenceError: append is not defined
+ +

대체 구현

+ +

다음 코드를 이용하면 인터넷 익스플로러 9 이상에서 append() method를 대체하여 구현할 수 있다.

+ +
// Source: https://github.com/jserz/js_piece/blob/master/DOM/ParentNode/append()/append().md
+(function (arr) {
+  arr.forEach(function (item) {
+    if (item.hasOwnProperty('append')) {
+      return;
+    }
+    Object.defineProperty(item, 'append', {
+      configurable: true,
+      enumerable: true,
+      writable: true,
+      value: function append() {
+        var argArr = Array.prototype.slice.call(arguments),
+          docFrag = document.createDocumentFragment();
+
+        argArr.forEach(function (argItem) {
+          var isNode = argItem instanceof Node;
+          docFrag.appendChild(isNode ? argItem : document.createTextNode(String(argItem)));
+        });
+
+        this.appendChild(docFrag);
+      }
+    });
+  });
+})([Element.prototype, Document.prototype, DocumentFragment.prototype]);
+ +

명세

+ + + + + + + + + + + + + + +
명세상태참고
{{SpecName('DOM WHATWG', '#dom-parentnode-append', 'ParentNode.append()')}}{{Spec2('DOM WHATWG')}}초기 정의
+ +

브라우저 호환성

+ + + +

{{Compat("api.ParentNode.append")}}

+ +

참고

+ + diff --git a/files/ko/web/api/parentnode/childelementcount/index.html b/files/ko/web/api/parentnode/childelementcount/index.html new file mode 100644 index 0000000000..665c417512 --- /dev/null +++ b/files/ko/web/api/parentnode/childelementcount/index.html @@ -0,0 +1,97 @@ +--- +title: ParentNode.childElementCount +slug: Web/API/ParentNode/childElementCount +tags: + - API + - DOM + - ParentNode + - Property + - Reference +translation_of: Web/API/ParentNode/childElementCount +--- +
{{ APIRef("DOM") }}
+ +

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

+ +
+

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

+
+ +

문법

+ +
var count = node.childElementCount;
+
+ +
+
count
+
unsigned long(정수) 타입의 반환값.
+
node
+
{{domxref("Document")}}, {{domxref("DocumentFragment")}} 또는 {{domxref("Element")}} 객체.
+
+ +

예제

+ +
var foo = document.getElementById('foo');
+if (foo.childElementCount > 0) {
+  // Do something
+}
+
+ +

폴리필 (IE8 & IE9 & Safari)

+ +

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

+ +
;(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);
+
+ +

명세

+ + + + + + + + + + + + + + + + + + + +
표준상태비고
{{SpecName('DOM WHATWG', '#dom-parentnode-childelementcount', 'ParentNode.childElementCount')}}{{Spec2('DOM WHATWG')}}Split the ElementTraversal interface in {{domxref("ChildNode")}} and ParentNode. This method is now defined on the latter.
+ The {{domxref("Document")}} and {{domxref("DocumentFragment")}} implemented the new interfaces.
{{SpecName('Element Traversal', '#attribute-childElementCount', 'ElementTraversal.childElementCount')}}{{Spec2('Element Traversal')}}Added its initial definition to the ElementTraversal pure interface and use it on {{domxref("Element")}}.
+ +

브라우저 호환성

+ + + +

{{Compat("api.ParentNode.childElementCount")}}

+ +

참조

+ + diff --git a/files/ko/web/api/parentnode/children/index.html b/files/ko/web/api/parentnode/children/index.html new file mode 100644 index 0000000000..264fb25956 --- /dev/null +++ b/files/ko/web/api/parentnode/children/index.html @@ -0,0 +1,85 @@ +--- +title: ParentNode.children +slug: Web/API/ParentNode/children +translation_of: Web/API/ParentNode/children +--- +
{{ APIRef("DOM") }}
+ +

{{domxref("ParentNode")}}의 속성 children은 호출된 요소의 모든 자식 노드의 {{domxref("Element","elements")}}를 담고있는 실시간 {{domxref("HTMLCollection")}}을 반환합니다.

+ +

Syntax 

+ +
var children = node.children;
+ +

Value

+ +

실시간이며, node의 자식 DOM 요소들의 정렬된 컬렉션인 {{ domxref("HTMLCollection") }}. 각 자식 요소를 컬렉션 안에서 접근하기 위해서 {{domxref("HTMLCollection.item", "item()")}} 메소드를 이용하거나 Javascript 배열 스타일의 문법을 사용할 수 있습니다.

+ +

만약 노드가 자식요소를 갖고 있지 않나면, children은 0의 length를 가진 빈 리스트 일 것입니다.

+ +

Example

+ +
var foo = document.getElementById('foo');
+for (var i = 0; i < foo.children.length; i++) {
+    console.log(foo.children[i].tagName);
+}
+
+ +

Polyfill

+ +
// Overwrites native 'children' prototype.
+// Adds Document & DocumentFragment support for IE9 & Safari.
+// Returns array instead of HTMLCollection.
+;(function(constructor) {
+    if (constructor &&
+        constructor.prototype &&
+        constructor.prototype.children == null) {
+        Object.defineProperty(constructor.prototype, 'children', {
+            get: function() {
+                var i = 0, node, nodes = this.childNodes, children = [];
+                while (node = nodes[i++]) {
+                    if (node.nodeType === 1) {
+                        children.push(node);
+                    }
+                }
+                return children;
+            }
+        });
+    }
+})(window.Node || window.Element);
+
+ +

Specification

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#dom-parentnode-children', 'ParentNode.children')}}{{Spec2('DOM WHATWG')}}Initial definition.
+ +

Browser compatibility

+ + + +

{{Compat("api.ParentNode.children")}}

+ +

See also

+ + diff --git a/files/ko/web/api/parentnode/index.html b/files/ko/web/api/parentnode/index.html new file mode 100644 index 0000000000..39502f3625 --- /dev/null +++ b/files/ko/web/api/parentnode/index.html @@ -0,0 +1,80 @@ +--- +title: ParentNode +slug: Web/API/ParentNode +tags: + - API + - DOM + - Mixin + - Node + - ParentNode + - Reference +translation_of: Web/API/ParentNode +--- +
{{APIRef("DOM")}}
+ +

ParentNode 믹스인mixin은 자식을 가질 수 있는 모든 종류의 {{domxref("Node")}} 객체가 공통으로 가지는 메서드와 속성을 가집니다. {{domxref("Element")}}, {{domxref("Document")}}, {{domxref("DocumentFragment")}} 객체가 구현합니다.

+ +

선택자로 DOM 요소 선택하기 문서를 참고하여 CSS 선택자로 원하는 노드나 요소를 선택하는 법을 알아보세요.

+ +

속성

+ +
+
{{domxref("ParentNode.childElementCount")}} {{readonlyInline}}
+
ParentNode가 가진 자식 중 요소의 수를 반환합니다.
+
{{domxref("ParentNode.children")}} {{readonlyInline}}
+
ParentNode가 가진 모든 자식 중 요소만 모은 {{domxref("HTMLCollection")}}을 반환합니다.
+
{{domxref("ParentNode.firstElementChild")}} {{readonlyInline}}
+
ParentNode의 자식이자 {{jsxref("Element")}}인 객체 중 첫 번째를 반환합니다. 만족하는 자식이 없으면 {{jsxref("null")}}을 반환합니다.
+
{{domxref("ParentNode.lastElementChild")}} {{readonlyInline}}
+
ParentNode의 자식이자 {{jsxref("Element")}}인 객체 중 마지막을 반환합니다. 만족하는 자식이 없으면 {{jsxref("null")}}을 반환합니다.
+
+ +

메서드

+ +
+
{{domxref("ParentNode.append()")}} {{experimental_inline}}
+
ParentNode의 마지막 자식 다음에, 주어진 {{domxref("Node")}}나 {{domxref("DOMString")}} 객체를 삽입합니다. DOMString 객체는 동등한 {{domxref("Text")}}처럼 취급합니다.
+
{{domxref("ParentNode.prepend()")}} {{experimental_inline}}
+
ParentNode의 첫 번째 자식 이전에, 주어진 {{domxref("Node")}}나 {{domxref("DOMString")}} 객체를 삽입합니다. DOMString 객체는 동등한 {{domxref("Text")}}처럼 취급합니다.
+
{{domxref("ParentNode.querySelector()")}}
+
현재 ParentNode를 기준으로, 하위 요소 중 주어진 선택자를 만족하는 첫 번째 {{domxref("Element")}}를 반환합니다.
+
{{domxref("ParentNode.querySelectorAll()")}}
+
현재 ParentNode를 기준으로, 하위 요소 중 주어진 선택자를 만족하는 모든 요소의 {{domxref("NodeList")}}를 반환합니다.
+
+ +

명세

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#parentnode', 'ParentNode')}}{{Spec2('DOM WHATWG')}}Split the ElementTraversal interface into {{domxref("ChildNode")}} and {{domxref("ParentNode")}}. The {{domxref("ParentNode.firstElementChild")}}, {{domxref("ParentNode.lastElementChild")}}, and {{domxref("ParentNode.childElementCount")}} properties are now defined on the latter. Added the {{domxref("ParentNode.children")}} property, and the {{domxref("ParentNode.querySelector()")}}, {{domxref("ParentNode.querySelectorAll()")}}, {{domxref("ParentNode.append()")}}, and {{domxref("ParentNode.prepend()")}} methods.
{{SpecName('Element Traversal', '#interface-elementTraversal', 'ElementTraversal')}}{{Spec2('Element Traversal')}}Added the initial definition of its properties to the ElementTraversal pure interface and used it on {{domxref("Element")}}.
+ +

브라우저 호환성

+ + + +

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

+ +

같이 보기

+ + diff --git a/files/ko/web/api/parentnode/prepend/index.html b/files/ko/web/api/parentnode/prepend/index.html new file mode 100644 index 0000000000..1877529adc --- /dev/null +++ b/files/ko/web/api/parentnode/prepend/index.html @@ -0,0 +1,133 @@ +--- +title: ParentNode.prepend() +slug: Web/API/ParentNode/prepend +translation_of: Web/API/ParentNode/prepend +--- +
{{APIRef("DOM")}}
+ +

ParentNode.prepend() 메소드는 {{domxref("Node")}} 객체 또는{{domxref("DOMString")}} 객체를 {{domxref("ParentNode")}}의 첫 자식노드 앞에 삽입한다. {{domxref("DOMString")}} 객체는 {{domxref("Text")}} 노드와 동일하게 삽입된다.

+ +

Syntax

+ +
ParentNode.prepend(...nodesToPrepend);
+
+ +

Parameters

+ +
+
nodesToPrepend
+
One or more nodes to insert before the first child node currently in the ParentNode. Each node can be specified as either a {{domxref("Node")}} object or as a string; strings are inserted as new {{domxref("Text")}} nodes.
+
+ +

Return value

+ +

undefined.

+ +

Exceptions

+ + + +

Examples

+ +

Prepending an element

+ +
var parent = document.createElement("div");
+var p = document.createElement("p");
+var span = document.createElement("span");
+parent.append(p);
+parent.prepend(span);
+
+console.log(parent.childNodes); // NodeList [ <span>, <p> ]
+
+ +

Prepending text

+ +
var parent = document.createElement("div");
+parent.append("Some text");
+parent.prepend("Headline: ");
+
+console.log(parent.textContent); // "Headline: Some text"
+ +

Appending an element and text

+ +
var parent = document.createElement("div");
+var p = document.createElement("p");
+parent.prepend("Some text", p);
+
+console.log(parent.childNodes); // NodeList [ #text "Some text", <p> ]
+ +

ParentNode.prepend() is unscopable

+ +

The prepend() method is not scoped into the with statement. See {{jsxref("Symbol.unscopables")}} for more information.

+ +
var parent = document.createElement("div");
+
+with(parent) {
+  prepend("foo");
+}
+// ReferenceError: prepend is not defined
+ +

Polyfill

+ +

You can polyfill the prepend() method if it's not available:

+ +
// Source: https://github.com/jserz/js_piece/blob/master/DOM/ParentNode/prepend()/prepend().md
+(function (arr) {
+  arr.forEach(function (item) {
+    if (item.hasOwnProperty('prepend')) {
+      return;
+    }
+    Object.defineProperty(item, 'prepend', {
+      configurable: true,
+      enumerable: true,
+      writable: true,
+      value: function prepend() {
+        var argArr = Array.prototype.slice.call(arguments),
+          docFrag = document.createDocumentFragment();
+
+        argArr.forEach(function (argItem) {
+          var isNode = argItem instanceof Node;
+          docFrag.appendChild(isNode ? argItem : document.createTextNode(String(argItem)));
+        });
+
+        this.insertBefore(docFrag, this.firstChild);
+      }
+    });
+  });
+})([Element.prototype, Document.prototype, DocumentFragment.prototype]);
+ +

Specification

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#dom-parentnode-prepend', 'ParentNode.prepend()')}}{{Spec2('DOM WHATWG')}}Initial definition.
+ +

Browser compatibility

+ + + +

{{Compat("api.ParentNode.prepend")}}

+ +

See also

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