1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
|
---
title: ParentNode
slug: Web/API/ParentNode
tags:
- API
- DOM
- Mixin
- Node
- ParentNode
- Reference
translation_of: Web/API/ParentNode
---
<div>{{APIRef("DOM")}}</div>
<p><span class="seoSummary"><code><strong>ParentNode</strong></code> 믹스인<sup>mixin</sup>은 자식을 가질 수 있는 모든 종류의 {{domxref("Node")}} 객체가 공통으로 가지는 메서드와 속성을 가집니다.</span> {{domxref("Element")}}, {{domxref("Document")}}, {{domxref("DocumentFragment")}} 객체가 구현합니다.</p>
<p><a href="/ko/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors">선택자로 DOM 요소 선택하기</a> 문서를 참고하여 <a href="/ko/docs/Web/CSS/CSS_Selectors">CSS 선택자</a>로 원하는 노드나 요소를 선택하는 법을 알아보세요.</p>
<h2 id="속성">속성</h2>
<dl>
<dt>{{domxref("ParentNode.childElementCount")}} {{readonlyInline}}</dt>
<dd><code>ParentNode</code>가 가진 자식 중 요소의 수를 반환합니다.</dd>
<dt>{{domxref("ParentNode.children")}} {{readonlyInline}}</dt>
<dd><code>ParentNode</code>가 가진 모든 자식 중 요소만 모은 {{domxref("HTMLCollection")}}을 반환합니다.</dd>
<dt>{{domxref("ParentNode.firstElementChild")}} {{readonlyInline}}</dt>
<dd><code>ParentNode</code>의 자식이자 {{jsxref("Element")}}인 객체 중 첫 번째를 반환합니다. 만족하는 자식이 없으면 {{jsxref("null")}}을 반환합니다.</dd>
<dt>{{domxref("ParentNode.lastElementChild")}} {{readonlyInline}}</dt>
<dd><code>ParentNode</code>의 자식이자 {{jsxref("Element")}}인 객체 중 마지막을 반환합니다. 만족하는 자식이 없으면 {{jsxref("null")}}을 반환합니다.</dd>
</dl>
<h2 id="메서드">메서드</h2>
<dl>
<dt>{{domxref("ParentNode.append()")}} {{experimental_inline}}</dt>
<dd><code>ParentNode</code>의 마지막 자식 다음에, 주어진 {{domxref("Node")}}나 {{domxref("DOMString")}} 객체를 삽입합니다. <code>DOMString</code> 객체는 동등한 {{domxref("Text")}}처럼 취급합니다.</dd>
<dt>{{domxref("ParentNode.prepend()")}} {{experimental_inline}}</dt>
<dd><code>ParentNode</code>의 첫 번째 자식 이전에, 주어진 {{domxref("Node")}}나 {{domxref("DOMString")}} 객체를 삽입합니다. <code>DOMString</code> 객체는 동등한 {{domxref("Text")}}처럼 취급합니다.</dd>
<dt>{{domxref("ParentNode.querySelector()")}}</dt>
<dd>현재 <code>ParentNode</code>를 기준으로, 하위 요소 중 주어진 선택자를 만족하는 첫 번째 {{domxref("Element")}}를 반환합니다.</dd>
<dt>{{domxref("ParentNode.querySelectorAll()")}}</dt>
<dd>현재 <code>ParentNode</code>를 기준으로, 하위 요소 중 주어진 선택자를 만족하는 모든 요소의 {{domxref("NodeList")}}를 반환합니다.</dd>
</dl>
<h2 id="명세">명세</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
<tr>
<td>{{SpecName('DOM WHATWG', '#parentnode', 'ParentNode')}}</td>
<td>{{Spec2('DOM WHATWG')}}</td>
<td>Split the <code>ElementTraversal</code> 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.</td>
</tr>
<tr>
<td>{{SpecName('Element Traversal', '#interface-elementTraversal', 'ElementTraversal')}}</td>
<td>{{Spec2('Element Traversal')}}</td>
<td>Added the initial definition of its properties to the <code>ElementTraversal</code> pure interface and used it on {{domxref("Element")}}.</td>
</tr>
</tbody>
</table>
<h2 id="브라우저_호환성">브라우저 호환성</h2>
<p>{{Compat("api.ParentNode")}}</p>
<h2 id="같이_보기">같이 보기</h2>
<ul>
<li>{{domxref("ChildNode")}} 순수 인터페이스.</li>
<li>
<div class="syntaxbox"><code>ParentNode</code>를 구현하는 {{domxref("Document")}}, {{domxref("Element")}}, {{domxref("DocumentFragment")}}.</div>
</li>
</ul>
|
