path: root/files/ko/web/api/document_object_model/index.html

---
title: 문서 객체 모델(DOM)
slug: Web/API/Document_Object_Model
tags:
  - API
  - DOM
  - Document
  - Document Object Model
  - Guide
  - Overview
  - Reference
translation_of: Web/API/Document_Object_Model
---
<p>{{DefaultAPISidebar("DOM")}}</p>

<p><strong>문서 객체 모델(DOM)</strong>은 메모리에 웹 페이지 문서 구조를 표현함으로써 스크립트 및 프로그래밍 언어와 페이지를 연결합니다. 이때 스크립트는 주로 JavaScript를 의미하나 HTML, SVG, XML 객체를 문서로 모델링 하는 것은 JavaScript 언어의 일부가 아닙니다.</p>

<p>DOM은 문서를 논리 트리로 표현합니다. 트리의 각 브랜치는 노드에서 끝나며, 각 노드는 객체를 갖습니다. DOM 메서드를 사용하면 프로그래밍적으로 트리에 접근할 수 있습니다. 이를 통해 문서의 구조, 스타일, 콘텐츠를 변경할 수 있습니다.</p>

<p>노드는 이벤트 처리기도 포함할 수 있습니다. 이벤트가 발생한 순간, 해당 이벤트와 연결한 처리기가 발동합니다.</p>

<div class="blockIndicator note">
<p><strong>더 알아보려면:</strong> <a href="/ko/docs/Web/API/Document_Object_Model/%EC%86%8C%EA%B0%9C">DOM 소개</a> 문서를 방문해보세요.</p>
</div>

<h2 id="DOM_인터페이스">DOM 인터페이스</h2>

<div class="index">
<ul>
 <li>{{DOMxRef("Attr")}}</li>
 <li>{{DOMxRef("CDATASection")}}</li>
 <li>{{DOMxRef("CharacterData")}}</li>
 <li>{{DOMxRef("ChildNode")}} {{Experimental_Inline}}</li>
 <li>{{DOMxRef("Comment")}}</li>
 <li>{{DOMxRef("CustomEvent")}}</li>
 <li>{{DOMxRef("Document")}}</li>
 <li>{{DOMxRef("DocumentFragment")}}</li>
 <li>{{DOMxRef("DocumentType")}}</li>
 <li>{{DOMxRef("DOMError")}} {{Deprecated_Inline}}</li>
 <li>{{DOMxRef("DOMException")}}</li>
 <li>{{DOMxRef("DOMImplementation")}}</li>
 <li>{{DOMxRef("DOMString")}}</li>
 <li>{{DOMxRef("DOMTimeStamp")}}</li>
 <li>{{DOMxRef("DOMSettableTokenList")}}</li>
 <li>{{DOMxRef("DOMStringList")}}</li>
 <li>{{DOMxRef("DOMTokenList")}}</li>
 <li>{{DOMxRef("Element")}}</li>
 <li>{{DOMxRef("Event")}}</li>
 <li>{{DOMxRef("EventTarget")}}</li>
 <li>{{DOMxRef("HTMLCollection")}}</li>
 <li>{{DOMxRef("MutationObserver")}}</li>
 <li>{{DOMxRef("MutationRecord")}}</li>
 <li>{{DOMxRef("NamedNodeMap")}}</li>
 <li>{{DOMxRef("Node")}}</li>
 <li>{{DOMxRef("NodeFilter")}}</li>
 <li>{{DOMxRef("NodeIterator")}}</li>
 <li>{{DOMxRef("NodeList")}}</li>
 <li>{{DOMxRef("NonDocumentTypeChildNode")}}</li>
 <li>{{DOMxRef("ParentNode")}}</li>
 <li>{{DOMxRef("ProcessingInstruction")}}</li>
 <li>{{DOMxRef("Selection")}} {{Experimental_Inline}}</li>
 <li>{{DOMxRef("Range")}}</li>
 <li>{{DOMxRef("Text")}}</li>
 <li>{{DOMxRef("TextDecoder")}} {{Experimental_Inline}}</li>
 <li>{{DOMxRef("TextEncoder")}} {{Experimental_Inline}}</li>
 <li>{{DOMxRef("TimeRanges")}}</li>
 <li>{{DOMxRef("TreeWalker")}}</li>
 <li>{{DOMxRef("URL")}}</li>
 <li>{{DOMxRef("Window")}}</li>
 <li>{{DOMxRef("Worker")}}</li>
 <li>{{DOMxRef("XMLDocument")}} {{Experimental_Inline}}</li>
