path: root/files/ru/справочная_информация_по_gecko_dom/введение/index.html

---
title: Введение
slug: Справочная_информация_по_Gecko_DOM/Введение
---
<p><span id="result_box" lang="ru"><span>В этом разделе представлено краткое концептуальное введение в </span></span><a href="/en-US/docs/DOM" title="DOM">DOM</a><span lang="ru"><span>: что это такое, как он предоставляет структуру для </span></span> <a href="/en-US/docs/HTML" title="HTML">HTML</a><span lang="ru"><span> и </span></span><a href="/en-US/docs/XML" title="XML">XML</a><span lang="ru"><span>-документов, как вы можете получить к нему доступ, и как этот API представляет справочную информацию и примеры.</span></span></p>

<h2 id="What_is_the_DOM" name="What_is_the_DOM">Что такое DOM?</h2>

<p><span id="result_box" lang="ru"><span>Document Object Model (DOM) - это программный интерфейс для HTML и XML-документов.</span> <span>Он представляет страницу, чтобы программы могли изменять структуру, стиль и содержание документа.</span> <span>DOM отображает страницу ввиде узлов и объектов.</span> <span>Таким образом, языки программирования могут взаимодействовать со страницей.</span></span></p>

<p>Веб-страница - это документ<span id="result_box" lang="ru"><span>. Этот документ можно либо отобразить в окне браузера, либо в качестве источника HTML</span></span><span id="result_box" lang="ru"><span>.</span> <span>Но в обоих случаях это один и тот же документ.</span></span> <span id="result_box" lang="ru"><span>Объектная модель документа (DOM) представляет этот же документ, таким образом, чтобы им можно было манипулировать.</span> <span>DOM представляет собой объектно-ориентированное представление веб-страницы, которое может быть модифицировано с помощью скриптовых языков, таких как JavaScript.</span></span></p>

<p><span id="result_box" lang="ru"><span>Стандарты </span></span><a class="external" href="http://www.w3.org/DOM/">W3C DOM</a><span lang="ru"><span> и </span></span><a class="external" href="https://dom.spec.whatwg.org">WHATWG DOM</a><span lang="ru"><span> реализованы в большинстве современных браузеров.</span> <span>Многие браузеры расширяют стандарт, поэтому следует проявлять осторожность при использовании их в Интернете, где к документам могут обращаться различные браузеры с различными DOM.</span></span></p>

<p>Например, стандарт DOM указывает, что метод <code>getElementsByTagName</code> в коде ниже должен возвращать список всех <code>&lt;p&gt;</code> элементов в документе:</p>

<pre class="brush: js">var paragraphs = document.getElementsByTagName("P");
// paragraphs[0] первый &lt;p&gt;-элемент
// paragraphs[1] второй &lt;p&gt;-элемент и т.д.
alert(paragraphs[0].nodeName);
</pre>

<p>Все свойства, методы и события, доступные для управления и создания веб-страниц, организованы в объекты (например, объект документа, который представляет сам документ (<code>document</code>), объект таблица (<code>table</code>), который реализует специальный интерфейс DOM <code>HTMLTableElement</code> для доступа к таблицам HTML и т. д. ). Эта документация предоставляет по-объектную справку по DOM, реализованную в браузерах на базе Gecko.</p>

<h2 id="DOM_and_JavaScript" name="DOM_and_JavaScript">DOM и JavaScript</h2>

<p><span id="result_box" lang="ru"><span>Краткий пример выше, как и почти все примеры в этом руководстве, - это </span></span><a href="/en-US/docs/JavaScript" title="JavaScript">JavaScript</a>. <span lang="ru"><span>То есть, он <em>написан</em> на JavaScript, но он использует DOM для доступа к документу и его элементам.</span> <span>DOM не является языком программирования, но без него язык JavaScript не имел бы никаких моделей или понятия о веб-страницах, HTML и XML документах, и об их составных частях (например, элементах).</span> <span>Каждый элемент в документе - документ в целом, секция документа head, таблицы внутри документа, заголовки таблиц, текст внутри ячеек таблицы - являются частью объектной модели документа для этого документа, поэтому к ним можно получить доступ и манипулировать ним с помощью</span> <span>DOM и скриптового языка, такого как JavaScript.</span></span></p>

<p>В начале JavaScript и DOM <span id="result_box" lang="ru"><span>были тесно переплетены, но в конечном итоге они превратились в отдельные сущности.</span> <span>Содержимое страницы хранится в DOM и может быть доступно и обработано через JavaScript, так что мы можем написать приблизительно такое уравнение</span></span>:</p>

<p>API (HTML или XML страницы) = DOM + JS (скриптовый язык)</p>

<p><span id="result_box" lang="ru"><span>DOM был разработан, чтобы быть независимым от любого конкретного языка программирования, делая структурное представление документа доступным из единого согласованного API.</span> <span>Хотя мы ориентируемся исключительно на JavaScript в этой справочной документации, реализации DOM могут быть созданы для любого языка, как демонстрирует этот пример Python:</span></span></p>

