---
title: Руководство по DOM
slug: Web/API/Document_Object_Model
tags:
  - DOM
  - DOM Reference
  - DOM интерфейс
  - Intermediate
  - Руководство
translation_of: Web/API/Document_Object_Model
original_slug: DOM/DOM_Reference
---
<p><strong>Объектная Модель Документа (<em>DOM</em>)</strong> является программным интерфейсом для HTML, XML и SVG документов. Это обеспечивает структурированное представление документа (дерева), и определяет способ, по которому структура может быть доступна для программы, для изменения структуры документа, его стиля и содержания. DOM обеспечивает представление документа в виде структурированной группы узлов и объектов, которые имеют свойства и методы. По сути, она связывает веб -страницы со скриптами или языками программирования.</p>

<p>DOM чаще всего используется в JavaScript, но не является его частью, поэтому иногда с DOM работают в других языках.</p>

<p><a href="/ru/docs/DOM/DOM_Reference/Введение">Введение</a> в DOM доступно.</p>

<h2 id="DOM_интерфейсы">DOM интерфейсы</h2>

<div class="index">
<ul>
 <li>{{domxref("Attr")}}</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")}}</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("Node")}}</li>
 <li>{{domxref("NodeFilter")}}</li>
 <li>{{domxref("NodeIterator")}}</li>
 <li>{{domxref("NodeList")}}</li>
 <li>{{domxref("ParentNode")}} {{experimental_inline}}</li>
 <li>{{domxref("ProcessingInstruction")}}</li>
 <li>{{domxref("Promise")}} {{experimental_inline}}</li>
 <li>{{domxref("PromiseResolver")}} {{experimental_inline}}</li>
 <li>{{domxref("Range")}}</li>
 <li>{{domxref("Text")}}</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>

<h2 id="Устаревшие_интерфейсы">Устаревшие интерфейсы</h2>

<p><span id="result_box" lang="ru"><span class="hps">Объектная модель документа</span> <span class="hps">находится в</span> <span class="hps">процессе</span><span class="hps"> значительного упрощения</span><span>.</span> <span class="hps">Для того,</span> <span class="hps">чтобы достигнуть этого</span> <span class="hps">следующие интерфейсы</span><span>, присутствующие на</span> <span class="hps">различных</span> <span class="hps">DOM</span> level <span class="hps">3</span> <span class="hps">или</span> <span class="hps">более ранних</span> <span class="hps">спецификациях</span> <span class="hps">были удалены</span><span>.</span> <span class="hps">До сих пор неясно</span><span>, будут ли</span> <span class="hps">некоторые из них возвращены</span><span>,</span> <span class="hps">но на данный момент</span> <span class="hps">они</span> <span class="hps">должны быть рассмотрены</span> <span class="hps">как устаревшие,</span> <span class="hps">и их использования следует избегать</span><span>:</span></span></p>

<div class="index">
<ul>
 <li>{{domxref("CDATASection")}}</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("DOMUserData")}}</li>
 <li>{{domxref("Entity")}}</li>
 <li>{{domxref("EntityReference")}}</li>
 <li>{{domxref("NamedNodeMap")}}</li>
 <li>{{domxref("NameList")}}</li>
 <li>{{domxref("Notation")}}</li>
 <li>{{domxref("TypeInfo")}}</li>
 <li>{{domxref("UserDataHandler")}}</li>
</ul>
</div>

<h2 id="HTML_интерфейсы">HTML интерфейсы</h2>

<p>Документ, содержащий HTML описывается с помощью {{domxref("HTMLDocument")}} интерфейса. Обратите внимание, что HTML спецификация также расширяет {{domxref("Document")}} интерфейс.</p>

<p><code><font face="Open Sans, Arial, sans-serif">Объект </font>HTMLDocument</code> также даёт доступ к следующим возможностям браузера: вкладки, окна, в которых отрисовывается страница, используя интерфейс {{domxref("Window")}}, ассоциированный с ним {{domxref("window.style", "Style")}} (обычно CSS), история браузера, относящаяся к контексту, {{domxref("window.history", "History")}}, в конце концов, {{domxref("Selection")}} в документе.</p>

<h3 id="Интерфейсы_HTML_элементов">Интерфейсы HTML элементов</h3>

