initial commit

1 files changed, 176 insertions, 0 deletions

diff --git a/files/ru/web/api/mutationobserver/index.html b/files/ru/web/api/mutationobserver/index.html
new file mode 100644
index 0000000000..61a16f69f0
--- /dev/null
+++ b/files/ru/web/api/mutationobserver/index.html
@@ -0,0 +1,176 @@
+---
+title: MutationObserver
+slug: Web/API/MutationObserver
+tags:
+  - API
+  - Advanced
+  - DOM
+  - DOM Reference
+  - NeedsContent
+  - NeedsUpdate
+  - Reference
+translation_of: Web/API/MutationObserver
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p><code>MutationObserver</code> предоставляет возможность получать уведомления об изменении определённых <a href="/en-US/docs/DOM">DOM</a>-элементов. <code>MutationObserver</code> является заменой <a href="/en-US/docs/DOM/Mutation_events">Mutation Events</a>, определённой в спецификации DOM3 Events.</p>
+
+<h2 id="Конструктор">Конструктор</h2>
+
+<dl>
+ <dt>{{domxref("MutationObserver.MutationObserver", "MutationObserver()")}}</dt>
+ <dd>Создает и возвращает новый <code>MutationObserver</code>, который вызовет определенную функцию обратного вызова при изменении в DOM.</dd>
+</dl>
+
+<h2 id="Параметры">Параметры</h2>
+
+<dl>
+ <dt><code>callback</code></dt>
+ <dd>Вызывается при каждом изменении DOM-элемента. Обзёрвер вызывает данную функцию с двумя аргументами. Первым аргументом является массив объектов <a href="/en-US/docs/Web/API/MutationRecord">MutationRecord</a>, вторым аргументом является экземпляр <code>MutationObserver.</code></dd>
+</dl>
+
+<h2 id="Методы_экземпляра">Методы экземпляра</h2>
+
+<dl>
+ <dt>{{domxref("MutationObserver.disconnect", "disconnect()")}}</dt>
+ <dd>Прекращает получение уведомлений об изменении DOM-элемента экземпляром <code>MutationObserver</code>, до того момента пока не будет вызван метод <a href="#observe()">observe()</a>.</dd>
+ <dt>{{domxref("MutationObserver.observe", "observe()")}}</dt>
+ <dd>Подписывает экземпляр <code>MutationObserver</code> на получение уведомлений о манипуляциях с DOM-элементом.</dd>
+ <dt>{{domxref("MutationObserver.takeRecords", "takeRecords()")}}</dt>
+ <dd>Возвращает текущий {{jsxref("Array")}} очереди экземпляра <code>MutationObserver</code>, затем очищает её.</dd>
+</dl>
+
+<h2 id="MutationObserverInit"><code>MutationObserverInit</code></h2>
+
+<p><code>MutationObserverInit</code> — объект, который может содержать следующие свойства:</p>
+
+<div class="note"><strong>Примечание:</strong> Так или иначе необходимо установить <code>true</code> для одного из следующих cвойств: <code>childList</code>, <code>attributes</code>, <code>characterData</code>. В противном случае будет вызвана ошибка "An invalid or illegal string was specified"</div>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Property</td>
+   <td class="header">Description</td>
+  </tr>
+  <tr>
+   <td><code>childList</code></td>
+   <td>
+    <p>true, если необходимо наблюдать за добавлением или удалением дочерних элементов (Включая текстовые узлы (text nodes))</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>attributes</code></td>
+   <td>
+    <p>true, если необходимо наблюдать за изменениями атрибутов целевого элемента.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>characterData</code></td>
+   <td>
+    <p>true, если необходимо наблюдать за изменениями значения текстового содержимого целевого узла (текстовых узлов дочернего элемента).</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>subtree</code></td>
+   <td>
+    <p>true, если необходимо наблюдать за потомками целевого элемента. </p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>attributeOldValue</code></td>
+   <td>
+    <p>true, если необходимо возвращать предыдущее значение атрибута. </p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>characterDataOldValue</code></td>
+   <td>
+    <p>true, если необходимо возвращать предыдущее значение Data атрибута. </p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>attributeFilter</code></td>
+   <td>
+    <p>Устанавливает массив названий атрибутов (без указания пространства имен), если требуется наблюдать за изменениями конкретных атрибутов. </p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Mutation_Observer_customize_resize_event_listener_demo">Mutation Observer &amp; customize resize event listener &amp; demo</h2>
+
+<p><a href="https://codepen.io/webgeeker/full/YjrZgg/">https://codepen.io/webgeeker/full/YjrZgg/</a></p>
+
+<h2 id="Пример_использования">Пример использования</h2>
+
+<p>Приведённый ниже пример взят из <a href="http://hacks.mozilla.org/2012/05/dom-mutationobserver-reacting-to-dom-changes-without-killing-browser-performance/">этого блога</a>.</p>
+
+<pre class="brush: js">// Выбираем целевой элемент
+var target = document.getElementById('some-id');
+
+// Конфигурация observer (за какими изменениями наблюдать)
+const config = {
+    attributes: true,
+    childList: true,
+    subtree: true
+};
+
+// Функция обратного вызова при срабатывании мутации
+const callback = function(mutationsList, observer) {
+    for (let mutation of mutationsList) {
+        if (mutation.type === 'childList') {
+            console.log('A child node has been added or removed.');
+        } else if (mutation.type === 'attributes') {
+            console.log('The ' + mutation.attributeName + ' attribute was modified.');
+        }
+    }
+};
+
+// Создаем<code> </code>экземпляр наблюдателя с указанной функцией обратного вызова
+const observer = new MutationObserver(callback);
+
+// Начинаем наблюдение за настроенными изменениями целевого элемента<code>
+observer.observe(target, config);
+
+</code>// Позже можно остановить наблюдение<code>
+observer.disconnect();</code>
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#mutationobserver', 'MutationObserver')}}</td>
+   <td>{{ Spec2('DOM WHATWG') }}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM4', '#mutationobserver', 'MutationObserver')}}</td>
+   <td>{{ Spec2('DOM4') }}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p>{{Compat("api.MutationObserver")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref('PerformanceObserver')}}</li>
+ <li>{{domxref('ResizeObserver')}}</li>
+ <li>{{domxref('IntersectionObserver')}}</li>
+ <li><a href="http://updates.html5rocks.com/2012/02/Detect-DOM-changes-with-Mutation-Observers" rel="freelink">Краткий обзор</a></li>
+ <li><a href="http://hacks.mozilla.org/2012/05/dom-mutationobserver-reacting-to-dom-changes-without-killing-browser-performance/" rel="freelink">Более детальное обсуждение</a></li>
+ <li><a href="http://www.youtube.com/watch?v=eRZ4pO0gVWw" rel="freelink">Скринкаст от разработчика Chromium Rafael Weinstein</a></li>
+</ul>