<pre class="brush: python"># Python DOM example
import xml.dom.minidom as m
doc = m.parse("C:\\Projects\\Py\\chap1.xml");
doc.nodeName # DOM property of document object;
p_list = doc.getElementsByTagName("para");
</pre>

<p><span id="result_box" lang="ru"><span>Для получения дополнительной информации о том, какие технологии используются для написания JavaScript в Интернете, см.</span></span>  <a href="/en-US/docs/Web/JavaScript/JavaScript_technologies_overview">обзор технологий JavaScript</a>.</p>

<h2 id="How_Do_I_Access_the_DOM.3F" name="How_Do_I_Access_the_DOM.3F">Как получить доступ к DOM?</h2>

<p><span id="result_box" lang="ru"><span>Вам не нужно делать что-то особенное, чтобы начать использовать DOM.</span> <span>Различные браузеры имеют различные реализации DOM, и эти реализации демонстрируют различную степень соответствия действующему стандарту DOM (тема, которую мы пытаемся избежать в этой документации), но каждый веб-браузер использует некоторую объектную модель документа, чтобы сделать веб-страницы доступными для скрипта</span></span>.</p>

<p>Когда вы создаете код, <span id="result_box" lang="ru"><span>независимо от того, встроен ли он в элемент<code> &lt;script&gt;</code> или включен в веб-страницу с помощью инструкции по загрузке скрипта извне, вы можете сразу начать использовать API для элементов</span></span> <code><a href="/en-US/docs/DOM/document" title="DOM/document">document</a></code> или <code><a href="/en-US/docs/DOM/window" title="DOM/window">window</a></code>  для <span id="result_box" lang="ru"><span>манипулирования самим документом или получить</span> его дочерние элементы<span>, которые являются различными элементами веб-страницы.</span></span> Ваше программирование DOM может быть достаточно простым, как, например, следующий код, который выводит предупреждающее сообщение используя функцию <code><a href="/en-US/docs/DOM/window.alert" title="DOM/window.alert">alert()</a></code> из объекта <code><a href="/en-US/docs/DOM/window" title="DOM/window">window</a></code>, <span id="result_box" lang="ru"><span>или может использовать более сложные методы DOM для создания нового контента, как в более длинном примере ниже</span></span>.</p>

<p>Следующий пример<span id="result_box" lang="ru"><span> кода JavaScript буде выводить предупреждение, когда загрузка документа завершена (и когда весь DOM доступен для использования).</span></span></p>

<pre class="brush: html">&lt;body onload="window.alert('Welcome to my home page!');"&gt;
</pre>

<p>Эта функция создает новый элемент H1, добавляет в него текст и, затем, добавляет <code>H1</code> в дерево данного документа:</p>