</ul>
</div>

<div class="hidden">
<h3 id="더_이상_사용하지_않는_DOM_인터페이스">더 이상 사용하지 않는 DOM 인터페이스</h3>

<p>문서객체모델 매우 단순하게 변하고 있습니다. 이를 위해 다른 DOM 레벨 3 혹은 이전 사양에 있었던 아래의 인터페이스들을 제거했습니다. 향후에 이 중 일부가 다시 도입될 지는 확실하지 않지만 당분간은 모두 폐기된 것으로 간주하고 사용을 피해야 합니다.</p>

<div class="index">
<ul>
 <li>{{DOMxRef("DocumentTouch")}}}</li>
 <li>{{DOMxRef("DOMConfiguration")}}</li>
 <li>{{DOMxRef("DOMErrorHandler")}}}</li>
 <li>{{DOMxRef("DOMImplementationList")}}</li>
 <li>{{DOMxRef("DOMImplementationRegistry")}}</li>
 <li>{{DOMxRef("DOMImplementationSource")}}</li>
 <li>{{DOMxRef("DOMLocator")}}</li>
 <li>{{DOMxRef("DOMObject")}}</li>
 <li>{{DOMxRef("DOMSettableTokenList")}}</li>
 <li>{{DOMxRef("DOMUserData")}}</li>
 <li>{{DOMxRef("ElementTraversal")}}</li>
 <li>{{DOMxRef("Entity")}}</li>
 <li>{{DOMxRef("EntityReference")}}</li>
 <li>{{DOMxRef("NameList")}}</li>
 <li>{{DOMxRef("Notation")}}</li>
 <li>{{DOMxRef("TypeInfo")}}</li>
 <li>{{DOMxRef("UserDataHandler")}}</li>
</ul>
</div>
</div>

<h2 id="HTML_DOM">HTML DOM</h2>

<p>문서는 다양한 HTML 관련 기능들을 포함하는 HTML 명세에 의해 확장된 {{DOMxRef("Document")}} 을 사용해 설명된 HTML 을 포함합니다.</p>

<p><span>HTML 객체는 또한 {{DOMxRef("Window")}} 인터페이스, 이에 관련된 {{DOMxRef("window.style", "Style")}}(보통 CSS), 컨텍스트에 관련된 브라우저의 히스토리인 {{DOMxRef("window.history", "History")}} 를 사용해 페이지가 그려지는 탭이나 창과 같은 브라우저의 다양한 기능들에 접근할 수 있게 해줍니다. 마지막에는, 문서의 {{DOMxRef("Selection")}} 이 완료됩니다.</span></p>

<p>자세한 내용은 <a href="/ko/docs/Web/API/HTML_DOM">HTML DOM API</a> 문서를 참고하세요.</p>

<h2 id="SVG_인터페이스">SVG 인터페이스</h2>

<h3 id="SVG_요소_인터페이스">SVG 요소 인터페이스</h3>

