path: root/files/ja/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
  - Web
  - ガイド
  - リファレンス
translation_of: Web/API/Document_Object_Model
---
<div>{{DefaultAPISidebar("DOM")}}</div>

<p><span class="seoSummary"><strong>Document Object Model</strong> (<strong>DOM</strong>) は、— ウェブページを表す HTML のように — 文書の構造をメモリ内に表現することで、ウェブページとスクリプトやプログラミング言語を接続するものです。</span>ふつうは JavaScript を使用しますが、 HTML、 SVG、 XML などの文書をオブジェクトとしてモデリングすることはコア JavaScript 言語の一部ではありません。</p>

<p>DOM のモデルは文書を論理的なツリーで表現します。ツリーのそれぞれの枝はノードで終わっており、それぞれのノードがオブジェクトを含んでいます。 DOM のメソッドでプログラム的にツリーにアクセスできます。これにより、文書構造やスタイルやコンテンツを変更することができます。</p>

<p>ノードにはイベントハンドラーを割り当てることができます。イベントが発生すると、イベントハンドラーが実行されます。</p>

<div class="blockIndicator note">
<p>DOM とは何であるか、どのように文書を表現するのかについて<strong>もっと学習する</strong>のであれば、 <a href="/ja/docs/Web/API/Document_Object_Model/Introduction">DOM 入門</a>をご覧ください。</p>
</div>

<h2 id="DOM_interfaces" name="DOM_interfaces">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("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>

<h3 id="Obsolete_DOM_interfaces" name="Obsolete_DOM_interfaces">廃止された DOM インターフェイス</h3>

<p>Document Object Model は高度に単純化されてきています。このため、 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>

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

<p>HTML を含む文書は、 HTML 仕様で拡張した様々な HTML 固有の機能を含む {{DOMxRef("Document")}} インターフェイスを使用して記述されます。具体的には、 {{domxref("Element")}} インターフェイスは拡張されて {{domxref("HTMLElement")}} を始めとするのサブクラスになっており、それぞれが要素の一つ (または深く関係した同類のもの) を表します。</p>

<p>HTML DOM API によって、タブやウィンドウ、 CSS スタイルやスタイルシート、ブラウザーの履歴など、様々なブラウザーの機能にアクセスすることができます。これらのインターフェイスの詳細については、 <a href="/ja/docs/Web/API/HTML_DOM">HTML DOM API</a> のドキュメントにあります。</p>

<h2 id="SVG_interfaces" name="SVG_interfaces">SVG のインターフェイス</h2>

<h3 id="SVG_element_interfaces" name="SVG_element_interfaces">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_data_type_interfaces" name="SVG_data_type_interfaces">SVG データ型のインターフェイス</h3>

<p>SVG のプロパティと属性の定義で使用されるデータタイプの DOM API を次に示します。</p>

<h4 id="Static_type" name="Static_type">静的型</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_type" name="Animated_type">アニメーション型</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_related_interfaces" name="SMIL_related_interfaces">SMIL 関連インターフェイス</h3>

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

<h3 id="Other_SVG_interfaces" name="Other_SVG_interfaces">その他 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="Specifications" name="Specifications">仕様書</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">仕様書</th>
   <th scope="col">状態</th>
   <th scope="col">備考</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="/ja/docs/Web/API/Document_Object_Model/Examples">DOM の例</a></li>
 <li><a href="/ja/docs/Web/API/CSS_Object_Model">CSS Object Model (CSSOM)</a></li>
</ul>