<pre class="brush: html">&lt;html&gt;
  &lt;head&gt;
    &lt;script&gt;
       // запускает эту функцию, когда документ загружен
       window.onload = function() {

         // создает пару элементов на пустой веб-странице
         var heading = document.createElement("h1");
         var 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">Важные типы данных</h2>

<p><span id="result_box" lang="ru"><span>Эта руководство пытается описать различные объекты и типы данных как можно проще.</span> <span>Но есть много различных типов данных, которые передаются через API, о которых вы должны знать.</span> <span>Для простоты, примеры синтаксиса в этом руководстве по API обычно назвывают узловые элементы - элементами</span></span> <code>element</code>, массивам узлов, такие как <code>nodeList</code>, - также элементами <code>element</code>, а аттрибуты узлов <code>attribute</code> именуются просто аттрибутам.</p>

<p>Следующая таблица кратко описывает эти типы данных.</p>

<table class="standard-table">
 <tbody>
  <tr>
   <td><code>document</code></td>
   <td>Когда элемент возвращает объект типа <code>document</code> (например,  свойство элемента <strong><code>ownerDocument</code></strong> возвращает <code>document</code>, к которому он принадлежит), этот элемент является корневым объектом документа <code>document</code>. Глава <a href="/en-US/docs/DOM/document" title="DOM/document">Руководство по DOM <code>document</code></a> описывает объект <code>document</code>.</td>
  </tr>
  <tr>
   <td><code>element</code></td>
   <td><code>element</code> 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 <a href="/en-US/docs/Web/API/Document/createElement">document.createElement()</a> 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.</td>
  </tr>
  <tr>
   <td><code>nodeList</code></td>
   <td>A <code>nodeList</code> is an array of elements, like the kind that is returned by the method <a href="/en-US/docs/Web/API/Document/getElementsByTagName">document.getElementsByTagName()</a>. 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, <strong><code>item()</code></strong> 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><code>attribute</code></td>
   <td>When an <code>attribute</code> is returned by a member (e.g., by the <strong><code>createAttribute()</code></strong> 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><code>namedNodeMap</code></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 item() method for this purpose, and you can also add and remove items from a <code>namedNodeMap</code>.</td>
  </tr>
 </tbody>
</table>

<h2 id="DOM_interfaces" name="DOM_interfaces">Интерфейсы DOM</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 <code>HTML form</code> element gets its <strong><code>name</code></strong> property from the <code>HTMLFormElement</code> interface but its <strong><code>className</code></strong> property from the <code>HTMLElement</code> interface. In both cases, the property you want is simply in that form object.</p>

<p><span id="result_box" lang="ru"><span>Но взаимосвязь между объектами и интерфейсами, которые они реализуют в DOM, может сбить с толку, и поэтому этот раздел пытается немного рассказать о реальных интерфейсах в спецификации DOM и о том, как они становятся доступными.</span></span></p>

<h3 id="Interfaces_and_Objects" name="Interfaces_and_Objects">Интерфейсы и Объекты</h3>

<p>Many objects borrow from several different interfaces. The table object, for example, implements a specialized <a href="/en-US/docs/DOM/HTMLTableElement" title="DOM/table">HTML Table Element Interface</a>, 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 <a href="/en-US/docs/DOM/element" title="DOM/element">DOM <code>element</code> Reference</a> 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">var table = document.getElementById("table");
var tableAttrs = table.attributes; // Node/Element interface
for (var 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">Ключевые Интерфесы в 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/Gecko_DOM_Reference/Examples" title="Gecko_DOM_Reference/Examples">DOM Examples</a> chapter at the end of this book.</p>

<p><code>Document</code> и <code>window</code> объекты <span id="result_box" lang="ru"><span>являются объектами, интерфейсы которых наиболее  часто используются при программировании DOM.</span></span> Простыми словами, объект <code>window</code>  представляет собой что-то вроде браузера, а объект <code>document</code> корень самого документа. <code>Element</code> наследуется от общего интерфейса <code>Node</code>, <span id="result_box" lang="ru"><span>и вместе эти два интерфейса предоставляют множество методов и свойств, которые вы используете для отдельных элементов</span></span>. <span id="result_box" lang="ru"><span>Эти элементы также могут иметь определенные интерфейсы для обработки данных, которые хранятся в этих элементах, как в примере объекта </span></span><code>table</code><span lang="ru"><span>в предыдущем разделе.</span></span></p>

<p><span id="result_box" lang="ru"><span>Ниже приведен краткий список общих API-интерфейсов в сценариях веб-страниц и XML-страниц с использованием DOM.</span></span></p>

<ul>
 <li><code><a href="/en-US/docs/DOM/document.getElementById" title="DOM/document.getElementById">document.getElementById</a>(id)</code></li>
 <li><code>document.<a href="/en-US/docs/Web/API/Element.getElementsByTagName" title="DOM/element.getElementsByTagName">getElementsByTagName</a>(name)</code></li>
 <li><code><a href="/en-US/docs/DOM/document.createElement" title="DOM/document.createElement">document.createElement</a>(name)</code></li>
 <li><code>parentNode.<a href="/en-US/docs/DOM/Node.appendChild" title="DOM/Node.appendChild">appendChild</a>(node)</code></li>
 <li><code>element.<a href="/en-US/docs/DOM/element.innerHTML" title="DOM/element.innerHTML">innerHTML</a></code></li>
 <li><code>element.<a href="/en-US/docs/DOM/element.style" title="DOM/element.style">style</a>.left</code></li>
 <li><code>element.<a href="/en-US/docs/DOM/element.setAttribute" title="DOM/element.setAttribute">setAttribute</a>()</code></li>
 <li><code>element.<a href="/en-US/docs/DOM/element.getAttribute" title="DOM/element.getAttribute">getAttribute</a>()</code></li>
 <li><code>element.<a href="/en-US/docs/DOM/element.addEventListener" title="DOM/element.addEventListener">addEventListener</a>()</code></li>
 <li><code><a href="/en-US/docs/DOM/window.content" title="DOM/window.content">window.content</a></code></li>
 <li><code><a href="/en-US/docs/DOM/window.onload" title="DOM/window.onload">window.onload</a></code></li>
 <li><code><a href="/en-US/docs/DOM/window.dump" title="DOM/window.dump">window.dump</a>()</code></li>
 <li><code><a href="/en-US/docs/DOM/window.scrollTo" title="DOM/window.scrollTo">window.scrollTo</a>()</code></li>
</ul>

<h2 id="Testing_the_DOM_API" name="Testing_the_DOM_API">Тестирование 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">&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;DOM Tests&lt;/title&gt;
    &lt;script type="application/javascript"&gt;
    function setBodyAttr(attr, value){
      if (document.body) eval('document.body.'+attr+'="'+value+'"');
      else notSupported();
    }
    &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div style="margin: .5in; height: 400;"&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 value="darkblue"&gt;darkblue
        &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 value="lightgrey"&gt;gray
        &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 value="green"&gt;green
        &lt;/select&gt;  &lt;small&gt;
        &lt;a href="http://www.brownhen.com/dom_api_top.html" id="sample"&gt;
        (sample link)&lt;/a&gt;&lt;/small&gt;&lt;br&gt;
      &lt;/form&gt;
      &lt;form&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>Схема 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 dropdown 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>