<div class="index">
<ul>
 <li>{{DOMxRef("SVGAElement")}}</li>
 <li>{{DOMxRef("SVGAltGlyphElement")}} {{Deprecated_Inline}}</li>
 <li>{{DOMxRef("SVGAltGlyphDefElement")}} {{Deprecated_Inline}}</li>
 <li>{{DOMxRef("SVGAltGlyphItemElement")}} {{Deprecated_Inline}}</li>
 <li>{{DOMxRef("SVGAnimationElement")}}</li>
 <li>{{DOMxRef("SVGAnimateElement")}}</li>
 <li>{{DOMxRef("SVGAnimateColorElement")}} {{Deprecated_Inline}}</li>
 <li>{{DOMxRef("SVGAnimateMotionElement")}}</li>
 <li>{{DOMxRef("SVGAnimateTransformElement")}}</li>
 <li>{{DOMxRef("SVGCircleElement")}}</li>
 <li>{{DOMxRef("SVGClipPathElement")}}</li>
 <li>{{DOMxRef("SVGColorProfileElement")}} {{Deprecated_Inline}}</li>
 <li>{{DOMxRef("SVGComponentTransferFunctionElement")}}</li>
 <li>{{DOMxRef("SVGCursorElement")}}</li>
 <li>{{DOMxRef("SVGDefsElement")}}</li>
 <li>{{DOMxRef("SVGDescElement")}}</li>
 <li>{{DOMxRef("SVGElement")}}</li>
 <li>{{DOMxRef("SVGEllipseElement")}}</li>
 <li>{{DOMxRef("SVGFEBlendElement")}}</li>
 <li>{{DOMxRef("SVGFEColorMatrixElement")}}</li>
 <li>{{DOMxRef("SVGFEComponentTransferElement")}}</li>
 <li>{{DOMxRef("SVGFECompositeElement")}}</li>
 <li>{{DOMxRef("SVGFEConvolveMatrixElement")}}</li>
 <li>{{DOMxRef("SVGFEDiffuseLightingElement")}}</li>
 <li>{{DOMxRef("SVGFEDisplacementMapElement")}}</li>
 <li>{{DOMxRef("SVGFEDistantLightElement")}}</li>
 <li>{{DOMxRef("SVGFEDropShadowElement")}}</li>
 <li>{{DOMxRef("SVGFEFloodElement")}}</li>
 <li>{{DOMxRef("SVGFEFuncAElement")}}</li>
 <li>{{DOMxRef("SVGFEFuncBElement")}}</li>
 <li>{{DOMxRef("SVGFEFuncGElement")}}</li>
 <li>{{DOMxRef("SVGFEFuncRElement")}}</li>
 <li>{{DOMxRef("SVGFEGaussianBlurElement")}}</li>
 <li>{{DOMxRef("SVGFEImageElement")}}</li>
 <li>{{DOMxRef("SVGFEMergeElement")}}</li>
 <li>{{DOMxRef("SVGFEMergeNodeElement")}}</li>
 <li>{{DOMxRef("SVGFEMorphologyElement")}}</li>
 <li>{{DOMxRef("SVGFEOffsetElement")}}</li>
 <li>{{DOMxRef("SVGFEPointLightElement")}}</li>
 <li>{{DOMxRef("SVGFESpecularLightingElement")}}</li>
 <li>{{DOMxRef("SVGFESpotLightElement")}}</li>
 <li>{{DOMxRef("SVGFETileElement")}}</li>
 <li>{{DOMxRef("SVGFETurbulenceElement")}}</li>
 <li>{{DOMxRef("SVGFilterElement")}}</li>
 <li>{{DOMxRef("SVGFilterPrimitiveStandardAttributes")}}</li>
 <li>{{DOMxRef("SVGFontElement")}} {{Deprecated_Inline}}</li>
 <li>{{DOMxRef("SVGFontFaceElement")}} {{Deprecated_Inline}}</li>
 <li>{{DOMxRef("SVGFontFaceFormatElement")}} {{Deprecated_Inline}}</li>
 <li>{{DOMxRef("SVGFontFaceNameElement")}} {{Deprecated_Inline}}</li>
 <li>{{DOMxRef("SVGFontFaceSrcElement")}} {{Deprecated_Inline}}</li>
 <li>{{DOMxRef("SVGFontFaceUriElement")}} {{Deprecated_Inline}}</li>
 <li>{{DOMxRef("SVGForeignObjectElement")}}</li>
 <li>{{DOMxRef("SVGGElement")}}</li>
 <li>{{DOMxRef("SVGGeometryElement")}}</li>
 <li>{{DOMxRef("SVGGlyphElement")}} {{Deprecated_Inline}}</li>
 <li>{{DOMxRef("SVGGlyphRefElement")}} {{Deprecated_Inline}}</li>
 <li>{{DOMxRef("SVGGradientElement")}}</li>
 <li>{{DOMxRef("SVGGraphicsElement")}}</li>
 <li>{{DOMxRef("SVGHatchElement")}} {{Experimental_Inline}}</li>
 <li>{{DOMxRef("SVGHatchpathElement")}} {{Experimental_Inline}}</li>
 <li>{{DOMxRef("SVGHKernElement")}} {{Deprecated_Inline}}</li>
 <li>{{DOMxRef("SVGImageElement")}}</li>
 <li>{{DOMxRef("SVGLinearGradientElement")}}</li>
 <li>{{DOMxRef("SVGLineElement")}}</li>
 <li>{{DOMxRef("SVGMarkerElement")}} {{Experimental_Inline}}</li>
 <li>{{DOMxRef("SVGMaskElement")}}</li>
 <li>{{DOMxRef("SVGMeshElement")}} {{Experimental_Inline}}</li>
 <li>{{DOMxRef("SVGMeshGradientElement")}} {{Experimental_Inline}}</li>
 <li>{{DOMxRef("SVGMeshpatchElement")}} {{Experimental_Inline}}</li>
 <li>{{DOMxRef("SVGMeshrowElement")}} {{Experimental_Inline}}</li>
 <li>{{DOMxRef("SVGMetadataElement")}}</li>
 <li>{{DOMxRef("SVGMissingGlyphElement")}} {{Deprecated_Inline}}</li>
 <li>{{DOMxRef("SVGMPathElement")}}</li>
 <li>{{DOMxRef("SVGPathElement")}}</li>
 <li>{{DOMxRef("SVGPatternElement")}}</li>
 <li>{{DOMxRef("SVGPolylineElement")}}</li>
 <li>{{DOMxRef("SVGPolygonElement")}}</li>
 <li>{{DOMxRef("SVGRadialGradientElement")}}</li>
 <li>{{DOMxRef("SVGRectElement")}}</li>
 <li>{{DOMxRef("SVGScriptElement")}}</li>
 <li>{{DOMxRef("SVGSetElement")}}</li>
 <li>{{DOMxRef("SVGSolidcolorElement")}} {{Experimental_Inline}}</li>
 <li>{{DOMxRef("SVGStopElement")}}</li>
 <li>{{DOMxRef("SVGStyleElement")}}</li>
 <li>{{DOMxRef("SVGSVGElement")}}</li>
 <li>{{DOMxRef("SVGSwitchElement")}}</li>
 <li>{{DOMxRef("SVGSymbolElement")}}</li>
 <li>{{DOMxRef("SVGTextContentElement")}}</li>
 <li>{{DOMxRef("SVGTextElement")}}</li>
 <li>{{DOMxRef("SVGTextPathElement")}}</li>
 <li>{{DOMxRef("SVGTextPositioningElement")}}</li>
 <li>{{DOMxRef("SVGTitleElement")}}</li>
 <li>{{DOMxRef("SVGTRefElement")}} {{Deprecated_Inline}}</li>
 <li>{{DOMxRef("SVGTSpanElement")}}</li>
 <li>{{DOMxRef("SVGUseElement")}}</li>
 <li>{{DOMxRef("SVGUnknownElement")}} {{Experimental_Inline}}</li>
 <li>{{DOMxRef("SVGViewElement")}}</li>
 <li>{{DOMxRef("SVGVKernElement")}} {{Deprecated_Inline}}</li>