<div class="index">
<ul>
 <li>{{domxref("HTMLAnchorElement")}}</li>
 <li>{{domxref("HTMLAppletElement")}}</li>
 <li>{{domxref("HTMLAreaElement")}}</li>
 <li>{{domxref("HTMLAudioElement")}}</li>
 <li>{{domxref("HTMLBaseElement")}}</li>
 <li>{{domxref("HTMLBodyElement")}}</li>
 <li>{{domxref("HTMLBRElement")}}</li>
 <li>{{domxref("HTMLButtonElement")}}</li>
 <li>{{domxref("HTMLCanvasElement")}}</li>
 <li>{{domxref("HTMLDataElement")}}</li>
 <li>{{domxref("HTMLDataListElement")}}</li>
 <li>{{domxref("HTMLDirectoryElement")}}</li>
 <li>{{domxref("HTMLDivElement")}}</li>
 <li>{{domxref("HTMLDListElement")}}</li>
 <li>{{domxref("HTMLElement")}}</li>
 <li>{{domxref("HTMLEmbedElement")}}</li>
 <li>{{domxref("HTMLFieldSetElement")}}</li>
 <li>{{domxref("HTMLFontElement")}}</li>
 <li>{{domxref("HTMLFormElement")}}</li>
 <li>{{domxref("HTMLFrameElement")}}</li>
 <li>{{domxref("HTMLFrameSetElement")}}</li>
 <li>{{domxref("HTMLHeadElement")}}</li>
 <li>{{domxref("HTMLHeadingElement")}}</li>
 <li>{{domxref("HTMLHtmlElement")}}</li>
 <li>{{domxref("HTMLHRElement")}}</li>
 <li>{{domxref("HTMLIFrameElement")}}</li>
 <li>{{domxref("HTMLImageElement")}}</li>
 <li>{{domxref("HTMLInputElement")}}</li>
 <li>{{domxref("HTMLKeygenElement")}}</li>
 <li>{{domxref("HTMLLabelElement")}}</li>
 <li>{{domxref("HTMLLegendElement")}}</li>
 <li>{{domxref("HTMLLIElement")}}</li>
 <li>{{domxref("HTMLLinkElement")}}</li>
 <li>{{domxref("HTMLMapElement")}}</li>
 <li>{{domxref("HTMLMediaElement")}}</li>
 <li>{{domxref("HTMLMenuElement")}}</li>
 <li>{{domxref("HTMLMetaElement")}}</li>
 <li>{{domxref("HTMLMeterElement")}}</li>
 <li>{{domxref("HTMLModElement")}}</li>
 <li>{{domxref("HTMLObjectElement")}}</li>
 <li>{{domxref("HTMLOListElement")}}</li>
 <li>{{domxref("HTMLOptGroupElement")}}</li>
 <li>{{domxref("HTMLOptionElement")}}</li>
 <li>{{domxref("HTMLOutputElement")}}</li>
 <li>{{domxref("HTMLParagraphElement")}}</li>
 <li>{{domxref("HTMLParamElement")}}</li>
 <li>{{domxref("HTMLPreElement")}}</li>
 <li>{{domxref("HTMLProgressElement")}}</li>
 <li>{{domxref("HTMLQuoteElement")}}</li>
 <li>{{domxref("HTMLScriptElement")}}</li>
 <li>{{domxref("HTMLSelectElement")}}</li>
 <li>{{domxref("HTMLSourceElement")}}</li>
 <li>{{domxref("HTMLSpanElement")}}</li>
 <li>{{domxref("HTMLStyleElement")}}</li>
 <li>{{domxref("HTMLTableElement")}}</li>
 <li>{{domxref("HTMLTableCaptionElement")}}</li>
 <li>{{domxref("HTMLTableCellElement")}}</li>
 <li>{{domxref("HTMLTableDataCellElement")}}</li>
 <li>{{domxref("HTMLTableHeaderCellElement")}}</li>
 <li>{{domxref("HTMLTableColElement")}}</li>
 <li>{{domxref("HTMLTableRowElement")}}</li>
 <li>{{domxref("HTMLTableSectionElement")}}</li>
 <li>{{domxref("HTMLTextAreaElement")}}</li>
 <li>{{domxref("HTMLTimeElement")}}</li>
 <li>{{domxref("HTMLTitleElement")}}</li>
 <li>{{domxref("HTMLTrackElement")}}</li>
 <li>{{domxref("HTMLUListElement")}}</li>
 <li>{{domxref("HTMLUnknownElement")}}</li>
 <li>{{domxref("HTMLVideoElement")}}</li>
