---
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>