</ul>
</div>

<h3 id="SVG_데이터_타입_인터페이스">SVG 데이터 타입 인터페이스</h3>

<p>다음은 SVG 프로퍼티와 어트리뷰트 정의에 쓰이는 데이터 타입을 위한 DOM API입니다.</p>

<h4 id="정적_타입">정적 타입</h4>

<div class="index">
<ul>
 <li>{{DOMxRef("SVGAngle")}}</li>
 <li>{{DOMxRef("SVGColor")}} {{Deprecated_Inline}}</li>
 <li>{{DOMxRef("SVGICCColor")}} {{Deprecated_Inline}}</li>
 <li>{{DOMxRef("SVGElementInstance")}}</li>
 <li>{{DOMxRef("SVGElementInstanceList")}}</li>
 <li>{{DOMxRef("SVGLength")}}</li>
 <li>{{DOMxRef("SVGLengthList")}}</li>
 <li>{{DOMxRef("SVGMatrix")}} {{Deprecated_Inline}}</li>
 <li>{{DOMxRef("SVGNameList")}}</li>
 <li>{{DOMxRef("SVGNumber")}}</li>
 <li>{{DOMxRef("SVGNumberList")}}</li>
 <li>{{DOMxRef("SVGPaint")}}</li>
 <li>{{DOMxRef("SVGPathSeg")}} {{Deprecated_Inline}}</li>
 <li>{{DOMxRef("SVGPathSegClosePath")}} {{Deprecated_Inline}}</li>
 <li>{{DOMxRef("SVGPathSegMovetoAbs")}} {{Deprecated_Inline}}</li>
 <li>{{DOMxRef("SVGPathSegMovetoRel")}} {{Deprecated_Inline}}</li>
 <li>{{DOMxRef("SVGPathSegLinetoAbs")}} {{Deprecated_Inline}}</li>
 <li>{{DOMxRef("SVGPathSegLinetoRel")}} {{Deprecated_Inline}}</li>
 <li>{{DOMxRef("SVGPathSegCurvetoCubicAbs")}} {{Deprecated_Inline}}</li>
 <li>{{DOMxRef("SVGPathSegCurvetoCubicRel")}} {{Deprecated_Inline}}</li>
 <li>{{DOMxRef("SVGPathSegCurvetoQuadraticAbs")}} {{Deprecated_Inline}}</li>
 <li>{{DOMxRef("SVGPathSegCurvetoQuadraticRel")}} {{Deprecated_Inline}}</li>
 <li>{{DOMxRef("SVGPathSegArcAbs")}} {{Deprecated_Inline}}</li>
 <li>{{DOMxRef("SVGPathSegArcRel")}} {{Deprecated_Inline}}</li>
 <li>{{DOMxRef("SVGPathSegLinetoHorizontalAbs")}} {{Deprecated_Inline}}</li>
 <li>{{DOMxRef("SVGPathSegLinetoHorizontalRel")}} {{Deprecated_Inline}}</li>
 <li>{{DOMxRef("SVGPathSegLinetoVerticalAbs")}} {{Deprecated_Inline}}</li>
 <li>{{DOMxRef("SVGPathSegLinetoVerticalRel")}} {{Deprecated_Inline}}</li>
 <li>{{DOMxRef("SVGPathSegCurvetoCubicSmoothAbs")}} {{Deprecated_Inline}}</li>
 <li>{{DOMxRef("SVGPathSegCurvetoCubicSmoothRel")}} {{Deprecated_Inline}}</li>
 <li>{{DOMxRef("SVGPathSegCurvetoQuadraticSmoothAbs")}} {{Deprecated_Inline}}</li>
 <li>{{DOMxRef("SVGPathSegCurvetoQuadraticSmoothRel")}} {{Deprecated_Inline}}</li>
 <li>{{DOMxRef("SVGPathSegList")}} {{Deprecated_Inline}}</li>
 <li>{{DOMxRef("SVGPoint")}} {{Deprecated_Inline}}</li>
 <li>{{DOMxRef("SVGPointList")}} {{Deprecated_Inline}}</li>
 <li>{{DOMxRef("SVGPreserveAspectRatio")}}</li>
 <li>{{DOMxRef("SVGRect")}} {{Deprecated_Inline}}</li>
 <li>{{DOMxRef("SVGStringList")}}</li>
 <li>{{DOMxRef("SVGTransform")}}</li>
 <li>{{DOMxRef("SVGTransformList")}}</li>