</ul>
</div>

<h3 id="Другие_интерфейсы">Другие интерфейсы</h3>

<div class="index">
<ul>
 <li>{{domxref("CanvasRenderingContext2D")}}</li>
 <li>{{domxref("CanvasGradient")}}</li>
 <li>{{domxref("CanvasPattern")}}</li>
 <li>{{domxref("TextMetrics")}}</li>
 <li>{{domxref("ImageData")}}</li>
 <li>{{domxref("CanvasPixelArray")}}</li>
 <li>{{domxref("NotifyAudioAvailableEvent")}}</li>
 <li>{{domxref("HTMLAllCollection")}}</li>
 <li>{{domxref("HTMLFormControlsCollection")}}</li>
 <li>{{domxref("HTMLOptionsCollection")}}</li>
 <li>{{domxref("HTMLPropertiesCollection")}}</li>
 <li>{{domxref("DOMStringMap")}}</li>
 <li>{{domxref("RadioNodeList")}}</li>
 <li>{{domxref("MediaError")}}</li>
</ul>
</div>

<h3 id="Устаревшие_HTML_интерфейсы">Устаревшие HTML интерфейсы</h3>

<div class="index">
<ul>
 <li>{{domxref("HTMLBaseFontElement")}}</li>
 <li>{{domxref("HTMLIsIndexElement")}}</li>
</ul>
</div>

<h2 id="SVG_интерфейсы">SVG интерфейсы</h2>

<h3 id="Интерфейсы_SVG_элементов">Интерфейсы SVG элементов</h3>

<div class="index">
<ul>
 <li>{{domxref("SVGAElement")}}</li>
 <li>{{domxref("SVGAltGlyphElement")}}</li>
 <li>{{domxref("SVGAltGlyphDefElement")}}</li>
 <li>{{domxref("SVGAltGlyphItemElement")}}</li>
 <li>{{domxref("SVGAnimationElement")}}</li>
 <li>{{domxref("SVGAnimateElement")}}</li>
 <li>{{domxref("SVGAnimateColorElement")}}</li>
 <li>{{domxref("SVGAnimateMotionElement")}}</li>
 <li>{{domxref("SVGAnimateTransformElement")}}</li>
 <li>{{domxref("SVGCircleElement")}}</li>
 <li>{{domxref("SVGClipPathElement")}}</li>
 <li>{{domxref("SVGColorProfileElement")}}</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("SVGFEFloodElement")}}</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("SVGFEFuncRElement")}}</li>
 <li>{{domxref("SVGFEFuncGElement")}}</li>
 <li>{{domxref("SVGFEFuncBElement")}}</li>
 <li>{{domxref("SVGFEFuncAElement")}}</li>
 <li>{{domxref("SVGFilterElement")}}</li>
 <li>{{domxref("SVGFilterPrimitiveStandardAttributes")}}</li>
 <li>{{domxref("SVGFontElement")}}</li>
 <li>{{domxref("SVGFontFaceElement")}}</li>
 <li>{{domxref("SVGFontFaceFormatElement")}}</li>
 <li>{{domxref("SVGFontFaceNameElement")}}</li>
 <li>{{domxref("SVGFontFaceSrcElement")}}</li>
 <li>{{domxref("SVGFontFaceUriElement")}}</li>
 <li>{{domxref("SVGForeignObjectElement")}}</li>
 <li>{{domxref("SVGGElement")}}</li>
 <li>{{domxref("SVGGlyphElement")}}</li>
 <li>{{domxref("SVGGlyphRefElement")}}</li>
 <li>{{domxref("SVGGradientElement")}}</li>
 <li>{{domxref("SVGHKernElement")}}</li>
 <li>{{domxref("SVGImageElement")}}</li>
 <li>{{domxref("SVGLinearGradientElement")}}</li>
 <li>{{domxref("SVGLineElement")}}</li>
 <li>{{domxref("SVGMarkerElement")}}</li>
 <li>{{domxref("SVGMaskElement")}}</li>
 <li>{{domxref("SVGMetadataElement")}}</li>
 <li>{{domxref("SVGMissingGlyphElement")}}</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("SVGStopElement")}}</li>
 <li>{{domxref("SVGStyleElement")}}</li>
 <li>{{domxref("SVGSVGElement")}}</li>
 <li>{{domxref("SVGSwitchElement")}}</li>
 <li>{{domxref("SVGSymbolElement")}}</li>
 <li>{{domxref("SVGTextElement")}}</li>
 <li>{{domxref("SVGTextPathElement")}}</li>
 <li>{{domxref("SVGTitleElement")}}</li>
 <li>{{domxref("SVGTRefElement")}}</li>
 <li>{{domxref("SVGTSpanElement")}}</li>
 <li>{{domxref("SVGUseElement")}}</li>
 <li>{{domxref("SVGViewElement")}}</li>
 <li>{{domxref("SVGVKernElement")}}</li>
