initial commit

11 files changed, 2462 insertions, 0 deletions

diff --git a/files/ru/dom/document.createelement/index.html b/files/ru/dom/document.createelement/index.html
new file mode 100644
index 0000000000..15542d751d
--- /dev/null
+++ b/files/ru/dom/document.createelement/index.html
@@ -0,0 +1,82 @@
+---
+title: document.createElement
+slug: DOM/document.createElement
+tags:
+  - DOM
+  - Gecko
+translation_of: Web/API/Document/createElement
+---
+<p>{{ ApiRef() }}</p>
+
+<h3 id=".D0.9E.D0.B1.D1.89.D0.B0.D1.8F_.D0.B8.D0.BD.D1.84.D0.BE.D1.80.D0.BC.D0.B0.D1.86.D0.B8.D1.8F" name=".D0.9E.D0.B1.D1.89.D0.B0.D1.8F_.D0.B8.D0.BD.D1.84.D0.BE.D1.80.D0.BC.D0.B0.D1.86.D0.B8.D1.8F">Общая информация</h3>
+
+<p>В HTML-документах создает элемент c тем тегом, что указан в аргументе или <code>HTMLUnknownElement</code>, если имя тега не распознаётся.</p>
+
+<p>В XUL-документах создает указанный в аргументе элемент XUL.</p>
+
+<p>В остальных случаях создаёт элемент с нулевым <span id="result_box" lang="ru"><span class="hps"><em>NamespaceURI</em>.</span></span></p>
+
+<h3 id=".D0.A1.D0.B8.D0.BD.D1.82.D0.B0.D0.BA.D1.81.D0.B8.D1.81" name=".D0.A1.D0.B8.D0.BD.D1.82.D0.B0.D0.BA.D1.81.D0.B8.D1.81">Параметры</h3>
+
+<pre class="eval"><var>var element</var> = <var>document</var>.createElement(<var>tagName, [options]</var>);
+</pre>
+
+<ul>
+ <li><code>element</code> — созданый объект <a href="../Web/API/Element">элемента</a>.</li>
+ <li><code>tagName</code> — строка, указывающая элемент какого типа должен быть создан. <a href="ru/DOM/element.nodeName">nodeName</a> создается и инициализируется со значением <code>tagName</code>.</li>
+ <li>
+  <p><code>options</code> — необязательный параметр, объект <code>ElementCreationOptions</code>, который может содержать только поле <code>is</code>, указывающее имя пользовательского элемента, созданного с помощью <code>customElements.define()</code> (см. <a href="/ru/docs/Web/Web_Components">Веб-компоненты</a>).</p>
+ </li>
+</ul>
+
+<h3 id=".D0.9F.D1.80.D0.B8.D0.BC.D0.B5.D1.80.D1.8B" name=".D0.9F.D1.80.D0.B8.D0.BC.D0.B5.D1.80.D1.8B">Пример</h3>
+
+<p>Данный пример создает новый элемент <code>&lt;div&gt;</code> и вставляет его перед элементом с идентификатором <code>org_div1</code>:</p>
+
+<pre class="brush: js"><code class="language-html"><span class="doctype token">&lt;!DOCTYPE html&gt;</span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>html</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>head</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>title</span><span class="punctuation token">&gt;</span></span>||Работа с элементами||<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>title</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>head</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>body</span><span class="punctuation token">&gt;
+</span></span>&lt;div&gt;&lt;h1&gt;Привет!&lt;/h1&gt;&lt;/div&gt;
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span>'org_div1'</span><span class="punctuation token">&gt;</span></span>Текст выше сгенерирован автоматически.<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>body</span><span class="punctuation token">&gt;
+
+&lt;script&gt;
+<code class="language-html"><code class="language-javascript">  document.body.onload = addElement;
+</code></code>  var my_div = newDiv = null;
+
+  function addElement() {
+
+    // Создаем новый элемент div
+    // и добавляем в него немного контента
+
+    var newDiv = document.createElement("div");
+        newDiv.innerHTML = "&lt;h1&gt;Привет!&lt;/h1&gt;";
+
+    // Добавляем только что созданый элемент в дерево DOM
+
+    my_div = document.getElementById("org_div1");
+    document.body.insertBefore(newDiv, my_div);
+  }
+&lt;/script&gt;
+&lt;/html&gt;</span></span>
+</code></pre>
+
+<h3 id=".D0.97.D0.B0.D0.BC.D0.B5.D1.87.D0.B0.D0.BD.D0.B8.D1.8F" name=".D0.97.D0.B0.D0.BC.D0.B5.D1.87.D0.B0.D0.BD.D0.B8.D1.8F">Заметки</h3>
+
+<p>Если существуют атрибуты со значениями по умолчанию, атрибуты узлов предоставляющие их создаются автоматически и применяются к элементу.</p>
+
+<p>Для создания элементов с заданым пространством имен используйте метод <a href="ru/DOM/document.createElementNS">createElementNS</a>.</p>
+
+<p>Реализация <code>createElement </code>в Gecko не соответствует DOM спецификации для XUL и XHTML документов: <code>localName</code> и <code>namespaceURI</code> не устанавливаются в  <code>null</code> в созданном документе. Смотрите {{ Bug(280692) }} для подробностей.</p>
+
+<p>Для обратной совместимости с предыдущими версиями спецификации пользовательских элементов некоторые браузеры позволяют передавать здесь строку вместо объекта, где значением строки является имя тега пользовательского элемента.</p>
+
+<h3 id=".D0.A1.D0.BF.D0.B5.D1.86.D0.B8.D1.84.D0.B8.D0.BA.D0.B0.D1.86.D0.B8.D0.B8" name=".D0.A1.D0.BF.D0.B5.D1.86.D0.B8.D1.84.D0.B8.D0.BA.D0.B0.D1.86.D0.B8.D0.B8">Спецификации</h3>
+
+<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-2141741547">DOM 2 Модуль: createElement</a></p>
+
+<p>{{ languages( { "fr": "fr/DOM/document.createElement", "it": "it/DOM/document.createElement", "pl": "pl/DOM/document.createElement" } ) }}</p>
diff --git a/files/ru/dom/document.images/index.html b/files/ru/dom/document.images/index.html
new file mode 100644
index 0000000000..c9ba4ac1e2
--- /dev/null
+++ b/files/ru/dom/document.images/index.html
@@ -0,0 +1,29 @@
+---
+title: document.images
+slug: DOM/document.images
+tags:
+  - DOM
+  - JavaScript
+translation_of: Web/API/Document/images
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="Summary" name="Summary">Кратко об обьекте</h3>
+<p><code>document.images</code> возвращает коллекцию <a href="/ru/Web/API/HTMLImageElement" title="en/DOM/Image">изображений</a> в текущем HTML документе.</p>
+<h3 id="Syntax" name="Syntax">Синтаксис</h3>
+<pre class="eval"><em>var htmlCollection</em> = document.images;
+</pre>
+<h3 id="Example" name="Example">Пример</h3>
+<pre class="eval">var images = document.images;
+
+for(var i = 0; i &lt; images.length; i++) {
+    if(images[i].src == "banner.gif") {
+      alert('Баннер найден!');
+    };
+};
+</pre>
+<h3 id="Notes" name="Notes">Примечания</h3>
+<p><code>document.images.length</code> — возвращает количество изображений на странице.</p>
+<p><code>document.images</code> является частью DOM HTML, и работает только в HTML документах.</p>
+<h3 id="Specification" name="Specification">Спецификация</h3>
+<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-90379117">DOM Level 2 HTML: HTMLDocument.images</a></p>
+<p>{{ languages( { "en": "en/DOM/document.images", "fr": "fr/DOM/document.images", "pl": "pl/DOM/document.images","ru":"ru/DOM/document.images" } ) }}</p>
diff --git a/files/ru/dom/dom_reference/events/index.html b/files/ru/dom/dom_reference/events/index.html
new file mode 100644
index 0000000000..eeadb57328
--- /dev/null
+++ b/files/ru/dom/dom_reference/events/index.html
@@ -0,0 +1,80 @@
+---
+title: Events and the DOM
+slug: DOM/DOM_Reference/Events
+translation_of: Web/API/Document_Object_Model/Events
+---
+<p>Вступление</p>
+
+<h2 id="Вступление">Вступление</h2>
+
+<p>В этой главе описывается модель событий DOM. <a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-Event">Топ скрыть</a> Интерфейс сам по себе описано, а также интерфейсы для регистрации событий на узлах в DOM, Также а <a href="/ru/docs/Web/API/EventTarget.addEventListener">слушатели события</a> Главного , Также а Несколько больше Примеры, которые показывают, как Различные интерфейсы связаны друг события Главного с другом.</p>
+
+<p>Существует отличная диаграмма, которая четко объясняет события трех этапов через DOM в проекте <a href="http://www.w3.org/TR/DOM-Level-3-Events/#dom-event-architecture">DOM Level 3 Events</a> .</p>
+
+<p>Также см. <a href="/ru/docs/DOM/DOM_Reference/Examples#Example_5:_Event_Propagation">Пример 5: Распространение событий</a> в главе «Примеры» для более подробного примера.</p>
+
+<h2 id="Регистрация_слушателей_событий">Регистрация слушателей событий</h2>
+
+<p>Есть 3 способа регистрации обработанных событий для элемента DOM.</p>
+
+<h3 id="EventTarget.addEventListener"><a href="/ru/docs/Web/API/EventTarget.addEventListener"><code>EventTarget.addEventListener</code></a></h3>
+
+<pre class="brush: js">// Предполагая, что myButton является элементом кнопки
+myButton.addEventListener ('click', greet, false);
+function greet (event) {
+    // распечатать и посмотреть на объект события
+    // всегда печатать аргументы в случае пропуска любых других аргументов
+    console.log ('greet:', arguments);
+    оповещение («Привет, мир»);
+}
+</pre>
+
+<p>Это метод, который вы должны использовать на современных веб-страницах.</p>
+
+<p>Примечание. Internet Explorer 6-8 не поддерживает этот метод, предлагая аналогичный {{domxref ("EventTarget.attachEvent")}} API. Для кросс-браузерной совместимости используйте одну из множества доступных библиотек JavaScript.</p>
+
+<p>Дополнительную информацию можно найти на справочной странице {{domxref ("EventTarget.addEventListener")}}.</p>
+
+<h3 id="Атрибут_HTML"><a href="/ru/docs/Web/Guide/HTML/Event_attributes">Атрибут HTML</a></h3>
+
+<pre class="brush: html">&lt;button onclick = "alert ('Hello world!')"&gt;
+</pre>
+
+<p>Код JavaScript в атрибуте передается объекту Event через <code>event</code>параметр. <a href="http://dev.w3.org/html5/spec/webappapis.html#the-event-handler-processing-algorithm">Возвращаемое значение обрабатывается особым образом, описанным в спецификации HTML</a> .</p>
+
+<p>Этого пути следует избегать. Это делает разметку больше и менее читаемой. Проблемы содержания / структуры и поведения плохо разделены, что затрудняет поиск ошибки.</p>
+
+<h3 id="Свойства_элемента_DOM">Свойства элемента DOM</h3>
+
+<pre class="brush: js">// Предполагая, что myButton является элементом кнопки
+<code>myButton.onclick = function(event){alert('Hello world');};</code>
+</pre>
+
+<p>Функция может быть определена для получения <code>event</code>параметра. <a href="http://dev.w3.org/html5/spec/webappapis.html#the-event-handler-processing-algorithm">Возвращаемое значение обрабатывается особым образом, описанным в спецификации HTML</a> .</p>
+
+<p>Проблема этого метода в том, что для каждого элемента и для каждого события может быть установлен только один обработчик.</p>
+
+<h2 id="Доступ_к_интерфейсам_событий">Доступ к интерфейсам событий</h2>
+
+<p>Обработчики событий могут быть присоединены к различным объектам, включая элементы DOM, документ, <a href="/ru/docs/Web/JavaScript/Reference/Global_Objects">объект окна</a> и т. Д. Когда происходит событие, объект события создается и последовательно передается слушателям события.</p>
+
+<p>Интерфейс {{domxref ("Event")}} доступен из функции-обработчика через объект события, переданный в качестве первого аргумента. В следующем простом примере показано, как объект события передается в функцию-обработчик события и может использоваться из одной такой функции.</p>
+
+<pre class="brush: js"><code>function print(evt) {</code>
+  // параметру evt автоматически назначается объект события
+  // позаботимся о различиях в console.log и alert
+  <code>console.log('print:', evt);
+  alert(evt);
+}</code>
+// любая функция должна иметь подходящее имя, это то, что называется семантическим
+<code>table_el.onclick = print; </code>
+</pre>
+
+<h2 id="Subnav">Subnav</h2>
+
+<ul>
+ <li><a href="/ru/docs/Web/API/Document_Object_Model">DOM Ссылка</a></li>
+ <li><a href="/ru/docs/Web/API/Document_Object_Model/Introduction">Введение в DOM</a></li>
+ <li><a href="/ru/docs/Web/API/Document_Object_Model/Events">События и ДОМ</a></li>
+ <li><a href="/ru/docs/Web/API/Document_Object_Model/Examples">Примеры</a></li>
+</ul>
diff --git a/files/ru/dom/dom_reference/examples/index.html b/files/ru/dom/dom_reference/examples/index.html
new file mode 100644
index 0000000000..a3332f7585
--- /dev/null
+++ b/files/ru/dom/dom_reference/examples/index.html
@@ -0,0 +1,382 @@
+---
+title: Examples of web and XML development using the DOM
+slug: DOM/DOM_Reference/Examples
+translation_of: Web/API/Document_Object_Model/Examples
+---
+<p>В этой главе представлены более длинные примеры разработки веб-сайтов и XML с использованием DOM. По возможности, примеры используют общие API, трюки и шаблоны в JavaScript для управления объектом документа.</p>
+
+<h2 id="Example_1_height_and_width" name="Example_1:_height_and_width">Пример 1: высота и ширина</h2>
+
+<p>В следующем примере показано использование свойств высоты и ширины для изображений разных размеров:<br>
+  </p>
+
+<pre class="brush:html">&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+&lt;head&gt;
+&lt;title&gt;width/height example&lt;/title&gt;
+&lt;script&gt;
+function init() {
+  var arrImages = new Array(3);
+
+  arrImages[0] = document.getElementById("image1");
+  arrImages[1] = document.getElementById("image2");
+  arrImages[2] = document.getElementById("image3");
+
+  var objOutput = document.getElementById("output");
+  var strHtml = "&lt;ul&gt;";
+
+  for (var i = 0; i &lt; arrImages.length; i++) {
+    strHtml += "&lt;li&gt;image" + (i+1) +
+            ": height=" + arrImages[i].height +
+            ", width=" + arrImages[i].width +
+            ", style.height=" + arrImages[i].style.height +
+            ", style.width=" + arrImages[i].style.width +
+            "&lt;\/li&gt;";
+  }
+
+  strHtml += "&lt;\/ul&gt;";
+
+  objOutput.innerHTML = strHtml;
+}
+&lt;/script&gt;
+&lt;/head&gt;
+&lt;body onload="init();"&gt;
+
+&lt;p&gt;Image 1: no height, width, or style
+  &lt;img id="image1" src="http://www.mozilla.org/images/mozilla-banner.gif"&gt;
+&lt;/p&gt;
+
+&lt;p&gt;Image 2: height="50", width="500", but no style
+  &lt;img id="image2"
+       src="http://www.mozilla.org/images/mozilla-banner.gif"
+       height="50" width="500"&gt;
+&lt;/p&gt;
+
+&lt;p&gt;Image 3: no height, width, but style="height: 50px; width: 500px;"
+  &lt;img id="image3"
+       src="http://www.mozilla.org/images/mozilla-banner.gif"
+       style="height: 50px; width: 500px;"&gt;
+&lt;/p&gt;
+
+&lt;div id="output"&gt; &lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Example_2_Image_Attributes" name="Example_2:_Image_Attributes">Пример 2: Аттрибуты Изображения</h2>
+
+<pre class="brush:html">&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+&lt;head&gt;
+&lt;title&gt;Modifying an image border&lt;/title&gt;
+
+&lt;script&gt;
+function setBorderWidth(width) {
+  document.getElementById("img1").style.borderWidth = width + "px";
+}
+&lt;/script&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+&lt;p&gt;
+  &lt;img id="img1"
+       src="image1.gif"
+       style="border: 5px solid green;"
+       width="100" height="100" alt="border test"&gt;
+&lt;/p&gt;
+
+&lt;form name="FormName"&gt;
+  &lt;input type="button" value="Make border 20px-wide" onclick="setBorderWidth(20);" /&gt;
+  &lt;input type="button" value="Make border 5px-wide"  onclick="setBorderWidth(5);" /&gt;
+&lt;/form&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Example_3_Manipulating_Styles" name="Example_3:_Manipulating_Styles">Пример 3: Управление Стилями</h2>
+
+<p>В этом простом примере, некоторые базовые свойства стиля элемента абзаца HTML доступны с помощью объекта стиля элемента и свойств стиля CSS этого объекта, который можно получить и установить из DOM. В этом случае вы напрямую управляете отдельными стилями. В следующем примере (см. Пример 4), вы можете использовать таблицы стилей и их правила для изменения стилей для целых документов.</p>
+
+<pre class="brush:html">&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+&lt;head&gt;
+&lt;title&gt;Changing color and font-size example&lt;/title&gt;
+
+&lt;script&gt;
+function changeText() {
+  var p = document.getElementById("pid");
+
+  p.style.color = "blue"
+  p.style.fontSize = "18pt"
+}
+&lt;/script&gt;
+&lt;/head&gt;
+&lt;body&gt;
+
+&lt;p id="pid" onclick="window.location.href = 'http://www.cnn.com/';"&gt;linker&lt;/p&gt;
+
+&lt;form&gt;
+  &lt;p&gt;&lt;input value="rec" type="button" onclick="changeText();" /&gt;&lt;/p&gt;
+&lt;/form&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Example_4_Using_Stylesheets" name="Example_4:_Using_Stylesheets">Пример 4: Использование Стилей</h2>
+
+<p>Свойство styleSheets объекта документа возвращает список таблиц стилей, которые были загружены в этот документ. Вы можете получить доступ к этим таблицам стилей и их правилам индивидуально, используя объекты таблицы стилей, стилей и CSS правил объекта, как показано в этом примере, который выводит все селектора правил стиля в консоль.</p>
+
+<pre class="brush:js">var ss = document.styleSheets;
+
+for(var i = 0; i &lt; ss.length; i++) {
+  for(var j = 0; j &lt; ss[i].cssRules.length; j++) {
+    dump( ss[i].cssRules[j].selectorText + "\n" );
+  }
+}</pre>
+
+<p>Для документа с единой таблицей стилей, в которой определены следующие три правила:</p>
+
+<pre class="brush:css">body { background-color: darkblue; }
+p { font-face: Arial; font-size: 10pt; margin-left: .125in; }
+#lumpy { display: none; }
+</pre>
+
+<p>Этот скрипт выводит следующее:</p>
+
+<pre>BODY
+P
+#LUMPY
+</pre>
+
+<h2 id="Example_5_Event_Propagation" name="Example_5:_Event_Propagation">Пример 5: Распространение Событий</h2>
+
+<p>Этот пример демонстрирует, как события срабатывают и обрабатываются в DOM очень простым путём. Когда загружается BODY в составе HTML-документа, обработчик событий регистрируется в верхней строке таблицы TABLE. Обработчик событий реагирует на событие запуском функции stopEvent, изменяющей значение в нижней ячейке.</p>
+
+<p>Однако, stopEvent также вызывает метод объекта событий, {{domxref("event.stopPropagation")}}, что препятствует дальнейшему всплытию события в DOM. Обратите внимание, что сама таблица имеет {{domxref("element.onclick","onclick")}} обработчик событий, который должен отображать сообщение при нажатии на таблицу. Но метод stopEvent метод прекратил распространение, и поэтому после обновления данных в таблице фаза события эффективно завершается, и отображается окно предупреждения для подтверждения.</p>
+
+<pre class="brush:html">&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+&lt;head&gt;
+&lt;title&gt;Event Propagation&lt;/title&gt;
+
+&lt;style&gt;
+#t-daddy { border: 1px solid red }
+#c1 { background-color: pink; }
+&lt;/style&gt;
+
+&lt;script&gt;
+function stopEvent(ev) {
+  c2 = document.getElementById("c2");
+  c2.innerHTML = "hello";
+
+  // this ought to keep t-daddy from getting the click.
+  ev.stopPropagation();
+  alert("event propagation halted.");
+}
+
+function load() {
+  elem = document.getElementById("tbl1");
+  elem.addEventListener("click", stopEvent, false);
+}
+&lt;/script&gt;
+&lt;/head&gt;
+
+&lt;body onload="load();"&gt;
+
+&lt;table id="t-daddy" onclick="alert('hi');"&gt;
+  &lt;tr id="tbl1"&gt;
+    &lt;td id="c1"&gt;one&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td id="c2"&gt;two&lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Example_6_getComputedStyle" name="Example_6:_getComputedStyle">Пример 6: getComputedStyle</h2>
+
+<p>Этот пример показывает как {{domxref("window.getComputedStyle")}} метод может использоваться для получения стилей элемента, которые не заданы с помощью атрибута style или с помощью JavaScript (e.g., <code>elt.style.backgroundColor="rgb(173, 216, 230)"</code>). Эти последние типы стилей можно получить с помощью более прямых {{domxref("element.style", "elt.style")}} свойств, которые указаны в <a href="/en-US/docs/Web/CSS/Reference">DOM CSS Properties List</a>.</p>
+
+<p>getComputedStyle () возвращает объект ComputedCSSStyleDeclaration, свойства индивидуального стиля которого могут ссылаться на метод getPropertyValue () этого объекта, как показано в следующем примере документа.</p>
+
+<pre class="brush:html">&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+&lt;head&gt;
+
+&lt;title&gt;getComputedStyle example&lt;/title&gt;
+
+&lt;script&gt;
+function cStyles() {
+  var RefDiv = document.getElementById("d1");
+  var txtHeight = document.getElementById("t1");
+  var h_style = document.defaultView.getComputedStyle(RefDiv, null).getPropertyValue("height");
+
+  txtHeight.value = h_style;
+
+  var txtWidth = document.getElementById("t2");
+  var w_style = document.defaultView.getComputedStyle(RefDiv, null).getPropertyValue("width");
+
+  txtWidth.value = w_style;
+
+  var txtBackgroundColor = document.getElementById("t3");
+  var b_style = document.defaultView.getComputedStyle(RefDiv, null).getPropertyValue("background-color");
+
+  txtBackgroundColor.value = b_style;
+}
+&lt;/script&gt;
+
+&lt;style&gt;
+#d1 {
+  margin-left: 10px;
+  background-color: rgb(173, 216, 230);
+  height: 20px;
+  max-width: 20px;
+}
+&lt;/style&gt;
+
+&lt;/head&gt;
+
+&lt;body&gt;
+
+&lt;div id="d1"&gt;&amp;nbsp;&lt;/div&gt;
+
+&lt;form action=""&gt;
+  &lt;p&gt;
+    &lt;button type="button" onclick="cStyles();"&gt;getComputedStyle&lt;/button&gt;
+    height&lt;input id="t1" type="text" value="1" /&gt;
+    max-width&lt;input id="t2" type="text" value="2" /&gt;
+    bg-color&lt;input id="t3" type="text" value="3" /&gt;
+  &lt;/p&gt;
+&lt;/form&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Example_7_Displaying_Event_Object_Properties" name="Example_7:_Displaying_Event_Object_Properties">Пример 7: Отображение Свойств Событий Объекта</h2>
+
+
+
+<p>В этом примере используются методы DOM для отображения всех свойств объекта {{domxref ("window.onload")}} {{domxref ("event")}} и их значений в таблице. Он также показывает полезный метод использования цикла for..in для итерации по свойствам объекта для получения их значений.</p>
+
+<p>Свойства объектов событий сильно различаются между браузерами, WHATWG DOM Standard перечисляет стандартные свойства, однако многие браузеры значительно расширили их.</p>
+
+<p>Поместите следующий код в пустой текстовый файл и загрузите его в различные браузеры, вы будете удивлены различным количеством и именами свойств. Вы также можете добавить некоторые элементы на страницу и вызвать эту функцию из разных обработчиков событий.</p>
+
+
+
+<pre class="brush:html">&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+&lt;head&gt;
+&lt;meta charset="utf-8"/&gt;
+&lt;title&gt;Show Event properties&lt;/title&gt;
+
+&lt;style&gt;
+table { border-collapse: collapse; }
+thead { font-weight: bold; }
+td { padding: 2px 10px 2px 10px; }
+
+.odd { background-color: #efdfef; }
+.even { background-color: #ffffff; }
+&lt;/style&gt;
+
+&lt;script&gt;
+
+function showEventProperties(e) {
+  function addCell(row, text) {
+    var cell = row.insertCell(-1);
+    cell.appendChild(document.createTextNode(text));
+  }
+
+  var e = e || window.event;
+  document.getElementById('eventType').innerHTML = e.type;
+
+  var table = document.createElement('table');
+  var thead = table.createTHead();
+  var row = thead.insertRow(-1);
+  var lableList = ['#', 'Property', 'Value'];
+  var len = lableList.length;
+
+  for (var i=0; i&lt;len; i++) {
+    addCell(row, lableList[i]);
+  }
+
+  var tbody = document.createElement('tbody');
+  table.appendChild(tbody);
+
+  for (var p in e) {
+    row = tbody.insertRow(-1);
+    row.className = (row.rowIndex % 2)? 'odd':'even';
+    addCell(row, row.rowIndex);
+    addCell(row, p);
+    addCell(row, e[p]);
+  }
+
+  document.body.appendChild(table);
+}
+
+window.onload = function(event){
+  showEventProperties(event);
+}
+&lt;/script&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+&lt;h1&gt;Properties of the DOM &lt;span id="eventType"&gt;&lt;/span&gt; Event Object&lt;/h1&gt;
+&lt;/body&gt;
+
+&lt;/html&gt;
+</pre>
+
+<h2 id="Example_8_Using_the_DOM_Table_Interface" name="Example_8:_Using_the_DOM_Table_Interface">Пример 8: Использование интерфейса таблицы DOM</h2>
+
+
+
+<p>Интерфейс DOM HTMLTableElement предоставляет некоторые удобные методы для создания и управления таблицами. Два часто используемых метода: {{domxref ("HTMLTableElement.insertRow")}} и {{domxref ("tableRow.insertCell")}}.</p>
+
+<p>Чтобы добавить строку и некоторые ячейки в существующую таблицу:</p>
+
+
+
+<pre class="brush:html">&lt;table id="table0"&gt;
+ &lt;tr&gt;
+  &lt;td&gt;Row 0 Cell 0&lt;/td&gt;
+  &lt;td&gt;Row 0 Cell 1&lt;/td&gt;
+ &lt;/tr&gt;
+&lt;/table&gt;
+
+&lt;script&gt;
+var table = document.getElementById('table0');
+var row = table.insertRow(-1);
+var cell,
+    text;
+
+for (var i = 0; i &lt; 2; i++) {
+  cell = row.insertCell(-1);
+  text = 'Row ' + row.rowIndex + ' Cell ' + i;
+  cell.appendChild(document.createTextNode(text));
+}
+&lt;/script&gt;
+</pre>
+
+<h3 id="Notes" name="Notes">Заметки</h3>
+
+<ul>
+ <li>Свойство таблицы {{domxref ("element.innerHTML", "innerHTML")}} никогда не должно использоваться для изменения таблицы, хотя вы можете использовать ее для записи всей таблицы или содержимого ячейки.</li>
+ <li>Если для создания строк и ячеек используются методы DOM Core {{domxref ("document.createElement")}} и {{domxref ("Node.appendChild")}}, IE требует, чтобы они были добавлены к элементу tbody, тогда как другие браузеры позволят добавлять к элементу таблицы (строки будут добавлены к последнему элементу tbody).</li>
+ <li>Существует ряд других методов, относящихся к интерфейсу таблицы, которые могут использоваться для создания и изменения таблиц.</li>
+</ul>
+
+<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>
diff --git a/files/ru/dom/dom_reference/index.html b/files/ru/dom/dom_reference/index.html
new file mode 100644
index 0000000000..db06b01dd8
--- /dev/null
+++ b/files/ru/dom/dom_reference/index.html
@@ -0,0 +1,387 @@
+---
+title: Руководство по DOM
+slug: DOM/DOM_Reference
+tags:
+  - DOM
+  - DOM Reference
+  - DOM интерфейс
+  - Intermediate
+  - Руководство
+translation_of: Web/API/Document_Object_Model
+---
+<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")}}, асcоциированный с ним {{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>
diff --git a/files/ru/dom/dom_reference/locating_dom_elements_using_selectors/index.html b/files/ru/dom/dom_reference/locating_dom_elements_using_selectors/index.html
new file mode 100644
index 0000000000..73538e8616
--- /dev/null
+++ b/files/ru/dom/dom_reference/locating_dom_elements_using_selectors/index.html
@@ -0,0 +1,50 @@
+---
+title: Locating DOM elements using selectors
+slug: DOM/DOM_Reference/Locating_DOM_elements_using_selectors
+translation_of: Web/API/Document_object_model/Locating_DOM_elements_using_selectors
+---
+<div>{{ gecko_minversion_header("1.9.1") }}</div>
+
+<div>Selectors API предоставляет методы, с помощью которых можно быстро и просто получить доступ к узлам <code><a href="/en-US/docs/DOM/element">Element</a></code> из DOM путем сопоставления с набором селекторов. Это намного быстрее, чем прошлые техники, где надо было, например, использовать цикл в JS-коде, чтобы найти конкретные элементы.</div>
+
+<div> </div>
+
+<h2 id="Интерфейс_NodeSelector_(The_NodeSelector_interface)">Интерфейс NodeSelector (The NodeSelector interface)</h2>
+
+<p>Эта спецификация добавляет два новых метода к любым объектам, реализующим интерфейс <a class="internal" href="/en-US/docs/DOM/document" title="en-US/docs/DOM/Document"><code>Document</code></a>, <a class="internal" href="/en-US/docs/DOM/DocumentFragment" title="en-US/docs/DOM/DocumentFragment"><code>DocumentFragment</code></a>, или <a class="internal" href="/en-US/docs/DOM/element" title="en-US/docs/DOM/Element"><code>Element</code></a>:</p>
+
+<dl>
+ <dt><code>querySelector</code></dt>
+ <dd>Возвращает первый совпадающий узел <a class="internal" href="/en-US/docs/DOM/element" title="en-US/docs/DOM/Element"><code>Element</code></a> внутри поддерева. Если совпадающих узлов нет, будет возвращен <code>null</code>.</dd>
+ <dt><code>querySelectorAll</code></dt>
+ <dd>Возвращает <a class="internal" href="/en-US/docs/DOM/NodeList" title="en-US/docs/DOM/NodeList"><code>NodeList</code></a><code>, </code>содержащий все подходящие узлы <code>Element</code> внутри поддерева узлов. Или возвращает пустой <code>NodeList</code>, если совпадений не найдено.</dd>
+</dl>
+
+<div class="note"><strong>Замечание: </strong><code><a class="internal" href="/en-US/docs/DOM/NodeList" title="en-US/docs/DOM/NodeList">NodeList</a></code>, возвращаемый методом <code><a class="internal" href="/en-US/docs/DOM/Element.querySelectorAll" title="en-US/docs/DOM/Element.querySelectorAll">querySelectorAll()</a>, </code>не настоящий. Этот список отличается от других методов поиска DOM, которые возвращают настоящие (живые) узлы.</div>
+
+<p>Вы можете найти примеры и детали, прочитав документацию для методов <a class="internal" href="/en-US/docs/DOM/Element.querySelector" title="en-US/docs/DOM/Element.querySelector"><code>querySelector()</code></a> и <a class="internal" href="/en-US/docs/DOM/Element.querySelectorAll" title="en-US/docs/DOM/Element.querySelectorAll"><code>querySelectorAll()</code></a><code>, </code>а также в статье <a class="internal" href="/en-US/docs/Code_snippets/QuerySelector" title="en-US/docs/Code snippets/QuerySelector">Code snippets for querySelector</a>.</p>
+
+<h2 id="Selectors">Selectors</h2>
+
+<p>Селекторные методы принимают один или больше селекторов, разделенных запятыми, чтобы определить, какие элементы должны быть возвращены. Например, чтобы все параграфы в документе, которые имеют классы <code>warning </code>или <code>note</code>, можно сделать следующее:</p>
+
+<pre><code>var special = document.querySelectorAll( "p.warning, p.note" );</code></pre>
+
+<p>Также можно искать по ID. Например:</p>
+
+<pre><code>var el = document.querySelector( "#main, #basic, #exclamation" );</code></pre>
+
+<p>После выполнения кода выше, <code>el</code> будет содержать первый элемент в документе, чей ID <code>main, basic</code> или <code>exclamation</code></p>
+
+<p>Вы можете использовать любые CSS-селекторы в методах <code>querySelector(), querySelectorAll()</code></p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/selectors-api/" title="http://www.w3.org/TR/selectors-api/">Selectors API</a></li>
+ <li><a href="/en-US/docs/DOM/Element.querySelector" title="en-US/docs/DOM/Element.querySelector"><code>element.querySelector</code></a></li>
+ <li><a href="/en-US/docs/DOM/Element.querySelectorAll" title="en-US/docs/DOM/element.querySelectorAll"><code>element.querySelectorAll</code></a></li>
+ <li><a href="/en-US/docs/DOM/Document.querySelector" title="en-US/docs/DOM/document.querySelector"><code>document.querySelector</code></a></li>
+ <li><a href="/en-US/docs/DOM/Document.querySelectorAll" title="en-US/docs/DOM/document.querySelectorAll"><code>document.querySelectorAll</code></a></li>
+ <li><a href="/en-US/docs/Code_snippets/QuerySelector" title="en-US/docs/Code_snippets/QuerySelector">Code snippets for querySelector</a></li>
+</ul>
diff --git a/files/ru/dom/dom_reference/введение/index.html b/files/ru/dom/dom_reference/введение/index.html
new file mode 100644
index 0000000000..3c02e5799f
--- /dev/null
+++ b/files/ru/dom/dom_reference/введение/index.html
@@ -0,0 +1,230 @@
+---
+title: Введение
+slug: DOM/DOM_Reference/Введение
+tags:
+  - DOM
+translation_of: Web/API/Document_Object_Model/Introduction
+---
+<div>
+<p><span style="line-height: 1.5;">Этот раздел представляет краткое знакомство с Объектной Моделью Документа (DOM) - что такое DOM, каким образом предоставляются структуры HTML и XML документов, и как взаимодействовать с ними. Данный раздел содержит справочную информацию и примеры.</span></p>
+
+<h2 id="Что_такое_Объектная_Модель_Документа_DOM">Что такое Объектная Модель Документа (DOM)?</h2>
+
+<p>Объектная Модель Документа (DOM) – это программный интерфейс (API) для HTML и XML документов. DOM предоставляет структурированное представление документа и определяет то, как эта структура может быть доступна из программ, которые могут изменять содержимое, стиль и структуру документа. Представление DOM состоит из структурированной группы узлов и объектов, которые имеют свойства и методы. По существу, DOM соединяет веб-страницу с языками описания сценариев либо языками программирования.<br>
+ <br>
+ Веб-страница – это документ. Документ может быть представлен как в окне браузера, так и в самом HTML-коде. В любом случае, это один и тот же документ. DOM предоставляет другой способ представления, хранения и управления этого документа. DOM полностью поддерживает объектно-ориентированнное представление веб-страницы, делая возможным её изменение при помощи языка описания сценариев наподобие JavaScript.<br>
+ <br>
+ Стандарты <a class="external external-icon" href="http://www.w3.org/DOM/">W3C DOM</a> и <a class="external external-icon" href="https://dom.spec.whatwg.org/">WHATWG DOM </a>формируют основы DOM, реализованные в большинстве современных браузеров. Многие браузеры предлагают расширения за пределами данного стандарта, поэтому необходимо проверять работоспособность тех или иных возможностей DOM для каждого конкретного браузера.</p>
+
+<p>Например: стандарт DOM описывает, что метод <code>getElementsByTagName </code>в коде, указанном ниже, должен возращать список всех элементов &lt;p&gt; в документе.</p>
+
+<pre class="brush: js  language-js" style="font-size: 14px;"><code class="language-js">paragraphs <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementsByTagName<span class="punctuation token">(</span></span><span class="string token">"P"</span><span class="punctuation token">)</span><span class="punctuation token">;</span><span class="comment token">
+// paragraphs[0] это первый &lt;p&gt; элемент
+</span><span class="comment token">// paragraphs[1] это второй &lt;p&gt; элемент и т.д.
+</span><span class="function token">alert<span class="punctuation token">(</span></span>paragraphs<span class="punctuation token">[</span><span class="number token">0</span><span class="punctuation token">]</span><span class="punctuation token">.</span>nodeName<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>Все свойства, методы и события, доступные для управления и создания новых страниц, организованы в виде объектов. Например, объект <code>document</code>, который представляет сам документ, объект <code>table</code>, который реализует специальный интерфейс DOM<code style="font-style: normal; line-height: 1.5;"> HTMLTableElement,</code> необходимый для доступа к HTML-таблицам, и так далее. Данная документация даёт справку об объектах DOM, реализованных Gecko-подобных браузерах.</p>
+
+<h2 id="DOM_и_JavaScript">DOM и JavaScript</h2>
+
+<p>Небольшой пример выше, как почти все примеры в этой справке – это JavaScript. То есть пример <em>написан </em>на JavaScript, но при этом <em>используется </em>DOM для доступа к документу и его элементам. DOM не является языком программирования, но без него JavaScript не имел бы никакой модели или представления о веб-странице, HTML-документе, XML-документе и их элементах. Каждый элемент в документе - весь документ в целом, заголовок, таблицы внутри документа, заголовки таблицы, текст внутри ячеек таблицы - это части объектной документной модели для этого документа, поэтому все они могут быть доступны и могут изменяться с помощью DOM и скриптового языка наподобие JavaScript.</p>
+
+<p>Вначале JavaScript и DOM были тесно связаны, но впоследствии они развились в различные сущности. Содержимое страницы хранится в DOM и может быть доступно и изменяться с использованием JavaScript, поэтому мы можем записать это в виде приблизительного равенства:</p>
+
+<p>API (веб либо XML страница) = DOM + JS (язык описания скриптов)</p>
+
+<p>DOM спроектирован таким образом, чтобы быть независимым от любого конкретного языка программирования, обеспечивая структурное представление документа согласно единому и последовательному API. Хотя мы всецело сфокусированы на JavaScript в этой справочной документации, реализация DOM может быть построена для любого языка, как в следующем примере на Python:</p>
+</div>
+
+<pre class="brush: python  language-html"><code class="language-html"># Пример DOM на языке Python
+import xml.dom.minidom as m
+doc = m.parse("C:\\Projects\\Py\\chap1.xml");
+doc.nodeName # Свойство объекта документа DOM;
+p_list = doc.getElementsByTagName("para");</code></pre>
+
+<p>Для подробной информации о том, какие технологии участвуют в написании JavaScript для веб, смотрите обзорную статью <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/JavaScript_technologies_overview" style="line-height: 1.5;">JavaScript technologies overview.</a></p>
+
+<h2 id="Каким_образом_доступен_DOM">Каким образом доступен DOM? </h2>
+
+<p>Вы не должны делать ничего особенного для работы с DOM. Различные браузеры имеют различную реализацию DOM, эти реализации показывают различную степень соответсвия с действительным стандартом DOM (это тема, которую мы пытались не затрагивать в данной документации), но каждый браузер использует свой DOM, чтобы сделать веб страницы доступными для взаимодествия с языками сценариев.</p>
+
+<p>При создании сценария с использованием элемента &lt;script&gt;, либо включая в веб страницу инструкцию для загрузки скрипта, вы можете немедленно приступить к использованию программного интерфейса (API), используя элементы <code><a href="https://developer.mozilla.org/en-US/docs/DOM/document">document</a> </code>или <code><a href="https://developer.mozilla.org/en-US/docs/DOM/window">window</a></code> для взаимодействия с самим документом, либо для получения потомков этого документа, т.е. различных элементов на странице. Ваше программирование DOM может быть чем-то простым, например, вывод сообщения с использованием функции <code><a href="https://developer.mozilla.org/en-US/docs/DOM/window.alert">alert()</a></code> объекта <code><a href="https://developer.mozilla.org/en-US/docs/DOM/window">window</a></code>, или использовать более сложные методы DOM, которые создают новое содержимое, как показанно в следующем примере:</p>
+
+<pre class="language-html">&lt;body onload="window.alert('добро пожаловать на мою домашнюю страницу!');"&gt;
+</pre>
+
+<p>В следующем примере внутри элемента <code>&lt;script&gt;</code> определен код JavaScript, данный код устанавливает функцию при загрузке документа (когда весь DOM доступен для использования). Эта функция создает новый элемент H1, добавляет текст в данный элемент, а затем добавляет H1 в дерево документа:</p>
+
+<pre class="brush: html  language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>html</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>head</span><span class="punctuation token">&gt;</span></span>
+    <span class="script token"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>script</span><span class="punctuation token">&gt;</span></span>
+   <span class="comment token"> // запуск данной функции при загрузке документа
+</span>       window<span class="punctuation token">.</span>onload <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+   <span class="comment token"> // создание нескольких элементов
+</span>   <span class="comment token"> // в пустой HTML странице
+</span>       heading <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement<span class="punctuation token">(</span></span><span class="string token">"h1"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+       heading_text <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createTextNode<span class="punctuation token">(</span></span><span class="string token">"Big Head!"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+       heading<span class="punctuation token">.</span><span class="function token">appendChild<span class="punctuation token">(</span></span>heading_text<span class="punctuation token">)</span><span class="punctuation token">;</span>
+       document<span class="punctuation token">.</span>body<span class="punctuation token">.</span><span class="function token">appendChild<span class="punctuation token">(</span></span>heading<span class="punctuation token">)</span><span class="punctuation token">;</span>
+      <span class="punctuation token">}</span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>script</span><span class="punctuation token">&gt;</span></span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>head</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>body</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>body</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>html</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<h2 id="Важные_типы_данных">Важные типы данных</h2>
+
+<p>Данный раздел предназначен для краткого описания различных типов и объектов в простой и доступной манере. Существует некоторое количество различных типов данных, которые используются в API, на которые вы должны обратить внимание. Для простоты, синтаксис примеров в данном разделе обычно ссылается на узлы как на <code>element</code>s, на массивы узлов как на <code>nodeList</code>s ( либо просто <code>element</code>s ) и на атрибуты узла, просто как на <code>attribute</code>s.</p>
+
+<p>Ниже таблица с кратким описанием этих типов данных.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td>document</td>
+   <td>Когда член возвращает объект типа document (например, свойство элемента ownerDocument возвращает документ к которому он относится), этот обьект document является собственным корневым обьектом. В DOM document Reference разделе описан объект document.<br>
+    element   </td>
+  </tr>
+  <tr>
+   <td>element</td>
+   <td>обозначает элемент или узел типа element, возвращаемый членом DOM API. Вместо того, чтобы говорить, что метод document.createElement() возвращает ссылку на node, мы просто скажем, что этот элемент возвращает element, который просто был создан в DOM. Объекты element реализуют DOM element интерфейс и также более общий Node интерфейс. Оба интерфейса включены в эту справку.<br>
+    nodeList</td>
+  </tr>
+  <tr>
+   <td>NodeList</td>
+   <td>
+    <p>массив элементов, как тот, что возвращается методом Document.getElementsByTagName(). Конкретные элементы в массиве доступны по индексу двумя способами:</p>
+
+    <ul>
+     <li>    list.item(1)</li>
+     <li>    list[1]</li>
+    </ul>
+
+    <p>Эти способы эквивалентны. В первом способе item() - единственный метод объекта NodeList. Последний использует обычный синтаксис массивов, чтобы получить второе значение в списке.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>attribute</td>
+   <td>Когда attribute возвращается членом API (например, метод createAttribute()) - это будет ссылка на объект, который предоставляет специальный (хоть и небольшой) интерфейс для атрибутов. Атрибуты - это узлы в DOM, как и элементы, хотя вы можете редко использовать их в таком виде.</td>
+  </tr>
+  <tr>
+   <td>namedNodeMap</td>
+   <td>namedNodeMap подобна массиву, но элементы доступны по имени или индексу. Доступ по индексу - это лишь для удобства перечисления, т.к. элементы не имеют определенног порядка в списке. Этот тип данных имеет метод item() для этих целей и вы можете также добавлять и удалять элементы из namedNodeMap</td>
+  </tr>
+ </tbody>
+</table>
+
+
+
+<h2 id="DOM-интерфейсы_DOM_interfaces">DOM-интерфейсы (DOM interfaces)</h2>
+
+
+
+<p>Это руководство об объектах и реальных вещах, которые вы можете использовать для управления DOM-иерархией. Есть много моментов, где понимание того, как это работает, может удивлять. Например, объект, представляющий <code>HTML form</code> элемент, берет своё свойство <code><strong>name </strong></code>из интерфейса <code>HTMLFormElement, </code>а свойство <code><strong>className - </strong></code>из интерфейса <code>HTMLElement. </code>В обоих случаях свойство, которое вы хотите, находится в этом объекте формы.</p>
+
+<p>Кроме того, отношение между объектами и интерфейсами, которые они реализуют в DOM может быть удивительным и этот раздел пытается рассказать немного о существующих интерфейсах в DOM и о том, как они могут быть доступны.</p>
+
+<h3 id="Интерфейсы_и_объекты_Interfaces_and_objects">Интерфейсы и объекты (Interfaces and objects)</h3>
+
+<p>Многие объекты реализуют действия из нескольких интерфейсов. Объект таблицы, например, реализует специальный <a href="https://developer.mozilla.org/en-US/docs/DOM/HTMLTableElement/ru/docs/">HTML Table Element Interface</a>, который включает такие методы как <code>createCaption</code> и <code>insertRow</code>. Но так как это таблица - это ещё и HTML-элемент, <code>table</code> реализует интерфейс <code>Element</code>, описанный в разделе <a href="https://developer.mozilla.org/en-US/docs/DOM/element/ru/docs/">DOM <code>element</code> Reference</a>. Наконец, так как HTML-элемент (в смысле DOM) - это узел (<code>node)</code> в дереве, которое составляет объектную модель для HTML- или XML-страницы, табличный элемент также реализует более общий интерфейс <code>Node</code>, из которого происходит <code>Element</code>.</p>
+
+<p>Когда вы получаете ссылку на объект <code>table</code>, как в следующем примере, вы обычно используете все три интерфейса этого объекта, вероятно, даже не зная этого.</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="Основные_интерфейсы_в_DOM_Core_interfaces_in_the_DOM">Основные интерфейсы в DOM (Core interfaces in the DOM)</h3>
+
+<p>Этот раздел перечисляет несколько самых распространенных интерфейсов в DOM. Идея не в том чтобы описать, что делают эти методы API, но в том чтобы дать вам несколько мыслей насчет видов методов и свойств, которые вы будете часто видеть, используя DOM. Эти распространенные части API использованы в большинстве примеров раздела <a href="https://developer.mozilla.org/en-US/docs/Gecko_DOM_Reference/Examples">DOM Examples</a> в конце этой справки.</p>
+
+<p><code>Document, window</code> - это объекты, чьи интерфейсы вы, как правило, очень часто используете в программировании DOM. Говоря простыми словами, объект <code>window</code> представляет что-то вроде браузера, а объект <code>document</code> - корень самого документа. <code>Element</code> наследуется от общего интерфейса <code>Node</code>, и эти интерфейсы вместе предоставляют много методов и свойств, которые можно применять у отдельных элементов. Эти элементы также могут иметь отдельные интерфейсы для работы с типами данных, которые эти элементы содержат, как в примере с объектом <code>table</code> в предыдущем случае.</p>
+
+<p>Ниже представлен краткий список распространненых членов API, используемых в программировании веб- и XML-страниц с использованием DOM:</p>
+
+<ul>
+ <li><code><a href="/ru/docs/Web/API/Document/getElementById">document.getElementById</a>(id)</code></li>
+ <li><code><a href="/ru/docs/Web/API/Document/getElementsByTagName">document.getElementsByTagName</a>(name)</code></li>
+ <li><code><a href="/ru/docs/DOM/document.createElement">document.createElement</a>(name)</code></li>
+ <li><code>parentNode.<a href="/ru/docs/Web/API/Node/appendChild">appendChild</a>(node)</code></li>
+ <li><code>element.<a href="/ru/docs/Web/API/Element/innerHTML">innerHTML</a></code></li>
+ <li><code>element.<a href="/ru/docs/Web/API/HTMLElement/style">style</a>.left</code></li>
+ <li><code>element.<a href="/ru/docs/Web/API/Element/setAttribute">setAttribute</a></code></li>
+ <li><code>element.<a href="/ru/docs/Web/API/Element/getAttribute">getAttribute</a></code></li>
+ <li><code>element.<a href="/ru/docs/Web/API/EventTarget/addEventListener">addEventListener</a></code></li>
+ <li><code><a href="/en-US/docs/DOM/window.content">window.content</a></code></li>
+ <li><code><a href="/en-US/docs/DOM/window.onload">window.onload</a></code></li>
+ <li><code><a href="/en-US/docs/DOM/window.dump">window.dump</a></code></li>
+ <li><code><a href="/ru/docs/Web/API/Window/scrollTo">window.scrollTo</a></code></li>
+</ul>
+
+<h2 id="Тестирование_DOM_API">Тестирование DOM API</h2>
+
+<p>Этот документ содержит примеры для каждого интерфейса, который вы можете использовать в своей разработке. В некоторых случаях примеры - полноценные веб-страницы с доступом к DOM в элементе <code>&lt;script&gt;,</code> также перечислены элементы, необходимые чтобы запустить скрипт в форме, и HTML-элементы, над которыми будут производиться операции DOM. Когда встречается такой случай, можно просто копировать и вставить пример в новый HTML-документ, сохранить и запустить его в браузере.</p>
+
+<p>Есть случаи, однако, где примеры более лаконичные. Чтобы запустить примеры, которые лишь демонстрируют основы взаимодействия интерфейсов с HTML-элементами, вы можете подготовить тестовую страницу, в которую будете помещать функции внутрь скриптов. Следующая очень простая веб-страница содержит элемент <code>&lt;script&gt;</code> в заголовке, в который вы можете поместить функции, чтобы протестировать интерфейс. Страница содержит несколько элементов с атрибутами, которые можно возвращать, устанавливать или, другими словами, манипулировать и содержит пользовательский интерфейс, необходимый, чтобы вызывать нужные функции из браузера.</p>
+
+<p>Вы можете использовать эту тестовую страницу или похожую для проверки интерфейсов DOM, которые вас интересуют и просмотра того, как они работают в браузерах. Вы можете обновить содержмое функции <code>test()</code> при необходимости, создать больше кнопок или добавить элементы при необходимости.</p>
+
+<pre><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>html</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>head</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>title</span><span class="punctuation token">&gt;</span></span>DOM Tests<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>title</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>script</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>application/javascript<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="language-javascript script token">
+    <span class="keyword token">function</span> <span class="function token">setBodyAttr</span><span class="punctuation token">(</span>attr<span class="punctuation token">,</span> value<span class="punctuation token">)</span><span class="punctuation token">{</span>
+      <span class="keyword token">if</span> <span class="punctuation token">(</span>document<span class="punctuation token">.</span>body<span class="punctuation token">)</span> <span class="function token">eval</span><span class="punctuation token">(</span><span class="string token">'document.body.'</span><span class="operator token">+</span>attr<span class="operator token">+</span><span class="string token">'="'</span><span class="operator token">+</span>value<span class="operator token">+</span><span class="string token">'"'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+      <span class="keyword token">else</span> <span class="function token">notSupported</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="punctuation token">}</span>
+    </span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>script</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>head</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>body</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span><span class="language-css style-attr token"><span class="attr-name token"> <span class="attr-name token">style</span></span><span class="punctuation token">="</span><span class="attr-value token"><span class="property token">margin</span><span class="punctuation token">:</span> <span class="number token">.5</span>in<span class="punctuation token">;</span> <span class="property token">height</span><span class="punctuation token">:</span> <span class="number token">400</span><span class="punctuation token">;</span></span><span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+      <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>b</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>tt</span><span class="punctuation token">&gt;</span></span>text<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>tt</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>b</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+      <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>form</span><span class="punctuation token">&gt;</span></span>
+        <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>select</span> <span class="attr-name token">onChange</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>setBodyAttr(<span class="punctuation token">'</span>text<span class="punctuation token">'</span>,
+        this.options[this.selectedIndex].value);<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+          <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>option</span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>black<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>black
+          <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>option</span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>darkblue<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>darkblue
+        <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>select</span><span class="punctuation token">&gt;</span></span>
+        <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>b</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>tt</span><span class="punctuation token">&gt;</span></span>bgColor<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>tt</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>b</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+        <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>select</span> <span class="attr-name token">onChange</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>setBodyAttr(<span class="punctuation token">'</span>bgColor<span class="punctuation token">'</span>,
+        this.options[this.selectedIndex].value);<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+          <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>option</span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>white<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>white
+          <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>option</span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>lightgrey<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>gray
+        <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>select</span><span class="punctuation token">&gt;</span></span>
+        <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>b</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>tt</span><span class="punctuation token">&gt;</span></span>link<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>tt</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>b</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+        <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>select</span> <span class="attr-name token">onChange</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>setBodyAttr(<span class="punctuation token">'</span>link<span class="punctuation token">'</span>,
+        this.options[this.selectedIndex].value);<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+          <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>option</span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>blue<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>blue
+          <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>option</span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>green<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>green
+        <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>select</span><span class="punctuation token">&gt;</span></span>  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>small</span><span class="punctuation token">&gt;</span></span>
+        <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>a</span> <span class="attr-name token">href</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>http://www.brownhen.com/dom_api_top.html<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>sample<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+        (sample link)<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>a</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>small</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>br</span><span class="punctuation token">&gt;</span></span>
+      <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>form</span><span class="punctuation token">&gt;</span></span>
+      <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>form</span><span class="punctuation token">&gt;</span></span>
+        <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>version<span class="punctuation token">"</span></span> <span class="attr-name token">onclick</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>ver()<span class="punctuation token">"</span></span> <span class="punctuation token">/&gt;</span></span>
+      <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>form</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>body</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>html</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<p>Чтобы протестировать много интерфейсов на одной странице, набор свойств, которые изменяют цвета веб-страницы, можно создать похожую веб-страницу с целой "консолью" кнопок, текстовых полей и других элементов. Следующий скриншот даёт идею, как интерфейсы могут быть сгруппированы вместе для тестирования</p>
+
+<p><img alt="" src="https://developer.mozilla.org/@api/deki/files/173/=DOM_Ref_Introduction_to_the_DOM.gif" style="height: 375px; width: 199px;"></p>
+
+<p>В этом примере выпадающее меню динамически обновляет доступные из DOM части веб-страницы (например, фоновый цвет, цвет ссылок и цвет текста). Однако при разработке тестовых страниц, тестирование интерфейсов, как вы об этом прочитали, важная часть изучения эффективной работы с DOM.</p>
+
+<h2 id="Другие_статьи">Другие статьи</h2>
+
+<ul>
+ <li><a href="/ru/docs/DOM/DOM_Reference">DOM Reference</a></li>
+ <li><a href="/ru/docs/DOM/DOM_Reference/Введение">Введение в DOM</a></li>
+ <li><a href="/ru/docs/DOM/DOM_Reference/Events">События и DOM (Events and the DOM)</a></li>
+ <li><a href="/en-US/docs/Web/API/Document_Object_Model/Examples">Примеры (Examples)</a></li>
+</ul>
diff --git a/files/ru/dom/index.html b/files/ru/dom/index.html
new file mode 100644
index 0000000000..eb6f785d55
--- /dev/null
+++ b/files/ru/dom/index.html
@@ -0,0 +1,61 @@
+---
+title: DOM
+slug: DOM
+tags:
+  - DOM
+translation_of: Web/API/Document_Object_Model
+---
+<div>
+  <p><b>Объектная модель документа</b> (<b>DOM</b>) — это API для <a href="/ru/docs/HTML">HTML</a> и <a href="/ru/docs/XML">XML</a> документов. Она предоставляет структуру документа, что позволяет изменять его содержимое и внешний вид. По сути, она связывает веб-страницы со скриптами или языками программирования.</p>
+</div>
+<table class="topicpage-table">
+  <tbody>
+    <tr>
+      <td>
+        <h2 class="Documentation" id=".D0.94.D0.BE.D0.BA.D1.83.D0.BC.D0.B5.D0.BD.D1.82.D0.B0.D1.86.D0.B8.D1.8F" name=".D0.94.D0.BE.D0.BA.D1.83.D0.BC.D0.B5.D0.BD.D1.82.D0.B0.D1.86.D0.B8.D1.8F">Документация</h2>
+        <dl>
+          <dt>
+            <a href="/ru/docs/%d0%a1%d0%bf%d1%80%d0%b0%d0%b2%d0%be%d1%87%d0%bd%d0%b0%d1%8f_%d0%b8%d0%bd%d1%84%d0%be%d1%80%d0%bc%d0%b0%d1%86%d0%b8%d1%8f_%d0%bf%d0%be_Gecko_DOM">Справочная информация по Gecko DOM</a></dt>
+          <dd>
+            Объектная модель документа движка Gecko.</dd>
+          <dt>
+            <a href="/ru/docs/%d0%9e%d0%b1_%d0%be%d0%b1%d1%8a%d0%b5%d0%ba%d1%82%d0%bd%d0%be%d0%b9_%d0%bc%d0%be%d0%b4%d0%b5%d0%bb%d0%b8_%d0%b4%d0%be%d0%ba%d1%83%d0%bc%d0%b5%d0%bd%d1%82%d0%b0">Об объектной модели документа</a></dt>
+          <dd>
+            Краткое введение в DOM.</dd>
+          <dt>
+            <a href="/ru/docs/%d0%94%d0%b8%d0%bd%d0%b0%d0%bc%d0%b8%d1%87%d0%b5%d1%81%d0%ba%d0%b8_%d0%b8%d0%b7%d0%bc%d0%b5%d0%bd%d1%8f%d0%b5%d0%bc%d1%8b%d0%b9_%d0%bf%d0%be%d0%bb%d1%8c%d0%b7%d0%be%d0%b2%d0%b0%d1%82%d0%b5%d0%bb%d1%8c%d1%81%d0%ba%d0%b8%d0%b9_%d0%b8%d0%bd%d1%82%d0%b5%d1%80%d1%84%d0%b5%d0%b9%d1%81_%d0%bd%d0%b0_XUL">Динамически изменяемый пользовательский интерфейс на XUL</a></dt>
+          <dd>
+            Основы управления XUL UI с помощью методов DOM.</dd>
+          <dt>
+            <a href="/ru/docs/DOM_%d0%b8_JavaScript">DOM и JavaScript</a></dt>
+          <dd>
+            Что такое DOM? Что такое JavaScript? Как мне использовать их совместно на моей веб-странице? Этот документ отвечает на эти и другие вопросы.</dd>
+          <dt>
+            <a class="external" href="http://www.mozilla.org/docs/dom/">Объектная модель документа Mozilla</a></dt>
+          <dd>
+            Более старая документация по DOM, размещенная на mozilla.org.</dd>
+        </dl>
+        <p><span class="alllinks"><a href="/ru/docs/tag/DOM">Посмотреть все...</a></span></p>
+      </td>
+      <td>
+        <h2 class="Community" id=".D0.A1.D0.BE.D0.BE.D0.B1.D1.89.D0.B5.D1.81.D1.82.D0.B2.D0.BE" name=".D0.A1.D0.BE.D0.BE.D0.B1.D1.89.D0.B5.D1.81.D1.82.D0.B2.D0.BE">Сообщество</h2>
+        <ul>
+          <li>Форумы Mozilla... {{ DiscussionList("dev-tech-dom", "mozilla.dev.tech.dom") }}</li>
+        </ul>
+        <h2 class="Tools" id=".D0.98.D0.BD.D1.81.D1.82.D1.80.D1.83.D0.BC.D0.B5.D0.BD.D1.82.D1.8B" name=".D0.98.D0.BD.D1.81.D1.82.D1.80.D1.83.D0.BC.D0.B5.D0.BD.D1.82.D1.8B">Инструменты</h2>
+        <ul>
+          <li><a class="external" href="http://www.getfirebug.com/">Firebug </a></li>
+          <li><a href="/ru/docs/DOM_Inspector">DOM Inspector</a></li>
+          <li><a class="external" href="http://slayeroffice.com/tools/modi/v2.0/modi_help.html">Mouse-over DOM Inspector</a></li>
+          <li><a class="external" href="http://www.karmatics.com/aardvark/">Aardvark Firefox extension</a></li>
+        </ul>
+        <p><span class="alllinks"><a href="/ru/docs/tag/DOM:Tools">Посмотреть все...</a></span></p>
+        <h2 class="Related_Topics" id=".D0.A1.D1.81.D1.8B.D0.BB.D0.BA.D0.B8_.D0.BF.D0.BE_.D1.82.D0.B5.D0.BC.D0.B5" name=".D0.A1.D1.81.D1.8B.D0.BB.D0.BA.D0.B8_.D0.BF.D0.BE_.D1.82.D0.B5.D0.BC.D0.B5">Ссылки по теме</h2>
+        <ul>
+          <li><a href="/ru/docs/AJAX">AJAX</a>, <a href="/ru/docs/CSS">CSS</a>, <a href="/ru/docs/DHTML">DHTML</a>, <a href="/ru/docs/JavaScript">JavaScript</a></li>
+        </ul>
+      </td>
+    </tr>
+  </tbody>
+</table>
+<p> </p>
diff --git a/files/ru/dom/using_fullscreen_mode/index.html b/files/ru/dom/using_fullscreen_mode/index.html
new file mode 100644
index 0000000000..ad21d6d20e
--- /dev/null
+++ b/files/ru/dom/using_fullscreen_mode/index.html
@@ -0,0 +1,198 @@
+---
+title: Fullscreen API
+slug: DOM/Using_fullscreen_mode
+translation_of: Web/API/Fullscreen_API
+---
+<div>{{DefaultAPISidebar("Fullscreen API")}}</div>
+
+<p>The <strong>Fullscreen API</strong> adds methods to present a specific {{DOMxRef("Element")}} (and its descendants) in full-screen mode, and to exit full-screen mode once it is no longer needed. This makes it possible to present desired content—such as an online game—using the user's entire screen, removing all browser user interface elements and other applications from the screen until full-screen mode is shut off.</p>
+
+<p>See the article <a href="/en-US/docs/Web/API/Fullscreen_API/Guide">Guide to the Fullscreen API</a> for details on how to use the API.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note:</strong> Support for this API varies somewhat across browsers, with many requiring vendor prefixes and/or not implementing the latest specification. See the {{anch("Browser compatibility")}} section below for details on support for this API. You may wish to consider using a library such as <a href="https://github.com/rafrex/fscreen">Fscreen</a> for vendor agnostic access to the Fullscreen API.</p>
+</div>
+
+<h2 id="Interfaces">Interfaces</h2>
+
+<p><em>The Fullscreen API has no interfaces of its own. Instead, it augments several other interfaces to add the methods, properties, and event handlers needed to provide full-screen functionality. These are listed in the following sections.</em></p>
+
+<h2 id="Methods">Methods</h2>
+
+<p>The Fullscreen API adds methods to the {{DOMxRef("Document")}} and {{DOMxRef("Element")}} interfaces to allow turning off and on full-screen mode.</p>
+
+<h3 id="Methods_on_the_Document_interface">Methods on the Document interface</h3>
+
+<dl>
+ <dt>{{DOMxRef("Document.exitFullscreen()")}}</dt>
+ <dd>Requests that the {{Glossary("user agent")}} switch from full-screen mode back to windowed mode. Returns a {{jsxref("Promise")}} which is resolved once full-screen mode has been completely shut off.</dd>
+</dl>
+
+<h3 id="Methods_on_the_Element_interface">Methods on the Element interface</h3>
+
+<dl>
+ <dt>{{DOMxRef("Element.requestFullscreen()")}}</dt>
+ <dd>Asks the user agent to place the specified element (and, by extension, its descendants) into full-screen mode, removing all of the browser's UI elements as well as all other applications from the screen. Returns a {{jsxref("Promise")}} which is resolved once full-screen mode has been activated.</dd>
+</dl>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>The {{DOMxRef("Document")}} interface provides properties that can be used to determine if full-screen mode is supported and available, and if full-screen mode is currently active, which element is using the screen.</em></p>
+
+<dl>
+ <dt>{{DOMxRef("DocumentOrShadowRoot.fullscreenElement")}}</dt>
+ <dd>The <code>fullscreenElement</code> property tells you the {{DOMxRef("Element")}} that's currently being displayed in full-screen mode on the DOM (or shadow DOM). If this is <code>null</code>, the document is not in full-screen mode.</dd>
+ <dt>{{DOMxRef("Document.fullscreenEnabled")}}</dt>
+ <dd>The <code>fullscreenEnabled</code> property tells you whether or not it is possible to engage full-screen mode. This is <code>false</code> if full-screen mode is not available for any reason (such as the <code>"fullscreen"</code> feature not being allowed, or full-screen mode not being supported).</dd>
+</dl>
+
+<h3 id="Event_handlers">Event handlers</h3>
+
+<p><em>The Fullscreen API defines two events which can be used to detect when full-screen mode is turned on and off, as well as when errors occur during the process of changing between full-screen and windowed modes. Event handlers for these events are available on the {{DOMxRef("Document")}} and {{DOMxRef("Element")}} interfaces.</em></p>
+
+<div class="blockIndicator note">
+<p><strong>Note:</strong> These event handler properties are <em>not</em> available as HTML content attributes. In other words, you cannot specify event handlers for {{Event("fullscreenchange")}} and {{Event("fullscreenerror")}} in the HTML content. They must be added by JavaScript code.</p>
+</div>
+
+<h4 id="Event_handlers_on_documents">Event handlers on documents</h4>
+
+<dl>
+ <dt>{{DOMxRef("Document.onfullscreenchange")}}</dt>
+ <dd>An event handler for the {{Event("fullscreenchange")}} event that's sent to a {{DOMxRef("Document")}} when that document is placed into full-screen mode, or when that document exits full-screen mode. This handler is called only when the entire document is presented in full-screen mode.</dd>
+ <dt>{{DOMxRef("Document.onfullscreenerror")}}</dt>
+ <dd>An event handler for the {{Event("fullscreenerror")}} event that gets sent to a {{DOMxRef("Document")}} when an error occurs while trying to enable or disable full-screen mode for the entire document.</dd>
+</dl>
+
+<h4 id="Event_handlers_on_elements">Event handlers on elements</h4>
+
+<dl>
+ <dt>{{DOMxRef("Element.onfullscreenchange")}}</dt>
+ <dd>An event handler which is called when the {{Event("fullscreenchange")}} event is sent to the element, indicating that the element has been placed into, or removed from, full-screen mode.</dd>
+ <dt>{{DOMxRef("Element.onfullscreenerror")}}</dt>
+ <dd>An event handler for the {{Event("fullscreenerror")}} event when sent to an element which has encountered an error while transitioning into or out of full-screen mode.</dd>
+</dl>
+
+<h3 id="Obsolete_properties">Obsolete properties</h3>
+
+<dl>
+ <dt>{{DOMxRef("Document.fullscreen")}} {{Deprecated_Inline}}</dt>
+ <dd>A Boolean value which is <code>true</code> if the document has an element currently being displayed in full-screen mode; otherwise, this returns <code>false</code>.
+ <div class="note"><strong>Note:</strong> Use the {{DOMxRef("Document.fullscreenElement", "fullscreenElement")}} property on the {{DOMxRef("Document")}} or {{DOMxRef("ShadowRoot")}} instead; if it's not <code>null</code>, then it's an {{DOMxRef("Element")}} currently being displayed in full-screen mode.</div>
+ </dd>
+</dl>
+
+<h2 id="Events" name="Events">Events</h2>
+
+<p><em>The Fullscreen API defines two events which can be used to detect when full-screen mode is turned on and off, as well as when errors occur during the process of changing between full-screen and windowed modes.</em></p>
+
+<dl>
+ <dt>{{Event("fullscreenchange")}}</dt>
+ <dd>Sent to a {{DOMxRef("Document")}} or {{DOMxRef("Element")}} when it transitions into or out of full-screen mode.</dd>
+ <dt>{{Event("fullscreenerror")}}</dt>
+ <dd>Sent to a <code>Document</code> or <code>Element</code> if an error occurs while attempting to switch it into or out of full-screen mode.</dd>
+</dl>
+
+<h2 id="Dictionaries">Dictionaries</h2>
+
+<dl>
+ <dt>{{DOMxRef("FullscreenOptions")}}</dt>
+ <dd>Provides optional settings you can specify when calling {{DOMxRef("Element.requestFullscreen", "requestFullscreen()")}}.</dd>
+</dl>
+
+<h2 id="Controlling_access">Controlling access</h2>
+
+<p>The availability of full-screen mode can be controlled using <a href="/en-US/docs/Web/HTTP/Feature_Policy">Feature Policy</a>. The full-screen mode feature is identified by the string <code>"fullscreen"</code>, with a default allow-list value of <code>"self"</code>, meaning that full-screen mode is permitted in top-level document contexts, as well as to nested browsing contexts loaded from the same origin as the top-most document.</p>
+
+<p>See <a href="/en-US/docs/Web/HTTP/Feature_Policy/Using_Feature_Policy">Using Feature Policy</a> to learn more about using Feature Policy to control access to an API.</p>
+
+<h2 id="Usage_notes" name="Usage_notes">Usage notes</h2>
+
+<p>Users can choose to exit full-screen mode simply by pressing the <kbd>ESC</kbd> (or <kbd>F11</kbd>) key, rather than waiting for the site or app to programmatically do so. Make sure you provide, somewhere in your user interface, appropriate user interface elements that inform the user that this option is available to them.</p>
+
+<div class="note">
+<p><strong>Note:</strong> Navigating to another page, changing tabs, or switching to another application using any application switcher (or <kbd>Alt</kbd>-<kbd>Tab</kbd>) will likewise exit full-screen mode.</p>
+</div>
+
+<h2 id="Example">Example</h2>
+
+<p>In this example, a video is presented in a web page. Pressing the <kbd>Return</kbd> or <kbd>Enter</kbd> key lets the user toggle between windowed and full-screen presentation of the video.</p>
+
+<p><a href="/samples/domref/fullscreen.html">View Live Examples</a></p>
+
+<h3 id="Watching_for_the_Enter_key">Watching for the Enter key</h3>
+
+<p>When the page is loaded, this code is run to set up an event listener to watch for the <kbd>Enter</kbd> key.</p>
+
+<pre class="brush: js">document.addEventListener("keypress", function(e) {
+  if (e.keyCode === 13) {
+    toggleFullScreen();
+  }
+}, false);
+</pre>
+
+<h3 id="Toggling_full-screen_mode">Toggling full-screen mode</h3>
+
+<p>This code is called by the event handler above when the user hits the <kbd>Enter</kbd> key.</p>
+
+<pre class="brush: js">function toggleFullScreen() {
+  if (!document.fullscreenElement) {
+      document.documentElement.requestFullscreen();
+  } else {
+    if (document.exitFullscreen) {
+      document.exitFullscreen();
+    }
+  }
+}</pre>
+
+<p>This starts by looking at the value of the {{DOMxRef("Document", "document")}}'s <code>fullscreenElement</code> attribute. In a real-world deployment, at this time, you'll want to check for prefixed versions of this (<code>mozFullScreenElement</code>, <code>msFullscreenElement</code>, or <code>webkitFullscreenElement</code>, for example). If the value is <code>null</code>, the document is currently in windowed mode, so we need to switch to full-screen mode; otherwise, it's the element that's currently in full-screen mode. Switching to full-screen mode is done by calling {{DOMxRef("Element.requestFullscreen()")}} on the {{HTMLElement("video")}} element.</p>
+
+<p>If full-screen mode is already active (<code>fullscreenElement</code> is not <code>null</code>), we call {{DOMxRef("Document.exitFullscreen", "exitFullscreen()")}} on the <code>document</code> to shut off full-screen mode.</p>
+
+<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("Fullscreen")}}</td>
+   <td>{{Spec2("Fullscreen")}}</td>
+   <td>Initial version.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>
+
+<h3 id="Document.fullscreen"><code>Document.fullscreen</code></h3>
+
+<div>
+
+
+<p>{{Compat("api.Document.fullscreen")}}</p>
+</div>
+
+<h3 id="Document.fullscreenEnabled"><code>Document.fullscreenEnabled</code></h3>
+
+<div>
+<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>
+
+<p>{{Compat("api.Document.fullscreenEnabled")}}</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Fullscreen_API">Using full-screen mode</a></li>
+ <li>{{DOMxRef("Element.requestFullscreen()")}}</li>
+ <li>{{DOMxRef("Document.exitFullscreen()")}}</li>
+ <li>{{DOMxRef("Document.fullscreen")}}</li>
+ <li>{{DOMxRef("Document.fullscreenElement")}}</li>
+ <li>{{CSSxRef(":fullscreen")}}, {{CSSxRef("::backdrop")}}</li>
+ <li>{{HTMLAttrXRef("allowfullscreen", "iframe")}}</li>
+</ul>
diff --git a/files/ru/dom/using_web_workers/index.html b/files/ru/dom/using_web_workers/index.html
new file mode 100644
index 0000000000..7503eccacb
--- /dev/null
+++ b/files/ru/dom/using_web_workers/index.html
@@ -0,0 +1,871 @@
+---
+title: Использование Web Workers
+slug: DOM/Using_web_workers
+tags:
+  - воркер
+  - поток
+translation_of: Web/API/Web_Workers_API/Using_web_workers
+---
+<div>{{DefaultAPISidebar("Web Workers API")}}</div>
+
+<p>Web Worker-ы предоставляют простое средство для запуска скриптов в фоновом потоке. Поток Worker'а может выполнять задачи без вмешательства в пользовательский интерфейс. К тому же, они могут осуществлять ввод/вывод, используя <code><a class="internal" href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIXMLHttpRequest">XMLHttpRequest</a></code> (хотя атрибуты <code>responseXML</code> и <code>channel</code> всегда будут равны null). Существующий Worker может отсылать сообщения JavaScript коду-создателю через обработчик событий, указанный этим кодом (и наоборот). Эта статья дает детальную инструкцию по использованию Web Workers.</p>
+
+<h2 id="Web_Workers_API">Web Workers API</h2>
+
+<p>Worker - это объект, создаваемый конструктором (например, {{domxref("Worker.Worker", "Worker()")}}) и запускающий именной JavaScript файл — этот файл содержит код, который будет выполнен в потоке Worker'а; объекты же Workers запускаются в другом глобальном контексте, отличающемся от текущего, - {{domxref("window")}}. Поэтому использование переменной {{domxref("window")}} для получения текущего глобального контекста (вместо {{domxref("window.self","self")}}) внутри {{domxref("Worker")}} вернет ошибку.</p>
+
+<p>Контекст Worker'а представлен объектом {{domxref("DedicatedWorkerGlobalScope")}} в случае выделенных Workers (обычные Workers используются одним скриптом; совместные Workers используют объект {{domxref("SharedWorkerGlobalScope")}}). Выделенный Worker доступен только из скрипта-родителя, в то время как совместные Workers могут быть доступны из нескольких сценариев.</p>
+
+<div class="note">
+<p><strong>Заметка</strong>: Смотрите <a href="/en-US/docs/Web/API/Web_Workers_API">страницу Web Workers API</a> для справки по Workers и прочие руководства.</p>
+</div>
+
+<p>Вы можете запускать любой код внутри потока worker-а, за некоторыми исключениями. Например, вы не можете прямо манипулировать DOM внутри worker-а, или использовать некоторые методы по умолчанию и свойства объекта {{domxref("window")}}. Но вы можете использовать большой набор опций, доступный под <code>Window</code>, включая <a href="/en-US/docs/Web/API/WebSockets_API">WebSockets</a>, и механизмы хранения данных, таких как <a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a> и относящихся только к Firefox OS <a href="/en-US/docs/Web/API/Data_Store_API">Data Store API</a>. Для дополнительной информации смотрите <a href="/en-US/docs/Web/API/Worker/Functions_and_classes_available_to_workers">Functions and classes available to workers</a>.</p>
+
+<p>Данные передаются между worker-ами и главным потоком через систему сообщений — обе стороны передают свои сообщения, используя метод <code>postMessage()</code> и отвечают на сообщения при помощи обработчика событий <code>onmessage</code> (сообщение хранится в аттрибуте data события {{event("Message")}}). Данные при этом копируются, а не делятся.</p>
+
+<p>Объекты Workers могут, в свою очередь, создавать новые объекты workers, и так до тех пор, пока всё работает в рамках текущей страницы. Плюс к этому, объекты workers могут использовать <a class="internal" href="/en-US/docs/Web/API/XMLHttpRequest"><code>XMLHttpRequest</code></a> для сетевого ввода/вывода, но есть исключение - атрибуты <code>responseXML</code> и <code>channel</code> объекта <code>XMLHttpRequest</code> всегда возвращают <code>null</code>.</p>
+
+<h2 id="Выделенные_Workers">Выделенные Workers</h2>
+
+<p>Как уже упоминалось выше, выделенный Worker доступен только для скрипта, который его вызвал. В этом разделе речь пойдет о JavaScript, который можно найти в нашем <a class="external external-icon" href="https://github.com/mdn/simple-web-worker">основном примере выделенного Worker</a> (<a class="external external-icon" href="http://mdn.github.io/simple-web-worker/">запустить скрипт</a>): этот пример позволяет ввести два числа для умножения. Эти числа отправляются в Worker, перемножаются, а результат возвращается на страницу и отображается.</p>
+
+<p>Этот пример достаточно тривиален, но для ознакомления с базовыми концепциями worker-ов мы решили его упростить. Более продвинутые детали описаны далее в статье.</p>
+
+<h3 id="Определение_поддержки_Worker">Определение поддержки Worker</h3>
+
+<p>Для большего контроля над ошибками и обратной совместимости, рекомендуется обернуть ваш код доступа к worker-у в следующий (<a href="https://github.com/mdn/simple-web-worker/blob/gh-pages/main.js">main.js</a>):</p>
+
+<pre class="brush: js notranslate">if (window.Worker) {
+
+  ...
+
+}</pre>
+
+<h3 id="Создание_выделенного_worker">Создание выделенного worker</h3>
+
+<p>Создание нового worker-а — это легко. Всё что вам нужно это вызвать конструктор {{domxref("Worker.Worker", "Worker()")}}, указав URI скрипта для выполнения в потоке worker-а (<a href="https://github.com/mdn/simple-web-worker/blob/gh-pages/main.js">main.js</a>):</p>
+
+<div style="overflow: hidden;">
+<pre class="brush: js notranslate">var myWorker = new Worker("worker.js");
+</pre>
+</div>
+
+<h3 id="Передача_сообщений_в_и_из_выделенного_worker">Передача сообщений в и из выделенного worker</h3>
+
+<p>Магия worker-ов происходит через {{domxref("Worker.postMessage", "postMessage()")}} метод и обработчик событий {{domxref("Worker.onmessage", "onmessage")}}. Когда вы хотите отправить сообщение в worker, вы доставляете сообщение к нему вот так (<a href="https://github.com/mdn/simple-web-worker/blob/gh-pages/main.js">main.js</a>):</p>
+
+<pre class="brush: js notranslate">first.onchange = function() {
+  myWorker.postMessage([first.value,second.value]);
+  console.log('Message posted to worker');
+}
+
+second.onchange = function() {
+  myWorker.postMessage([first.value,second.value]);
+  console.log('Message posted to worker');
+}</pre>
+
+<p>В приведенном фрагменте кода мы имеем два {{htmlelement("input")}} элемента, представленных переменными <code>first</code> и <code>second</code>; когда значение любой из переменных изменяется,<code> myWorker.postMessage([first.value,second.value])</code> используется для отправки обоих значений, представленных в виде массива, в worker. Посредством аргумента <code>message</code> возможна передача практически любых данных в worker.</p>
+
+<p>Внутри worker-a мы можем обрабатывать сообщения и отвечать на них при помощи добавления обработчика события <code>onmessage</code> подобным образом (<a href="https://github.com/mdn/simple-web-worker/blob/gh-pages/worker.js">worker.js</a>):</p>
+
+<pre class="brush: js notranslate">onmessage = function(e) {
+  console.log('Message received from main script');
+  var workerResult = 'Result: ' + (e.data[0] * e.data[1]);
+  console.log('Posting message back to main script');
+  postMessage(workerResult);
+}</pre>
+
+<p>Обработчик <code>onmessage</code> позволяет нам запустить некий код всякий раз, когда получен пакет с сообщением, доступным в атрибуте <code>data</code> события <code>message</code>. В примере выше мы просто перемножаем вместе две цифры, после чего используем <code>postMessage()</code> снова, чтобы отправить полученный результат назад в основной поток.</p>
+
+<p>Возвращаясь в основной поток, мы используем <code>onmessage</code> снова, чтобы отреагировать на сообщение, отправленное нам назад из worker-а:</p>
+
+<pre class="brush: js notranslate">myWorker.onmessage = function(e) {
+  result.textContent = e.data;
+  console.log('Message received from worker');
+}</pre>
+
+<p>В примере выше мы берём данные из события сообщения и ставим их как <code>textContent</code> у результирующего абзаца, чтобы показать пользователю результат этой калькуляции.</p>
+
+<p class="note"><strong>Заметка</strong>: Обратите внимание, что <font face="consolas, Liberation Mono, courier, monospace"><code>onmessage()</code>​ и <code>postmessage()</code> должны вызываться из экземпляра Worker в главном потоке, но не в потоке worker-а. Это связано с тем, что внутри потока worker-а, worker выступает в качестве глобального объекта.</font></p>
+
+<p class="note"><strong>Заметка</strong>: При передаче сообщения между основным потоком и потоком worker-а, оно копируется или "передается" (перемещается), не делится между потоками. Читайте {{anch("Transferring data to and from workers: further details")}} для более подробного объяснения.</p>
+
+<h3 id="Завершение_работы_worker-а">Завершение работы worker-а</h3>
+
+<p>Прекращение работы worker-а главного потока достигается методом {{domxref("Worker", "terminate")}}:</p>
+
+<pre class="brush: js notranslate">myWorker.terminate();</pre>
+
+<p>Поток worker-а немедленно уничтожается.</p>
+
+<h3 id="Обработка_ошибок">Обработка ошибок</h3>
+
+<p>При ошибке во время выполнения worker-а, вызывается его обработчик событий <code>onerror</code>. Он принимает событие <code>error</code>, которое реализует интерфейс <code>ErrorEvent</code>.</p>
+
+<p>Событие не всплывает и его можно отменить. Для отмены действия по умолчанию, worker может вызвать метод <a class="internal" href="/en-US/docs/Web/API/Event/preventDefault"> <code>preventDefault()</code> </a> в обработчике события ошибки.</p>
+
+<p>У события ошибки есть три поля, которые представляют интерес:</p>
+
+<dl>
+ <dt><code>message</code></dt>
+ <dd>Сообщение об ошибке в читаемом виде.</dd>
+ <dt><code>filename</code></dt>
+ <dd>Имя файла со скриптом, в котором ошибка произошла.</dd>
+ <dt><code>lineno</code></dt>
+ <dd>Номер строки в файле, в котором произошла ошибка.</dd>
+</dl>
+
+<h3 id="Создание_subworkers">Создание subworkers</h3>
+
+<p>Worker-ы могут запускать другие worker-ы. Так называемые sub-worker'ы должны быть того же происхождения (same-origin), что и родительский документ. Кроме того, URI для subworker-ов рассчитываются относительно родительского worker'а, а не родительского документа. Это позволяет worker-ам проще следить за тем, где находятся их зависимости.</p>
+
+<h3 id="Импорт_скриптов_и_библиотек">Импорт скриптов и библиотек</h3>
+
+<p>Worker потоки имеют доступ к глобальной функции, <code>importScripts()</code>, которая позволяет импортировать скрипты с того же домена в их область видимости. Функция принимает ноль и более URI параметров, как список ссылок на ресурсы для импорта; все нижеприведенные примеры верны:</p>
+
+<pre class="brush: js notranslate">importScripts();                        /* imports nothing */
+importScripts('foo.js');                /* imports just "foo.js" */
+importScripts('foo.js', 'bar.js');      /* imports two scripts */
+</pre>
+
+<p>Браузер загружает каждый указанный скрипт и исполняет его. Любые глобальные объекты, создаваемые каждым скриптом могут быть использованы в worker'е. Если скрипт не удалось загрузить, будет брошена ошибка <code>NETWORK_ERROR</code>, и последующий код не будет исполнен. Тем не менее код, исполненный ранее (включая отложенный при помощи {{domxref("window.setTimeout()")}}) останется функционален. Объявления функций идущие <strong>после</strong> вызова метода <code>importScripts()</code> также будут доступны, т.к. объявления функций всегда обрабатываются перед остальным кодом.</p>
+
+<div class="note"><strong>Заметка</strong>: Скрипты могут быть загружены в произвольном порядке, но их исполнение будет в  том порядке, в котором имена файлов были переданы в <code>importScripts()</code>. Функция выполняется синхронно; <code>importScripts()</code> не вернет исполнение, пока все скрипты не будут загружены и исполнены.</div>
+
+<h2 id="Разделяемые_worker-ы_Shared_workers">Разделяемые worker-ы (Shared workers)</h2>
+
+<p>Разделяемый worker доступен нескольким разным скриптам — даже если они находятся в разных окнах, фреймах или даже worker-ах. В этом разделе мы обсудим JavaScript, который можно найти в нашем <a class="external external-icon" href="https://github.com/mdn/simple-shared-worker">базовом примере разделяемых worker-ов</a> (<a class="external external-icon" href="http://mdn.github.io/simple-shared-worker/">запустить разделяемый worker</a>): Он очень похож на базовый пример выделенных worker-ов, за исключением двух функций, которые доступны из разных скриптовых файлов: <em>умножение двух чисел</em> или <em>возведение числа в степень.</em> Оба скрипта используют один и тот же worker для необходимых вычислений.</p>
+
+<p>Здесь мы сосредоточимся на разнице между выделенными и раздялемыми worker-ами. Обратите внимание, что в данном примере есть две HTML страницы с JavaScript кодом, которые используют один и тот же файл worker-а.</p>
+
+<div class="note">
+<p><strong>Заметка</strong>: Если разделяемый worker может быть доступен из нескольких контекстов просмотра, то все они должны иметь одно и то же происхождение (одни и те же протокол, хост и порт).</p>
+</div>
+
+<div class="note">
+<p><strong>Заметка: </strong>В Firefox разделяемый worker не может быть использован совместно документами в приватном и неприватном окне ({{bug(1177621)}}).</p>
+</div>
+
+<h3 id="Создание_разделяемого_worker-а">Создание разделяемого worker-а</h3>
+
+<p>Запуск разделяемого worker-а очень похож на запуск выделенного worker-а, но используется другой конструктор (см. <a href="https://github.com/mdn/simple-shared-worker/blob/gh-pages/index.html">index.html</a> и <a href="http://mdn.github.io/simple-shared-worker/index2.html">index2.html</a>) — в каждом документе необходимо поднять worker, для этого следует написать такой код:</p>
+
+<pre class="brush: js notranslate">var myWorker = new SharedWorker("worker.js");</pre>
+
+<p>Большая разница заключается в том, что с разделяемым worker-ом необходимо взаимодействовать через объект <code>port</code> — явно открыв порт, с помощью которого скрипты могут взаимодействовать с worker-ом (в случае выделенного worker-а это происходит неявно).</p>
+
+<p>Соединение с портом должно быть осуществлено либо неявно, используя обработчик событие <code>onmessage</code>, либо явно, вызвав метод <strong>start()</strong> перед тем, как отправлять любые сообщения. Вызов метода start() необходим только тогда, когда подписка на событие реализована через метод <code>addEventListener()</code>.</p>
+
+<div class="blockIndicator note">
+<p><strong>Заметка: </strong>Когда используется метод <code>start()</code> чтобы открыть соединение с портом, его необходимо вызывать и в родительском потоке и в потоке worker-а, если необходима двухсторонняя коммуникация.</p>
+</div>
+
+<pre class="brush: js notranslate">myWorker.port.start();  // в родительском потоке</pre>
+
+<pre class="brush: js notranslate">port.start();  // в потоке worker-а, где переменная <code>port</code> является ссылкой на порт</pre>
+
+<h3 id="Передача_сообщений_виз_разделяемого_worker-а">Передача сообщений в/из разделяемого worker-а</h3>
+
+<p>Теперь сообщения могут быть отправлены worker-у, как и прежде, но метод <code>postMessage()</code> должен вызываться из объекта <code>port</code> (еще раз, вы можете увидеть схожие кострукции в <a href="https://github.com/mdn/simple-shared-worker/blob/gh-pages/multiply.js">multiply.js</a> и <a href="https://github.com/mdn/simple-shared-worker/blob/gh-pages/square.js">square.js</a>):</p>
+
+<pre class="brush: js notranslate">squareNumber.onchange = function() {
+  myWorker.port.postMessage([squareNumber.value,squareNumber.value]);
+  console.log('Message posted to worker');
+}</pre>
+
+<p>Теперь на стороне worker-а. Здесь код немного сложнее (<a href="https://github.com/mdn/simple-shared-worker/blob/gh-pages/worker.js">worker.js</a>):</p>
+
+<pre class="brush: js notranslate">self.addEventListener('connect', function(e) { // требуется addEventListener()
+  var port = e.ports[0];
+  port.onmessage = function(e) {
+    var workerResult = 'Result: ' + (e.data[0] * e.data[1]);
+    port.postMessage(workerResult);
+  }
+  <s>port.start();</s>  // вызов необязательный, т.к. используется обработчик событий onmessage
+});</pre>
+
+<p>Первый этап состоит из события <code>onconnect</code>. Оно срабатывает, когда произошло подключение (т.е. когда в родительском потоке отработало событие <code>onmessage</code> или когда в нем был вызван метод <code>start()</code>).</p>
+
+<p>Мы используем атрибут события <code>ports</code>, чтобы получить порт и сохранить его в переменной.</p>
+
+<p>Второй этап — это обработчик события <code>message</code> на сохраненном порту. Он нужен для подсчета и вывода результата вычисления в основной поток. Установка обработчика <code>message</code> в потоке worker-а также открывает подключение к родительскому потоку, поэтому вызов на <code>port.start()</code> на самом деле не нужен (см. код обработчика <code>onconnect</code>).</p>
+
+<p>Последний этап — возвращение в основной поток и обработка сообщения от worker‑а (еще раз, вы можете увидеть схожие конструкции в <a href="https://github.com/mdn/simple-shared-worker/blob/gh-pages/multiply.js">multiply.js</a> и <a href="https://github.com/mdn/simple-shared-worker/blob/gh-pages/square.js">square.js</a>):</p>
+
+<pre class="brush: js notranslate">myWorker.port.onmessage = function(e) {
+  result2.textContent = e.data[0];
+  console.log('Message received from worker');
+}</pre>
+
+<p>Когда сообщение приходит через порт от worker-а, мы проверяем тип результата вычислений и затем вставляем его в соответствующий абзац.</p>
+
+<h2 id="О_потоковой_безопасности">О потоковой безопасности</h2>
+
+<p>Интерфейс {{domxref("Worker")}} создаёт настоящие потоки на уровне операционной системы, что может смутить опытных программистов и навести их на мысли о проблемах, связанных с конфликтом доступа к общим объектам.</p>
+
+<p>На самом деле создать такие проблемы достаточно сложно, так как worker-ы жёстко контролируются. У них нет доступа к непотокобезопасным объектам DOM, а все данные между потоками передаются в качестве сериализованных объектов. Придётся очень постараться, чтобы вызывать проблемы потокобезопасности в вашем коде.</p>
+
+<h2 id="Передача_данных_в_и_из_worker-ов_другие_детали">Передача данных в и из worker-ов: другие детали</h2>
+
+<p>Передача данных между главной страницей и worker-ом происходит путем копирования, а не передачи по ссылке. Объекты сериализуются при передаче и затем десериализуются на другом конце. Страница и worker не используют совместно одни и те же экземпляры, для каждого создается свой. Большинство браузеров реализуют это структурированным клонированием (<a href="/en-US/docs/Web/Guide/API/DOM/The_structured_clone_algorithm">structured cloning</a>).</p>
+
+<p>Для иллюстрации этого мы создадим функцию <code>emulateMessage()</code>, которая будет имитировать поведение значения, которое клонируется, но не используется совместно при переходе от worker-а к главной странице или наоборот.</p>
+
+<pre class="brush: js notranslate">function emulateMessage (vVal) {
+    return eval("(" + JSON.stringify(vVal) + ")");
+}
+
+// Tests
+
+// test #1
+var example1 = new Number(3);
+console.log(typeof example1); // object
+console.log(typeof emulateMessage(example1)); // number
+
+// test #2
+var example2 = true;
+console.log(typeof example2); // boolean
+console.log(typeof emulateMessage(example2)); // boolean
+
+// test #3
+var example3 = new String("Hello World");
+console.log(typeof example3); // object
+console.log(typeof emulateMessage(example3)); // string
+
+// test #4
+var example4 = {
+    "name": "John Smith",
+    "age": 43
+};
+console.log(typeof example4); // object
+console.log(typeof emulateMessage(example4)); // object
+
+// test #5
+function Animal (sType, nAge) {
+    this.type = sType;
+    this.age = nAge;
+}
+var example5 = new Animal("Cat", 3);
+alert(example5.constructor); // Animal
+alert(emulateMessage(example5).constructor); // Object</pre>
+
+<p>Значения, которые клонируются и совместно не используются, называются сообщениями. Как вы, возможно, знаете, сообщения могут быть отправлены в главную страницу и из нее, используя <code>postMessage()</code>, и {{domxref("MessageEvent.data", "data")}}, содержа данные, передаваемые из worker-а.</p>
+
+<p><strong>example.html</strong>: (главная страница):</p>
+
+<pre class="brush: js notranslate">var myWorker = new Worker("my_task.js");
+
+myWorker.onmessage = function (oEvent) {
+  console.log("Worker said : " + oEvent.data);
+};
+
+myWorker.postMessage("ali");</pre>
+
+<p><strong>my_task.js</strong> (worker):</p>
+
+<pre class="brush: js notranslate">postMessage("I\'m working before postMessage(\'ali\').");
+
+onmessage = function (oEvent) {
+  postMessage("Hi " + oEvent.data);
+};</pre>
+
+<p>Алгоритм структурированного клонирования может принять JSON и некоторые вещи, которые JSON не может принять, например, циклические ссылки.</p>
+
+<h3 id="Примеры_передачи_данных">Примеры передачи данных</h3>
+
+<h4 id="Пример_1_Расширенная_передача_JSON_данных_и_создание_системы_коммутации">Пример #1: Расширенная передача JSON данных и создание системы коммутации</h4>
+
+<p>Если вам нужно передать сложные данные и вызвать множество различных функций как на главной странице, так и в worker-е, вы можете создать следующую систему.</p>
+
+<p>В первую очередь мы создаем класс QueryableWorker, который принимает url worker-а, стандартный обработчик событий (defaultListener) и обработчик ошибок. Этот класс будет отслеживать всех обработчиков и поможет нам общаться с воркером.</p>
+
+<pre class="brush: js notranslate"><code>function QueryableWorker(url, defaultListener, onError) {
+    var instance = this,
+        worker = new Worker(url),
+        listeners = {};
+
+    this.defaultListener = defaultListener || function() {};
+
+    if (onError) {worker.onerror = onError;}
+
+    this.postMessage = function(message) {
+        worker.postMessage(message);
+    }
+
+    this.terminate = function() {
+        worker.terminate();
+    }
+}</code>
+</pre>
+
+<p>Затем мы добавляем методы добавления/удаления обработчиков.</p>
+
+<pre class="brush: js notranslate"><code>this.addListeners = function(name, listener) {
+    listeners[name] = listener;
+}
+
+this.removeListeners = function(name) {
+    delete listeners[name];
+}</code>
+</pre>
+
+<p>Здесь мы создадим у worker-а два простых события для примера: получение разницы двух чисел и создание оповещения через три секунды. Но сначала нам нужно реализовать метод sendQuery, который проверит есть ли вообще у worker-а обработчик, который мы собираемся вызвать.</p>
+
+<pre class="brush: js notranslate"><code>/*
+  Эта функция принимает по крайней мере один аргумент: имя метода, который мы хотим вызвать.
+  Далее мы можем передать методу необходимые ему аргументы.
+ */
+this.sendQuery = function() {
+    if (arguments.length &lt; 1) {
+         throw new TypeError('QueryableWorker.sendQuery takes at least one argument');
+         return;
+    }
+    worker.postMessage({
+        'queryMethod': arguments[0],
+        'queryArguments': Array.prototype.slice.call(arguments, 1)
+    });
+}</code>
+</pre>
+
+<p>Завершим QueryableWorker методом <code>onmessage</code>.  Если worker имеет соответствующий метод, который мы запросили, он также должен вернуть соответствующий обработчик и аргументы, которые нам нужны. Останется лишь найти его в <code>listeners</code>:</p>
+
+<pre class="brush: js notranslate"><code>worker.onmessage = function(event) {
+    if (event.data instanceof Object &amp;&amp;
+        event.data.hasOwnProperty('queryMethodListener') &amp;&amp;
+        event.data.hasOwnProperty('queryMethodArguments')) {
+        listeners[event.data.queryMethodListener].apply(instance, event.data.queryMethodArguments);
+    } else {
+        this.defaultListener.call(instance, event.data);
+    }
+}</code>
+</pre>
+
+<p>Теперь к самому worker-у. Сначала следует определить эти два простых метода:</p>
+
+<pre class="brush: js notranslate"><code>var queryableFunctions = {
+    getDifference: function(a, b) {
+        reply('printStuff', a - b);
+    },
+    waitSomeTime: function() {
+        setTimeout(function() {
+            reply('doAlert', 3, 'seconds');
+        }, 3000);
+    }
+}
+
+function reply() {
+    if (arguments.length &lt; 1) {
+        throw new TypeError('reply - takes at least one argument');
+        return;
+    }
+    postMessage({
+        queryMethodListener: arguments[0],
+        queryMethodArguments: Array.prototype.slice.call(arguments, 1)
+    });
+}
+
+/* This method is called when main page calls QueryWorker's postMessage method directly*/
+function defaultReply(message) {
+    // do something
+}</code>
+</pre>
+
+<p>И <code>onmessage</code>:</p>
+
+<pre class="brush: js notranslate"><code>onmessage = function(event) {
+    if (event.data instanceof Object &amp;&amp;
+        event.data.hasOwnProperty('queryMethod') &amp;&amp;
+        event.data.hasOwnProperty('queryMethodArguments')) {
+        queryableFunctions[event.data.queryMethod]
+            .apply(self, event.data.queryMethodArguments);
+    } else {
+        defaultReply(event.data);
+    }
+}</code></pre>
+
+<p>Полный код примера:</p>
+
+<p><strong>example.html</strong> (основная страница):</p>
+
+<pre class="brush: html notranslate"><code>&lt;!doctype html&gt;
+  &lt;html&gt;
+    &lt;head&gt;
+      &lt;meta charset="UTF-8"  /&gt;
+      &lt;title&gt;MDN Example - Queryable worker&lt;/title&gt;
+    &lt;script type="text/javascript"&gt;
+    /*
+      QueryableWorker instances methods:
+        * sendQuery(queryable function name, argument to pass 1, argument to pass 2, etc. etc): calls a Worker's queryable function
+        * postMessage(string or JSON Data): see Worker.prototype.postMessage()
+        * terminate(): terminates the Worker
+        * addListener(name, function): adds a listener
+        * removeListener(name): removes a listener
+      QueryableWorker instances properties:
+        * defaultListener: the default listener executed only when the Worker calls the postMessage() function directly
+     */
+    function QueryableWorker(url, defaultListener, onError) {
+      var instance = this,
+      worker = new Worker(url),
+      listeners = {};
+
+      this.defaultListener = defaultListener || function() {};
+
+      if (onError) {worker.onerror = onError;}
+
+      this.postMessage = function(message) {
+        worker.postMessage(message);
+      }
+
+      this.terminate = function() {
+        worker.terminate();
+      }
+
+      this.addListener = function(name, listener) {
+        listeners[name] = listener;
+      }
+
+      this.removeListener = function(name) {
+        delete listeners[name];
+      }
+
+      /*
+        This functions takes at least one argument, the method name we want to query.
+        Then we can pass in the arguments that the method needs.
+      */
+      this.sendQuery = function() {
+        if (arguments.length &lt; 1) {
+          throw new TypeError('QueryableWorker.sendQuery takes at least one argument');
+          return;
+        }
+        worker.postMessage({
+          'queryMethod': arguments[0],
+          'queryMethodArguments': Array.prototype.slice.call(arguments, 1)
+        });
+      }
+
+      worker.onmessage = function(event) {
+        if (event.data instanceof Object &amp;&amp;
+          event.data.hasOwnProperty('queryMethodListener') &amp;&amp;
+          event.data.hasOwnProperty('queryMethodArguments')) {
+          listeners[event.data.queryMethodListener].apply(instance, event.data.queryMethodArguments);
+        } else {
+          this.defaultListener.call(instance, event.data);
+        }
+      }
+    }
+
+    // your custom "queryable" worker
+    var myTask = new QueryableWorker('my_task.js');
+
+    // your custom "listeners"
+    myTask.addListener('printStuff', function (result) {
+      document.getElementById('firstLink').parentNode.appendChild(document.createTextNode('The difference is ' + result + '!'));
+    });
+
+    myTask.addListener('doAlert', function (time, unit) {
+      alert('Worker waited for ' + time + ' ' + unit + ' :-)');
+    });
+&lt;/script&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  &lt;ul&gt;
+    &lt;li&gt;&lt;a id="firstLink" href="javascript:myTask.sendQuery('getDifference', 5, 3);"&gt;What is the difference between 5 and 3?&lt;/a&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;a href="javascript:myTask.sendQuery('waitSomeTime');"&gt;Wait 3 seconds&lt;/a&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;a href="javascript:myTask.terminate();"&gt;terminate() the Worker&lt;/a&gt;&lt;/li&gt;
+  &lt;/ul&gt;
+&lt;/body&gt;
+&lt;/html&gt;</code></pre>
+
+<p><strong>my_task.js</strong> (код worker-а):</p>
+
+<pre class="brush: js notranslate"><code>var queryableFunctions = {
+  // пример #1: получить разницу между двумя числами
+  getDifference: function(nMinuend, nSubtrahend) {
+      reply('printStuff', nMinuend - nSubtrahend);
+  },
+  // пример #2: подождать три секунды
+  waitSomeTime: function() {
+      setTimeout(function() { reply('doAlert', 3, 'seconds'); }, 3000);
+  }
+};
+
+// системные функции
+
+function defaultReply(message) {
+  // your default PUBLIC function executed only when main page calls the queryableWorker.postMessage() method directly
+  // do something
+}
+
+function reply() {
+  if (arguments.length &lt; 1) { throw new TypeError('reply - not enough arguments'); return; }
+  postMessage({ 'queryMethodListener': arguments[0], 'queryMethodArguments': Array.prototype.slice.call(arguments, 1) });
+}
+
+onmessage = function(oEvent) {
+  if (oEvent.data instanceof Object &amp;&amp; oEvent.data.hasOwnProperty('queryMethod') &amp;&amp; oEvent.data.hasOwnProperty('queryMethodArguments')) {
+    queryableFunctions[oEvent.data.queryMethod].apply(self, oEvent.data.queryMethodArguments);
+  } else {
+    defaultReply(oEvent.data);
+  }
+};</code>
+</pre>
+
+<p>Можно переключать содержимое каждой главной страницы -&gt; worker и worker -&gt; сообщение главной страницы. И имена свойств "queryMethod", "queryMethodListeners", "queryMethodArguments" могут быть любыми пока они согласуются с <code>QueryableWorker</code> и <code>worker</code>.</p>
+
+<h3 id="Передача_данных_с_помощью_передачи_владения_передаваемые_объекты">Передача данных с помощью передачи владения (передаваемые объекты)</h3>
+
+<p>Google Chrome 17+ and Firefox 18+ имеют дополнительную возможность передачи определенных типов объектов (передаваемые объекты реализующие {{domxref("Transferable")}} интерфейс) к или из worker-а с высокой призводительностью. Эти объекты передаются из одного контекста в другой без операций копирования, что приводит к значительному повышению производительности при отправке больших наборов данных. Думайте об этом как о передаче по ссылке в мире C/C++. Однако в отличии от передачи по ссылке, "версия" из вызывающего контекста больше недоступна после передачи. Владельцем становится новый контекст.  Для примера, после передачи {{domxref("ArrayBuffer")}} из главной страницы к worker-у,  исходный {{domxref("ArrayBuffer")}} очищается и более недоступен для использования.  Его содержание (в буквальном смысле) переносится в рабочий контекст.</p>
+
+<pre class="brush: js notranslate">// Create a 32MB "file" and fill it.
+var uInt8Array = new Uint8Array(1024*1024*32); // 32MB
+for (var i = 0; i &lt; uInt8Array.length; ++i) {
+  uInt8Array[i] = i;
+}
+
+worker.postMessage(uInt8Array.buffer, [uInt8Array.buffer]);
+</pre>
+
+<div class="note">
+<p><strong>Заметка</strong>: Для дополнительной информации о передаваемых объектах, производительности и поддержки для этого метода, читайте  <a href="http://updates.html5rocks.com/2011/12/Transferable-Objects-Lightning-Fast">Transferable Objects: Lightning Fast!</a> на HTML5 Rocks.</p>
+</div>
+
+<h2 id="Встроенные_worker-ы">Встроенные worker-ы</h2>
+
+<p>Не существует утвержденного способа встроить код worker-а в рамках веб-страницы, как элемент {{HTMLElement("script")}} делает для обычных скриптов. Но элемент {{HTMLElement("script")}}, который не имеет аттрибута <code>src</code> и аттрибута  <code>type</code>, которому не назначен выполняемый MIME type, можно считать блоком данных для использования JavaScript. Блок данных "Data blocks" — это более общее свойство HTML5, может содержать любые текстовые данные. Так, worker может быть встроен следующим образом:</p>
+
+<pre class="brush: html line-numbers language-html notranslate"><code class="language-html"><span class="doctype token">&lt;!DOCTYPE html&gt;</span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>html</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>head</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>meta</span> <span class="attr-name token">charset</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>UTF-8<span class="punctuation token">"</span></span> <span class="punctuation token">/&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>title</span><span class="punctuation token">&gt;</span></span>MDN Example - Embedded worker<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>title</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>script</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text/js-worker<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="script token"><span class="language-javascript token">
+  <span class="comment token">// Этот script НЕ БУДЕТ анализироваться JS движками, потому что  его MIME-тип text/js-worker.</span>
+  <span class="keyword token">var</span> myVar <span class="operator token">=</span> <span class="string token">'Hello World!'</span><span class="punctuation token">;</span>
+  <span class="comment token">// </span></span></span></code>Остальная часть кода вашего воркера идет сюда.<code class="language-html"><span class="script token"><span class="language-javascript token">
+</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>script</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>script</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text/javascript<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="script token"><span class="language-javascript token">
+  <span class="comment token">// Этот script БУДЕТ проанализирован JS движкам, потому что его MIME-тип text/javascript.</span>
+  <span class="keyword token">function</span> <span class="function token">pageLog</span><span class="punctuation token">(</span><span class="parameter token">sMsg</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="comment token">// Use a fragment: browser will only render/reflow once.</span>
+    <span class="keyword token">var</span> oFragm <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createDocumentFragment</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    oFragm<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>document<span class="punctuation token">.</span><span class="function token">createTextNode</span><span class="punctuation token">(</span>sMsg<span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    oFragm<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">'br'</span><span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">'#logDisplay'</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>oFragm<span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>script</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>script</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text/js-worker<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="script token"><span class="language-javascript token">
+  <span class="comment token">// Этот script НЕ БУДЕТ анализироваться JS движками, потому что его MIME-тип text/js-worker.</span>
+  <span class="function function-variable token">onmessage</span> <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="parameter token">oEvent</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="function token">postMessage</span><span class="punctuation token">(</span>myVar<span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span><span class="punctuation token">;</span>
+  <span class="comment token">// </span></span></span></code>Остальная часть кода вашего воркера идет сюда.<code class="language-html"><span class="script token"><span class="language-javascript token">
+</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>script</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>script</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text/javascript<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="script token"><span class="language-javascript token">
+  <span class="comment token">// Этот script БУДЕТ проанализирован JS движкам, потому что его MIME-тип text/javascript.</span>
+
+  <span class="comment token">// В прошлом...:</span>
+  <span class="comment token">// blob builder существовал</span>
+  <span class="comment token">// ... но теперь мы используем Blob...:</span>
+  <span class="keyword token">var</span> blob <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Blob</span><span class="punctuation token">(</span><span class="class-name token">Array</span><span class="punctuation token">.</span>prototype<span class="punctuation token">.</span><span class="function token">map</span><span class="punctuation token">.</span><span class="function token">call</span><span class="punctuation token">(</span>document<span class="punctuation token">.</span><span class="function token">querySelectorAll</span><span class="punctuation token">(</span><span class="string token">'script[type=\'text\/js-worker\']'</span><span class="punctuation token">)</span><span class="punctuation token">,</span> <span class="keyword token">function</span> <span class="punctuation token">(</span><span class="parameter token">oScript</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> <span class="keyword token">return</span> oScript<span class="punctuation token">.</span>textContent<span class="punctuation token">;</span> <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">,</span><span class="punctuation token">{</span>type<span class="punctuation token">:</span> <span class="string token">'text/javascript'</span><span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+  <span class="comment token">// Создание нового свойства document.worker, содержащего все наши "text/js-worker" скрипты.</span>
+  document<span class="punctuation token">.</span>worker <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Worker</span><span class="punctuation token">(</span>window<span class="punctuation token">.</span><span class="constant token">URL</span><span class="punctuation token">.</span><span class="function token">createObjectURL</span><span class="punctuation token">(</span>blob<span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+  document<span class="punctuation token">.</span>worker<span class="punctuation token">.</span><span class="function function-variable token">onmessage</span> <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="parameter token">oEvent</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="function token">pageLog</span><span class="punctuation token">(</span><span class="string token">'Received: '</span> <span class="operator token">+</span> oEvent<span class="punctuation token">.</span>data<span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span><span class="punctuation token">;</span>
+
+  <span class="comment token">// Запуск воркера.</span>
+  window<span class="punctuation token">.</span><span class="function function-variable token">onload</span> <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> document<span class="punctuation token">.</span>worker<span class="punctuation token">.</span><span class="function token">postMessage</span><span class="punctuation token">(</span><span class="string token">''</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="punctuation token">}</span><span class="punctuation token">;</span>
+</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>script</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>head</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>body</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>logDisplay<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>body</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>html</span><span class="punctuation token">&gt;</span></span></code>
+</pre>
+
+<div id="logDisplay">Встраиваемый worker теперь внесен в новое custom свойство <code>document.worker</code></div>
+
+<div></div>
+
+<div>Также стоит отметить, что вы также можете преобразовать функцию в BLOB-объект, а затем сгенерировать URL объекта из этого BLOB-объекта. Например:</div>
+
+<pre class="notranslate">function fn2workerURL(fn) {
+  var blob = new Blob(['('+fn.toString()+')()'], {type: 'application/javascript'})
+  return URL.createObjectURL(blob)
+}
+</pre>
+
+<h2 id="Другие_примеры">Другие примеры</h2>
+
+<p>В этой секции представлено еще несколько примеров как использовать worker-ы.</p>
+
+<h3 id="Выполнение_вычислений_в_фоне">Выполнение вычислений в фоне</h3>
+
+<p>Worker-ы в основном полезны для того, чтобы позволить вашему коду выполнять ресурсоемкие вычисления, не блокируя поток пользовательского интерфейса. В этом примере, worker используется для вычисления числа Фибоначчи.</p>
+
+<h4 id="Код_JavaScript">Код JavaScript</h4>
+
+<p>Следующий код JavaScript хранится в файле "fibonacci.js", на который ссылается HTML в следующем разделе.</p>
+
+<pre class="brush: js notranslate">var results = [];
+
+function resultReceiver(event) {
+  results.push(parseInt(event.data));
+  if (results.length == 2) {
+    postMessage(results[0] + results[1]);
+  }
+}
+
+function errorReceiver(event) {
+  throw event.data;
+}
+
+onmessage = function(event) {
+  var n = parseInt(event.data);
+
+  if (n == 0 || n == 1) {
+    postMessage(n);
+    return;
+  }
+
+  for (var i = 1; i &lt;= 2; i++) {
+    var worker = new Worker("fibonacci.js");
+    worker.onmessage = resultReceiver;
+    worker.onerror = errorReceiver;
+    worker.postMessage(n - i);
+  }
+ };</pre>
+
+<p>Worker устанавливает свойство <code>onmessage</code> для функции,  которая будет получать сообщения, отправленные при вызове <code>postMessage()</code> рабочего объекта (обратите внимание, что это отличается от определения глобальной <em>переменной</em> с таким именем или определения <em>функции</em> с таким именем. <code>var onmessage</code> и <code>function onmessage</code> будет определять глобальные свойства с этими именами , но они не будут регистрировать функцию для получения сообщений, отправленных веб-страницей, которая создала worker). Это запускает рекурсию, порождая новые копии для обработки каждой итерации вычисления.</p>
+
+<h4 id="HTML_код">HTML код</h4>
+
+<pre class="brush: html line-numbers language-html notranslate"><code class="language-html"><span class="doctype token">&lt;!DOCTYPE html&gt;</span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>html</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>head</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>meta</span> <span class="attr-name token">charset</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>UTF-8<span class="punctuation token">"</span></span>  <span class="punctuation token">/&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>title</span><span class="punctuation token">&gt;</span></span>Test threads fibonacci<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>title</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>head</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>body</span><span class="punctuation token">&gt;</span></span>
+
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>result<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>script</span> <span class="attr-name token">language</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>javascript<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="script token"><span class="language-javascript token">
+
+    <span class="keyword token">var</span> worker <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Worker</span><span class="punctuation token">(</span><span class="string token">'fibonacci.js'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+    worker<span class="punctuation token">.</span><span class="function function-variable token">onmessage</span> <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="parameter token">event</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'result'</span><span class="punctuation token">)</span><span class="punctuation token">.</span>textContent <span class="operator token">=</span> event<span class="punctuation token">.</span>data<span class="punctuation token">;</span>
+      <span class="function token">dump</span><span class="punctuation token">(</span><span class="string token">'Got: '</span> <span class="operator token">+</span> event<span class="punctuation token">.</span>data <span class="operator token">+</span> <span class="string token">'\n'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="punctuation token">}</span><span class="punctuation token">;</span>
+
+    worker<span class="punctuation token">.</span><span class="function function-variable token">onerror</span> <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="parameter token">error</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      <span class="function token">dump</span><span class="punctuation token">(</span><span class="string token">'Worker error: '</span> <span class="operator token">+</span> error<span class="punctuation token">.</span>message <span class="operator token">+</span> <span class="string token">'\n'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+      <span class="keyword token">throw</span> error<span class="punctuation token">;</span>
+    <span class="punctuation token">}</span><span class="punctuation token">;</span>
+
+    worker<span class="punctuation token">.</span><span class="function token">postMessage</span><span class="punctuation token">(</span><span class="string token">'5'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+  </span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>script</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>body</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>html</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<p>Веб-страница создает элемент <code>div</code> с ID <code>result</code> , который используется для отображения результата, а затем порождает worker. После порождения worker-а, обработчик <code>onmessage</code> настроен для отображения результатов путем установки содержимого элемента <code>div</code>, и обработчик <code>onerror</code> настроен на <a href="/en-US/docs/Debugging_JavaScript#dump.28.29">выброс</a> сообщения об ошибке.</p>
+
+<p>Наконец, сообщение отправляется worker-у, чтобы запустить его.</p>
+
+<p><a class="external" href="/samples/workers/fibonacci">Попробуйте этот пример</a>.</p>
+
+<h3 id="Выполнение_веб_IO_в_фоне">Выполнение веб I/O в фоне</h3>
+
+<p>Вы можете найти пример этого в статье <a class="internal" href="/en-US/docs/Using_workers_in_extensions">Использование worker-ов в расширениях</a>.</p>
+
+<h3 id="Разделение_задач_между_множественными_worker-ами">Разделение задач между множественными worker-ами</h3>
+
+<p>Поскольку многоядерные компьютеры становятся все более распространенными, часто бывает полезно разделить вычислительно сложные задачи между несколькими worker-ами, которые затем могут выполнить эти задачи на многопроцессорных ядрах.</p>
+
+<h2 id="Другие_типы_worker-ов">Другие типы worker-ов</h2>
+
+<p>В дополнение к выделенным и совместно используемым web worker-ам доступны другие типы worker-ов:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorkers</a>, по сути, действуют как прокси-серверы, которые размещаются между веб-приложениями, браузером и сетью (при наличии). Они предназначены (помимо прочего) для создания эффективного автономного взаимодействия, перехвата сетевых запросов и принятия соответствующих действий в зависимости от того, доступна ли сеть, и обновлены ли ресурсы на сервере. Они также разрешают доступ push-уведомлениям и API фоновой синхронизации.</li>
+ <li>Chrome Workers это worker типа Firefox-only, который вы можете использовать, если вы разрабатываете дополнения и хотите использовать worker-ы в расширениях и иметь доступ к <a href="https://developer.mozilla.org/en/js-ctypes">js-ctypes</a> в вашем worker-е. Смотрите {{domxref("ChromeWorker")}} для более подробной информации.</li>
+ <li><a href="/en-US/docs/Web/API/Web_Audio_API#Audio_Workers">Audio Workers</a> предоставляют возможность прямой обработки звука по сценарию в контексте web worker-а.</li>
+</ul>
+
+<h2 id="Функции_и_интерфейсы_доступные_в_worker-ах">Функции и интерфейсы доступные в worker-ах</h2>
+
+<p>Внутри web worker-а вы можете использовать большинство стандартных функций JavaScript, включая:</p>
+
+<ul>
+ <li>{{domxref("Navigator")}}</li>
+ <li>{{domxref("XMLHttpRequest")}}</li>
+ <li>{{jsxref("Global_Objects/Array", "Array")}}, {{jsxref("Global_Objects/Date", "Date")}}, {{jsxref("Global_Objects/Math", "Math")}}, и {{jsxref("Global_Objects/String", "String")}}</li>
+ <li>{{domxref("Window.requestAnimationFrame")}}, {{domxref("WindowTimers.setTimeout")}}, и {{domxref("WindowTimers.setInterval")}}</li>
+</ul>
+
+<p>Главное, что вы не можете сделать в Worker это напрямую повлиять на родительскую страницу. Это включает в себя манипулирование DOM и использование объектов этой страницы. Вы должны сделать это косвенно, отправив сообщение обратно основному сценарию через {{domxref("DedicatedWorkerGlobalScope.postMessage")}}, а затем выполнив изменения оттуда.</p>
+
+<div class="note">
+<p><strong>Заметка</strong>: Для знакомства с  полным списком функций,  доступных для worker-ов, смотрите статью <a href="/en-US/docs/Web/Reference/Functions_and_classes_available_to_workers">Функции и интерфейсы доступные worker-ам</a>.</p>
+</div>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#toc-workers')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Без изменений {{SpecName("Web Workers")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Workers')}}</td>
+   <td>{{Spec2('Web Workers')}}</td>
+   <td>Начальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Браузерная_совместимость">Браузерная совместимость</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>4<sup>[1]</sup></td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>10.0</td>
+   <td>10.6<sup>[1]</sup></td>
+   <td>4<sup>[2]</sup></td>
+  </tr>
+  <tr>
+   <td>Shared workers</td>
+   <td>4<sup>[1]</sup></td>
+   <td>{{CompatGeckoDesktop(29)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>10.6</td>
+   <td>5<br>
+    {{CompatNo}} 6.1<sup>[4]</sup></td>
+  </tr>
+  <tr>
+   <td>Passing data using <a href="/en-US/docs/Web/Guide/API/DOM/The_structured_clone_algorithm">structured cloning</a></td>
+   <td>13</td>
+   <td>{{CompatGeckoDesktop(8)}}</td>
+   <td>10.0</td>
+   <td>11.5</td>
+   <td>6</td>
+  </tr>
+  <tr>
+   <td>Passing data using <a class="external" href="http://www.w3.org/html/wg/drafts/html/master/infrastructure.html#transferable-objects">transferable objects</a></td>
+   <td>17 {{property_prefix("webkit")}}<br>
+    21</td>
+   <td>{{CompatGeckoDesktop(18)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>15</td>
+   <td>6</td>
+  </tr>
+  <tr>
+   <td>Global {{domxref("window.URL", "URL")}}</td>
+   <td>10<sup>[3]</sup><br>
+    23</td>
+   <td>{{CompatGeckoDesktop(21)}}</td>
+   <td>11</td>
+   <td>15</td>
+   <td>6<sup>[3]</sup></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>4.4</td>
+   <td>4<sup>[1]</sup></td>
+   <td>3.5</td>
+   <td>1.0.1</td>
+   <td>10.0</td>
+   <td>11.5<sup>[1]</sup></td>
+   <td>5.1<sup>[2]</sup></td>
+  </tr>
+  <tr>
+   <td>Shared workers</td>
+   <td>{{CompatNo}}</td>
+   <td>4<sup>[1]</sup></td>
+   <td>8</td>
+   <td>1.0.1</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Passing data using <a href="/en-US/docs/Web/Guide/API/DOM/The_structured_clone_algorithm">structured cloning</a></td>
+   <td>{{CompatNo}}</td>
+   <td>4</td>
+   <td>8</td>
+   <td>1.0.1</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Passing data using <a class="external" href="http://www.w3.org/html/wg/drafts/html/master/infrastructure.html#transferable-objects">transferable objects</a></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>18</td>
+   <td>1.0.1</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Chrome и Opera выдают ошибку "<code>Uncaught SecurityError: Failed to construct 'Worker': Script at 'file:///Path/to/worker.js' cannot be accessed from origin 'null'.</code>" когда вы пытаетесь запустить worker локально. Нужно быть на надлежащем домене.</p>
+
+<p>[2] Начиная с Safari 7.1.2, вы можете вызывать <code>console.log</code> изнутри worker-а, но он ничего не выведет в консоль. Более старые версии Safari не ползволяют вызывать <code>console.log</code> изнутри worker-а</p>
+
+<p>[3] Эта функция реализована с префиксом как <code>webkitURL</code>.</p>
+
+<p>[4] Safari <a href="https://bugs.webkit.org/show_bug.cgi?id=116359">удалил поддержку SharedWorker</a>.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><code><a class="internal" href="/en-US/docs/Web/API/Worker">Worker</a></code> интерфейс</li>
+ <li><code><a class="internal" href="/en-US/docs/Web/API/SharedWorker">SharedWorker</a></code> интерфейс</li>
+ <li><a href="/en-US/docs/Web/API/Worker/Functions_and_classes_available_to_workers">Функции доступные для worker-ов</a></li>
+ <li><a href="/en-US/docs/Web/API/Web_Workers_API/Using_web_workers">Продвинутые концепции и примеры</a></li>
+</ul>
diff --git a/files/ru/dom/window.requestanimationframe/index.html b/files/ru/dom/window.requestanimationframe/index.html
new file mode 100644
index 0000000000..d451cae62f
--- /dev/null
+++ b/files/ru/dom/window.requestanimationframe/index.html
@@ -0,0 +1,92 @@
+---
+title: window.requestAnimationFrame()
+slug: DOM/window.requestAnimationFrame
+tags:
+  - Анимация
+translation_of: Web/API/window/requestAnimationFrame
+---
+<div>{{APIRef}}</div>
+
+<p><code><strong>window.requestAnimationFrame</strong></code> указывает браузеру на то, что вы хотите произвести анимацию, и просит его запланировать перерисовку на следующем кадре анимации. В качестве параметра метод получает функцию, которая будет вызвана перед перерисовкой.</p>
+
+<div class="note"><strong>Заметка:</strong> Ваш callback метод сам должен вызвать <code>requestAnimationFrame()</code> иначе анимация остановится.</div>
+
+<p>Вы должны вызывать этот метод всякий раз, когда готовы обновить анимацию на экране, чтобы запросить планирование анимации. Обычно запросы происходят 60 раз в секунду, но чаще всего совпадают с частотой обновления экрана. В большинстве браузеров в фоновых вкладках или скрытых <code>&lt;iframe&gt;</code>, вызовы <code>requestAnimationFrame()</code> приостанавливаются, для того, чтобы повысить производительность и время работы батареи.</p>
+
+<p>Callback методу передаётся один аргумент, {{domxref("DOMHighResTimeStamp")}}, который содержит текущее время (количество миллисекунд, прошедших с момента <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/DOMHighResTimeStamp#The_time_origin">time origin</a>). Когда callback-и, отправленные в очередь с помощью <code>requestAnimationFrame()</code> начинают вызывать несколько callback-ов в одном кадре, каждый получает одинаковый timestamp, хотя для вычисления каждого callback было затрачено время. Этот timestamp - десятичное число в миллисекундах, но с минимальной точностью в 1ms (1000 µs).</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="brush: js notranslate">window.requestAnimationFrame(callback);</pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>callback</code></dt>
+ <dd>Функция, которая будет вызвана, когда придёт время обновить вашу анимацию на следующей перерисовке.</dd>
+ <dt><code>element</code> {{ optional_inline() }}</dt>
+ <dd>Необязательный параметр (не используется в Firefox или IE), определяющий элемент, который визуально содержит всю анимацию. Для canvas'а и WebGL'a им должен быть {{ HTMLElement("canvas") }}. Для других элементов вы можете опустить этот параметр для чуть лучшего пользовательского опыта.</dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p><code>requestID</code> — длинное целое, являющееся уникальным идентификатором для записи, содержащей callback. Оно не равно нулю, но других предположений о его значении делать не следует. Вы можете передать его в {{ domxref("window.cancelAnimationFrame()") }} для отмены вызова.</p>
+
+<h2 id="Notes" name="Notes">Пример</h2>
+
+<pre class="brush: js notranslate">var start = null;
+var element = document.getElementById('SomeElementYouWantToAnimate');
+
+function step(timestamp) {
+  if (!start) start = timestamp;
+  var progress = timestamp - start;
+  element.style.transform = 'translateX(' + Math.min(progress / 10, 200) + 'px)';
+  if (progress &lt; 2000) {
+    window.requestAnimationFrame(step);
+  }
+}
+
+window.requestAnimationFrame(step);</pre>
+
+<h2 id="Примечание">Примечание</h2>
+
+<p>В Edge версиях младше 17 и в Internet Explorer не надежно запускать <code>requestAnimationFrame</code> перед циклом рисования.</p>
+
+<h2 id="Specification" name="Specification">Спецификация</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('HTML WHATWG', '#animation-frames', 'requestAnimationFrame')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Без изменений, заменяет предыдущую.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('RequestAnimationFrame', '#dom-windowanimationtiming-requestanimationframe', 'requestAnimationFrame')}}</td>
+   <td>{{Spec2('RequestAnimationFrame')}}</td>
+   <td>Первоначальное описание.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Браузерная совместимость</h2>
+
+<p id="Specification">{{Compat("api.Window.requestAnimationFrame")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{ domxref("window.mozAnimationStartTime") }}</li>
+ <li>{{ domxref("window.cancelAnimationFrame()") }}</li>
+ <li><a class="external" href="http://weblogs.mozillazine.org/roc/archives/2010/08/mozrequestanima.html">mozRequestAnimationFrame</a> - Blog post</li>
+ <li><a class="external" href="http://paulirish.com/2011/requestanimationframe-for-smart-animating/">requestAnimationFrame for smart animating</a> - Blog post</li>
+ <li><a class="external" href="http://hacks.mozilla.org/2011/08/animating-with-javascript-from-setinterval-to-requestanimationframe/">Animating with javascript: from setInterval to requestAnimationFrame</a> - Blog post</li>
+ <li><a class="external" href="http://blogs.msdn.com/b/ie/archive/2011/07/05/using-pc-hardware-more-efficiently-in-html5-new-web-performance-apis-part-1.aspx">Using PC Hardware more efficiently in HTML5: New Web Performance APIs, Part 1</a> - Blog post</li>
+</ul>