</ul>
</div>

<h4 id="움직이는animated_형">움직이는(animated) 형</h4>

<div class="index">
<ul>
 <li>{{DOMxRef("SVGAnimatedAngle")}}</li>
 <li>{{DOMxRef("SVGAnimatedBoolean")}}</li>
 <li>{{DOMxRef("SVGAnimatedEnumeration")}}</li>
 <li>{{DOMxRef("SVGAnimatedInteger")}}</li>
 <li>{{DOMxRef("SVGAnimatedLength")}}</li>
 <li>{{DOMxRef("SVGAnimatedLengthList")}}</li>
 <li>{{DOMxRef("SVGAnimatedNumber")}}</li>
 <li>{{DOMxRef("SVGAnimatedNumberList")}}</li>
 <li>{{DOMxRef("SVGAnimatedPathData")}} {{Deprecated_Inline}}</li>
 <li>{{DOMxRef("SVGAnimatedPoints")}}</li>
 <li>{{DOMxRef("SVGAnimatedPreserveAspectRatio")}}</li>
 <li>{{DOMxRef("SVGAnimatedRect")}}</li>
 <li>{{DOMxRef("SVGAnimatedString")}}</li>
 <li>{{DOMxRef("SVGAnimatedTransformList")}}</li>
</ul>
</div>