</ul>
</div>

<h3 id="Интерфейсы_SVG_данных">Интерфейсы SVG данных</h3>

<p>DOM API для типов данных, используемых в определениях SVG свойств и атрибутов.</p>

<div class="note">
<p><strong>Замечание:</strong> Начиная с {{Gecko("5.0")}}, следующие относящиеся к SVG DOM интерфейсы, представляя списки объектов, индексируются и к ним можно иметь доступ как к массивам; к тому же, у них есть свойство длины, обозначающее количество элементов в списках: {{domxref("SVGLengthList")}}, {{domxref("SVGNumberList")}}, {{domxref("SVGPathSegList")}} и {{domxref("SVGPointList")}}.</p>
</div>

<h4 id="Статический_тип">Статический тип</h4>

<div class="index">
<ul>
 <li>{{domxref("SVGAngle")}}</li>
 <li>{{domxref("SVGColor")}}</li>
 <li>{{domxref("SVGICCColor")}}</li>
 <li>{{domxref("SVGElementInstance")}}</li>
 <li>{{domxref("SVGElementInstanceList")}}</li>
 <li>{{domxref("SVGLength")}}</li>
 <li>{{domxref("SVGLengthList")}}</li>
 <li>{{domxref("SVGMatrix")}}</li>
 <li>{{domxref("SVGNumber")}}</li>
 <li>{{domxref("SVGNumberList")}}</li>
 <li>{{domxref("SVGPaint")}}</li>
 <li>{{domxref("SVGPoint")}}</li>
 <li>{{domxref("SVGPointList")}}</li>
 <li>{{domxref("SVGPreserveAspectRatio")}}</li>
 <li>{{domxref("SVGRect")}}</li>
 <li>{{domxref("SVGStringList")}}</li>
 <li>{{domxref("SVGTransform")}}</li>
 <li>{{domxref("SVGTransformList")}}</li>
</ul>
</div>

<h4 id="Анимированный_тип">Анимированный тип</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("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("SVGAnimatedPathData")}}</li>
 <li>{{domxref("SVGAnimatedPoints")}}</li>
 <li>{{domxref("SVGColorProfileRule")}}</li>
 <li>{{domxref("SVGCSSRule")}}</li>
 <li>{{domxref("SVGExternalResourcesRequired")}}</li>
 <li>{{domxref("SVGFitToViewBox")}}</li>
 <li>{{domxref("SVGLangSpace")}}</li>
 <li>{{domxref("SVGLocatable")}}</li>
 <li>{{domxref("SVGRenderingIntent")}}</li>
 <li>{{domxref("SVGStylable")}}</li>
 <li>{{domxref("SVGTests")}}</li>
 <li>{{domxref("SVGTextContentElement")}}</li>
 <li>{{domxref("SVGTextPositioningElement")}}</li>
 <li>{{domxref("SVGTransformable")}}</li>
 <li>{{domxref("SVGUnitTypes")}}</li>
 <li>{{domxref("SVGURIReference")}}</li>
 <li>{{domxref("SVGViewSpec")}}</li>
 <li>{{domxref("SVGZoomAndPan")}}</li>
</ul>
</div>

<h2 id="See_also" name="See_also">Смотрите также</h2>

<ul>
 <li><a href="/en-US/docs/DOM/DOM_Reference/Examples">Примеры DOM</a></li>
</ul>

<div id="gtx-trans" style="position: absolute; left: 4px; top: 245px;">
<div class="gtx-trans-icon"></div>
</div>