initial commit

2 files changed, 721 insertions, 0 deletions

diff --git a/files/tr/web/api/document_object_model/index.html b/files/tr/web/api/document_object_model/index.html
new file mode 100644
index 0000000000..813aac4a2c
--- /dev/null
+++ b/files/tr/web/api/document_object_model/index.html
@@ -0,0 +1,476 @@
+---
+title: Document Object Model (DOM)
+slug: Web/API/Document_Object_Model
+tags:
+  - API
+  - DOM
+  - NeedsTranslation
+  - Overview
+  - Reference
+  - TopicStub
+translation_of: Web/API/Document_Object_Model
+---
+<div>{{DefaultAPISidebar("DOM")}}</div>
+
+<p>The <strong>Document Object Model (<em>DOM</em>)</strong> connects web pages to scripts or programming languages. Usually that means JavaScript, although modelling HTML, SVG, or XML documents as objects is not part of the JavaScript language, as such.</p>
+
+<p>The DOM represents a document with a logical tree. Each branch of the tree ends in a node, and each node contains objects. DOM methods allow programmatic access to the tree; with them you can change the document's structure, style, or content. Nodes can also have event handlers attached to them; once an event is triggered, the event handlers get executed.</p>
+
+<p>An <a href="/en-US/docs/Web/API/Document_Object_Model/Introduction">introduction to the DOM</a> is available.</p>
+
+<h2 id="DOM_interfaces">DOM interfaces</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">Obsolete DOM interfaces</h3>
+
+<p>The Document Object Model has been highly simplified. To achieve this, the following interfaces present in the different DOM level 3 or earlier specifications have been removed. It is uncertain whether some may be reintroduced in the future or not, but for the time being they should be considered obsolete and should be avoided:</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_interfaces">HTML interfaces</h2>
+
+<p>A document containing HTML is described using the {{DOMxRef("Document")}} interface, which is extended by the HTML specification to include various HTML-specific features.</p>
+
+<p>An HTML document object also gives access to various features of browsers like the tab or the window, in which a page is drawn using the {{DOMxRef("Window")}} interface, the {{DOMxRef("window.style", "Style")}} associated to it (usually CSS), the history of the browser relative to the context, {{DOMxRef("window.history", "History")}}. Eventually, {{DOMxRef("Selection")}} is done on the document.</p>
+
+<h3 id="HTML_element_interfaces">HTML element interfaces</h3>
+
+<div class="index">
+<ul>
+	<li>{{DOMxRef("HTMLAnchorElement")}}</li>
+	<li>{{DOMxRef("HTMLAppletElement")}} {{Obsolete_Inline}}</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("HTMLDialogElement")}}</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("HTMLMarqueeElement")}} {{Deprecated_Inline}}</li>
+	<li>{{DOMxRef("HTMLMediaElement")}}</li>
+	<li>{{DOMxRef("HTMLMenuElement")}}</li>
+	<li>{{DOMxRef("HTMLMenuItemElement")}} {{Deprecated_Inline}}</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="Other_interfaces">Other interfaces</h3>
+
+<div class="index">
+<ul>
+	<li>{{DOMxRef("CanvasRenderingContext2D")}}</li>
+	<li>{{DOMxRef("WebGLRenderingContext")}}</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="Obsolete_HTML_interfaces">Obsolete HTML interfaces</h3>
+
+<div class="index">
+<ul>
+	<li>{{DOMxRef("HTMLBaseFontElement")}}</li>
+	<li>{{DOMxRef("HTMLIsIndexElement")}}</li>
+	<li>{{DOMxRef("HTMLMarqueeElement")}}</li>
+	<li>{{DOMxRef("HTMLMenuItemElement")}}</li>
+</ul>
+</div>
+
+<h2 id="SVG_interfaces">SVG interfaces</h2>
+
+<h3 id="SVG_element_interfaces">SVG element interfaces</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">SVG data type interfaces</h3>
+
+<p>Here are the DOM APIs for data types used in the definitions of SVG properties and attributes.</p>
+
+<div class="note">
+<p><strong>Note:</strong> Starting in {{Gecko("5.0")}}, the following SVG-related DOM interfaces representing lists of objects are now indexable and can be accessed; in addition, they have a length property indicating the number of items in the lists: {{DOMxRef("SVGLengthList")}}, {{DOMxRef("SVGNumberList")}}, {{DOMxRef("SVGPathSegList")}}, and {{DOMxRef("SVGPointList")}}.</p>
+</div>
+
+<h4 id="Static_type">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">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">SMIL related interfaces</h3>
+
+<div class="index">
+<ul>
+	<li>{{DOMxRef("ElementTimeControl")}}</li>
+	<li>{{DOMxRef("TimeEvent")}}</li>
+</ul>
+</div>
+
+<h3 id="Other_SVG_interfaces">Other SVG interfaces</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">Specifications</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>
+		<tr>
+			<td>{{SpecName("DOM4")}}</td>
+			<td>{{Spec2("DOM4")}}</td>
+			<td> </td>
+		</tr>
+		<tr>
+			<td>{{SpecName("DOM3 Core")}}</td>
+			<td>{{Spec2("DOM3 Core")}}</td>
+			<td> </td>
+		</tr>
+		<tr>
+			<td>{{SpecName("DOM2 Core")}}</td>
+			<td>{{Spec2("DOM2 Core")}}</td>
+			<td>g</td>
+		</tr>
+		<tr>
+			<td>{{SpecName("DOM1")}}</td>
+			<td>{{Spec2("DOM1")}}</td>
+			<td>Initial definition</td>
+		</tr>
+	</tbody>
+</table>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+	<li><a href="/en-US/docs/Web/API/Document_Object_Model/Examples">DOM Examples</a></li>
+	<li><a href="/en-US/docs/Web/API/CSS_Object_Model">CSS Object Model (CSSOM)</a></li>
+</ul>
diff --git a/files/tr/web/api/document_object_model/introduction/index.html b/files/tr/web/api/document_object_model/introduction/index.html
new file mode 100644
index 0000000000..ace5f3c84b
--- /dev/null
+++ b/files/tr/web/api/document_object_model/introduction/index.html
@@ -0,0 +1,245 @@
+---
+title: DOM giriş
+slug: Web/API/Document_Object_Model/Introduction
+translation_of: Web/API/Document_Object_Model/Introduction
+---
+<p><span class="seoSummary"><strong>Document Object Model</strong> (<strong>DOM</strong>) web dökümanında oluşturulan içerik ve yapılar gibi nesnelerin veri gösterimidir.Bu klavuzda,DOM' u kısaca göstereceğiz.</span>O halde DOM hafızada nasıl  HTML ya da XML dökümanını temsil eder ve web içerik ve uygulamaları için API nasıl kullanılır bakalım.</p>
+
+<h2 id="What_is_the_DOM" name="What_is_the_DOM">DOM nedir ?</h2>
+
+<p>Document Object Model (DOM) , HTML ve XML için programlama arayüzüdür. Sayfayı temsil eder ve böylece program döküman yapısını, stilini ve içeriğini değiştirebilir. DOM dökümanı nodes(düğümler) ve objects(nesneler) şeklinde temsil eder. Bu sayede programlama dili sayfayla bağlantı kurabilir.</p>
+
+<p>Web sayfası bir dökümandır. Bu döküman tarayıcı penceresinde ya da HTML kaynağı gibi görüntülenebilir. Ama her iki durumda da aynı belge vardır. DOM aynı belgeyi temsil eder bu yüzden değiştirilebilir. DOM web sayfasında nesne yönelimli temsilidir, ki javascript gibi script dilleri ile modifiye edilebilir.</p>
+
+<p><a class="external external-icon" href="http://www.w3.org/DOM/">W3C DOM</a> <span class="tlid-translation translation" lang="tr"><span title=""> ve </span></span> <a class="external external-icon" href="https://dom.spec.whatwg.org">WHATWG DOM</a> <span class="tlid-translation translation" lang="tr"><span title=""> standartları çoğu modern tarayıcıda uygulanmaktadır.</span></span></p>
+
+<p>For example, the standard DOM specifies that the <code>getElementsByTagName</code> method in the code below must return a list of all the <code>&lt;p&gt;</code> elements in the document:</p>
+
+<pre class="brush: js notranslate">const paragraphs = document.getElementsByTagName("p");
+// paragraphs[0] is the first &lt;p&gt; element
+// paragraphs[1] is the second &lt;p&gt; element, etc.
+alert(paragraphs[0].nodeName);
+</pre>
+
+<p>All of the properties, methods, and events available for manipulating and creating web pages are organized into objects (for example, the <code>document</code> object that represents the document itself, the <code>table</code> object that implements the special {{domxref("HTMLTableElement")}} DOM interface for accessing HTML tables, and so forth). This documentation provides an object-by-object reference to the DOM.</p>
+
+<p>The modern DOM is built using multiple APIs that work together. The core <a href="/en-US/docs/Web/API/Document_Object_Model">DOM</a> defines the objects that fundamentally describe a document and the objects within it. This is expanded upon as needed by other APIs that add new features and capabilities to the DOM. For example, the <a href="/en-US/docs/Web/API/HTML_DOM">HTML DOM API</a> adds support for representing HTML documents to the core DOM.</p>
+
+<h2 id="DOM_and_JavaScript" name="DOM_and_JavaScript">DOM and JavaScript</h2>
+
+<p>The short example above, like nearly all of the examples in this reference, is {{glossary("JavaScript")}}. That is to say, it's <em>written</em> in JavaScript, but it <em>uses</em> the DOM to access the document and its elements. The DOM is not a programming language, but without it, the JavaScript language wouldn't have any model or notion of web pages, HTML documents, XML documents, and their component parts (e.g. elements). Every element in a document—the document as a whole, the head, tables within the document, table headers, text within the table cells—is part of the document object model for that document, so they can all be accessed and manipulated using the DOM and a scripting language like JavaScript.</p>
+
+<p>In the beginning, JavaScript and the DOM were tightly intertwined, but eventually, they evolved into separate entities. The page content is stored in the DOM and may be accessed and manipulated via JavaScript, so that we may write this approximative equation:</p>
+
+<p>API = DOM + JavaScript</p>
+
+<p>The DOM was designed to be independent of any particular programming language, making the structural representation of the document available from a single, consistent API. Though we focus exclusively on JavaScript in this reference documentation, implementations of the DOM can be built for any language, as this Python example demonstrates:</p>
+
+<pre class="brush: python notranslate"># Python DOM example
+import xml.dom.minidom as m
+doc = m.parse(r"C:\Projects\Py\chap1.xml")
+doc.nodeName # DOM property of document object
+p_list = doc.getElementsByTagName("para")
+</pre>
+
+<p>For more information on what technologies are involved in writing JavaScript on the web, see <a href="/en-US/docs/Web/JavaScript/JavaScript_technologies_overview">JavaScript technologies overview</a>.</p>
+
+<h2 id="How_Do_I_Access_the_DOM.3F" name="How_Do_I_Access_the_DOM.3F">Accessing the DOM</h2>
+
+<p>You don't have to do anything special to begin using the DOM. Different browsers have different implementations of the DOM, and these implementations exhibit varying degrees of conformance to the actual DOM standard (a subject we try to avoid in this documentation), but every web browser uses some document object model to make web pages accessible via JavaScript.</p>
+
+<p>When you create a script–whether it's inline in a <code>&lt;script&gt;</code> element or included in the web page by means of a script loading instruction–you can immediately begin using the API for the {{domxref("document")}} or {{domxref("Window", "window")}} elements to manipulate the document itself or to get at the children of that document, which are the various elements in the web page. Your DOM programming may be something as simple as the following, which displays an alert message by using the {{domxref("window.alert", "alert()")}} function from the {{domxref("Window", "window")}} object, or it may use more sophisticated DOM methods to actually create new content, as in the longer example below.</p>
+
+<p>This following JavaScript will display an alert when the document is loaded (and when the whole DOM is available for use):</p>
+
+<pre class="brush: html notranslate">&lt;body onload="window.alert('Welcome to my home page!');"&gt;
+</pre>
+
+<p>Another example. This function creates a new H1 element, adds text to that element, and then adds the <code>H1</code> to the tree for this document:</p>
+
+<pre class="brush: html notranslate">&lt;html&gt;
+  &lt;head&gt;
+    &lt;script&gt;
+       // run this function when the document is loaded
+       window.onload = function() {
+
+         // create a couple of elements in an otherwise empty HTML page
+         const heading = document.createElement("h1");
+         const heading_text = document.createTextNode("Big Head!");
+         heading.appendChild(heading_text);
+         document.body.appendChild(heading);
+      }
+    &lt;/script&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Important_Data_Types" name="Important_Data_Types">Fundamental data types</h2>
+
+<p>This reference tries to describe the various objects and types in simple terms. But there are a number of different data types being passed around the API that you should be aware of.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note:</strong> Because the vast majority of code that uses the DOM revolves around manipulating HTML documents, it's common to refer to the nodes in the DOM as <strong>elements</strong>, although strictly speaking not every node is an element.</p>
+</div>
+
+<p>The following table briefly describes these data types.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Data type (Interface)</th>
+   <th>Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{domxref("Document")}}</td>
+   <td>When a member returns an object of type <code>document</code> (e.g., the <code>ownerDocument</code> property of an element returns the <code>document</code> to which it belongs), this object is the root <code>document</code> object itself. The <a href="/en-US/docs/Web/API/Document">DOM <code>document</code> Reference</a> chapter describes the <code>document</code> object.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("Node")}}</td>
+   <td>Every object located within a document is a node of some kind. In an HTML document, an object can be an element node but also a text node or attribute node.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("Element")}}</td>
+   <td>The <code>element</code> type is based on <code>node</code>. It refers to an element or a node of type <code>element</code> returned by a member of the DOM API. Rather than saying, for example, that the {{domxref("document.createElement()")}} method returns an object reference to a <code>node</code>, we just say that this method returns the <code>element</code> that has just been created in the DOM. <code>element</code> objects implement the DOM <code>Element</code> interface and also the more basic <code>Node</code> interface, both of which are included together in this reference. In an HTML document, elements are further enhanced by the HTML DOM API's {{domxref("HTMLElement")}} interface as well as other interfaces describing capabilities of specific kinds of elements (for instance, {{domxref("HTMLTableElement")}} for {{HTMLElement("table")}} elements).</td>
+  </tr>
+  <tr>
+   <td>{{domxref("NodeList")}}</td>
+   <td>A <code>nodeList</code> is an array of elements, like the kind that is returned by the method {{domxref("document.getElementsByTagName()")}}. Items in a <code>nodeList</code> are accessed by index in either of two ways:
+    <ul>
+     <li>list.item(1)</li>
+     <li>list[1]</li>
+    </ul>
+    These two are equivalent. In the first, <code>item()</code> is the single method on the <code>nodeList</code> object. The latter uses the typical array syntax to fetch the second item in the list.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("Attribute")}}</td>
+   <td>When an <code>attribute</code> is returned by a member (e.g., by the <code>createAttribute()</code> method), it is an object reference that exposes a special (albeit small) interface for attributes. Attributes are nodes in the DOM just like elements are, though you may rarely use them as such.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("NamedNodeMap")}}</td>
+   <td>A <code>namedNodeMap</code> is like an array, but the items are accessed by name or index, though this latter case is merely a convenience for enumeration, as they are in no particular order in the list. A <code>namedNodeMap</code> has an <code>item()</code> method for this purpose, and you can also add and remove items from a <code>namedNodeMap</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>There are also some common terminology considerations to keep in mind. It's common to refer to any {{domxref("Attribute")}} node as simply an <code>attribute</code>, for example, and to refer to an array of DOM nodes as a <code>nodeList</code>. You'll find these terms and others to be introduced and used throughout the documentation.</p>
+
+<h2 id="DOM_interfaces" name="DOM_interfaces">DOM interfaces</h2>
+
+<p>This guide is about the objects and the actual <em>things</em> you can use to manipulate the DOM hierarchy. There are many points where understanding how these work can be confusing. For example, the object representing the HTML <code>form</code> element gets its <code>name</code> property from the <code>HTMLFormElement</code> interface but its <code>className</code> property from the <code>HTMLElement</code> interface. In both cases, the property you want is simply in that form object.</p>
+
+<p>But the relationship between objects and the interfaces that they implement in the DOM can be confusing, and so this section attempts to say a little something about the actual interfaces in the DOM specification and how they are made available.</p>
+
+<h3 id="Interfaces_and_Objects" name="Interfaces_and_Objects">Interfaces and Objects</h3>
+
+<p>Many objects borrow from several different interfaces. The table object, for example, implements a specialized {{domxref("HTMLTableElement")}} interface, which includes such methods as <code>createCaption</code> and <code>insertRow</code>. But since it's also an HTML element, <code>table</code> implements the <code>Element</code> interface described in the DOM {{domxref("Element")}} Reference chapter. And finally, since an HTML element is also, as far as the DOM is concerned, a node in the tree of nodes that make up the object model for an HTML or XML page, the table object also implements the more basic <code>Node</code> interface, from which <code>Element</code> derives.</p>
+
+<p>When you get a reference to a <code>table</code> object, as in the following example, you routinely use all three of these interfaces interchangeably on the object, perhaps without knowing it.</p>
+
+<pre class="brush: js notranslate">const table = document.getElementById("table");
+const tableAttrs = table.attributes; // Node/Element interface
+for (let i = 0; i &lt; tableAttrs.length; i++) {
+  // HTMLTableElement interface: border attribute
+  if(tableAttrs[i].nodeName.toLowerCase() == "border")
+    table.border = "1";
+}
+// HTMLTableElement interface: summary attribute
+table.summary = "note: increased border";
+</pre>
+
+<h3 id="Core_Interfaces_in_the_DOM" name="Core_Interfaces_in_the_DOM">Core Interfaces in the DOM</h3>
+
+<p>This section lists some of the most commonly-used interfaces in the DOM. The idea is not to describe what these APIs do here but to give you an idea of the sorts of methods and properties you will see very often as you use the DOM. These common APIs are used in the longer examples in the <a href="/en-US/docs/Web/API/Document_Object_Model/Examples">DOM Examples</a> chapter at the end of this book.</p>
+
+<p>The <code>document</code> and <code>window</code> objects are the objects whose interfaces you generally use most often in DOM programming. In simple terms, the <code>window</code> object represents something like the browser, and the <code>document</code> object is the root of the document itself. <code>Element</code> inherits from the generic <code>Node</code> interface, and together these two interfaces provide many of the methods and properties you use on individual elements. These elements may also have specific interfaces for dealing with the kind of data those elements hold, as in the <code>table</code> object example in the previous section.</p>
+
+<p>The following is a brief list of common APIs in web and XML page scripting using the DOM.</p>
+
+<ul>
+ <li><code>{{domxref("document.getElementById", "", "", "1")}}(id)</code></li>
+ <li><code>document.{{domxref("Element.getElementsByTagName", "getElementsByTagName", "", "1")}}(name)</code></li>
+ <li><code>{{domxref("document.createElement", "", "", "1")}}(name)</code></li>
+ <li><code>parentNode.{{domxref("Node.appendChild", "appendChild", "", "1")}}(node)</code></li>
+ <li><code>element.{{domxref("element.innerHTML", "innerHTML", "", "1")}}</code></li>
+ <li><code>element.{{domxref("HTMLElement.style", "style", "", "1")}}.left</code></li>
+ <li><code>element.{{domxref("element.setAttribute", "setAttribute", "", "1")}}()</code></li>
+ <li><code>element.{{domxref("element.getAttribute", "getAttribute", "", "1")}}()</code></li>
+ <li><code>element.{{domxref("EventTarget.addEventListener", "addEventListener", "", "1")}}()</code></li>
+ <li><code>{{domxref("window.content", "", "", "1")}}</code></li>
+ <li><code>{{domxref("window.onload", "", "", "1")}}</code></li>
+ <li><code>{{domxref("window.scrollTo", "", "", "1")}}()</code></li>
+</ul>
+
+<h2 id="Testing_the_DOM_API" name="Testing_the_DOM_API">Testing the DOM API</h2>
+
+<p>This document provides samples for every interface that you can use in your own web development. In some cases, the samples are complete HTML pages, with the DOM access in a <code>&lt;script&gt;</code> element, the interface (e.g, buttons) necessary to fire up the script in a form, and the HTML elements upon which the DOM operates listed as well. When this is the case, you can cut and paste the example into a new HTML document, save it, and run the example from the browser.</p>
+
+<p>There are some cases, however, when the examples are more concise. To run examples that only demonstrate the basic relationship of the interface to the HTML elements, you may want to set up a test page in which interfaces can be easily accessed from scripts. The following very simple web page provides a <code>&lt;script&gt;</code> element in the header in which you can place functions that test the interface, a few HTML elements with attributes that you can retrieve, set, or otherwise manipulate, and the web user interface necessary to call those functions from the browser.</p>
+
+<p>You can use this test page or create a similar one to test the DOM interfaces you are interested in and see how they work on the browser platform. You can update the contents of the <code>test()</code> function as needed, create more buttons, or add elements as necessary.</p>
+
+<pre class="brush: html notranslate">&lt;html&gt;
+&lt;head&gt;
+  &lt;title&gt;DOM Tests&lt;/title&gt;
+  &lt;script&gt;
+    function setBodyAttr(attr, value) {
+      if (document.body) document.body[attr] = value;
+      else throw new Error("no support");
+    }
+  &lt;/script&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  &lt;div style="margin: .5in; height: 400px;"&gt;
+    &lt;p&gt;&lt;b&gt;&lt;tt&gt;text&lt;/tt&gt;&lt;/b&gt;&lt;/p&gt;
+    &lt;form&gt;
+      &lt;select onChange="setBodyAttr('text',
+        this.options[this.selectedIndex].value);"&gt;
+        &lt;option value="black"&gt;black&lt;/option&gt;
+        &lt;option value="red"&gt;red&lt;/option&gt;
+      &lt;/select&gt;
+      &lt;p&gt;&lt;b&gt;&lt;tt&gt;bgColor&lt;/tt&gt;&lt;/b&gt;&lt;/p&gt;
+      &lt;select onChange="setBodyAttr('bgColor',
+        this.options[this.selectedIndex].value);"&gt;
+        &lt;option value="white"&gt;white&lt;/option&gt;
+        &lt;option value="lightgrey"&gt;gray&lt;/option&gt;
+      &lt;/select&gt;
+      &lt;p&gt;&lt;b&gt;&lt;tt&gt;link&lt;/tt&gt;&lt;/b&gt;&lt;/p&gt;
+      &lt;select onChange="setBodyAttr('link',
+        this.options[this.selectedIndex].value);"&gt;
+        &lt;option value="blue"&gt;blue&lt;/option&gt;
+        &lt;option value="green"&gt;green&lt;/option&gt;
+      &lt;/select&gt;
+      &lt;small&gt;
+        &lt;a href="http://some.website.tld/page.html" id="sample"&gt;
+          (sample link)
+        &lt;/a&gt;
+      &lt;/small&gt;&lt;br /&gt;
+      &lt;input type="button" value="version" onclick="ver()" /&gt;
+    &lt;/form&gt;
+  &lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p>To test a lot of interfaces in a single page—for example, a "suite" of properties that affect the colors of a web page—you can create a similar test page with a whole console of buttons, textfields, and other HTML elements. The following screenshot gives you some idea of how interfaces can be grouped together for testing.</p>
+
+<figure>
+<figcaption>Figure 0.1 Sample DOM Test Page</figcaption>
+<img alt="Image:DOM_Ref_Introduction_to_the_DOM.gif" class="internal" src="/@api/deki/files/173/=DOM_Ref_Introduction_to_the_DOM.gif"></figure>
+
+<p>In this example, the drop-down menus dynamically update such DOM—accessible aspects of the web page as its background color (<code>bgColor</code>), the color of the hyperlinks (<code>aLink</code>), and color of the text (<code>text</code>). However, you design your test pages, testing the interfaces as you read about them is an important part of learning how to use the DOM effectively.</p>
+
+<h2 id="Subnav">Subnav</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Document_Object_Model">DOM Reference</a></li>
+ <li><a href="/en-US/docs/Web/API/Document_Object_Model/Introduction">Introduction to the DOM</a></li>
+ <li><a href="/en-US/docs/Web/API/Document_Object_Model/Events">Events and the DOM</a></li>
+ <li><a href="/en-US/docs/Web/API/Document_Object_Model/Examples">Examples</a></li>
+</ul>
+
+<div>{{DefaultAPISidebar("DOM")}}</div>