<h3 id="SMIL_관련_인터페이스">SMIL 관련 인터페이스</h3>

<div class="index">
<ul>
 <li>{{DOMxRef("ElementTimeControl")}}</li>
 <li>{{DOMxRef("TimeEvent")}}</li>
</ul>
</div>

<h3 id="기타_SVG_인터페이스">기타 SVG 인터페이스</h3>

<div class="index">
<ul>
 <li>{{DOMxRef("GetSVGDocument")}}</li>
 <li>{{DOMxRef("ShadowAnimation")}}</li>
 <li>{{DOMxRef("SVGColorProfileRule")}} {{Deprecated_Inline}}</li>
 <li>{{DOMxRef("SVGCSSRule")}} {{Deprecated_Inline}}</li>
 <li>{{DOMxRef("SVGDocument")}}</li>
 <li>{{DOMxRef("SVGException")}} {{Deprecated_Inline}}</li>
 <li>{{DOMxRef("SVGExternalResourcesRequired")}} {{Deprecated_Inline}}</li>
 <li>{{DOMxRef("SVGFitToViewBox")}}</li>
 <li>{{DOMxRef("SVGLangSpace")}} {{Deprecated_Inline}}</li>
 <li>{{DOMxRef("SVGLocatable")}} {{Deprecated_Inline}}</li>
 <li>{{DOMxRef("SVGRenderingIntent")}} {{Deprecated_Inline}}</li>
 <li>{{DOMxRef("SVGStylable")}} {{Deprecated_Inline}}</li>
 <li>{{DOMxRef("SVGTests")}}</li>
 <li>{{DOMxRef("SVGTransformable")}} {{Deprecated_Inline}}</li>
 <li>{{DOMxRef("SVGUnitTypes")}}</li>
 <li>{{DOMxRef("SVGUseElementShadowRoot")}}</li>
 <li>{{DOMxRef("SVGURIReference")}}</li>
 <li>{{DOMxRef("SVGViewSpec")}} {{Deprecated_Inline}}</li>
 <li>{{DOMxRef("SVGZoomAndPan")}}</li>
 <li>{{DOMxRef("SVGZoomEvent")}} {{Deprecated_Inline}}</li>
</ul>
</div>

<h2 id="명세">명세</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName("DOM WHATWG")}}</td>
   <td>{{Spec2("DOM WHATWG")}}</td>
   <td></td>
  </tr>
 </tbody>
</table>

<h2 id="See_also" name="See_also">같이 보기</h2>

<ul>
 <li><a href="/ko/docs/Web/API/Document_Object_Model/Examples">DOM 예제 </a></li>
 <li><a href="/ko/docs/Web/API/CSS_Object_Model">CSS 객체 모델 (CSSOM)</a></li>
</ul>