MutationObserver
================

`MutationObserver` предоставляет возможность получать уведомления об изменении определённых DOM (en-US)-элементов. `MutationObserver` является заменой Mutation Events, определённой в спецификации DOM3 Events.

Конструктор
-----------

`MutationObserver()` (en-US)

Создаёт и возвращает новый `MutationObserver`, который вызовет определённую колбэк-функцию при изменении в DOM.

Параметры
---------

`callback`

Вызывается при каждом изменении DOM-элемента. Наблюдатель вызывает данную функцию с двумя аргументами. Первым аргументом является массив объектов MutationRecord (en-US), вторым аргументом является экземпляр `MutationObserver.`

Методы экземпляра
-----------------

`disconnect()` (en-US)

Прекращает получение уведомлений об изменении DOM-элемента экземпляром `MutationObserver`, до того момента пока не будет вызван метод observe().

`observe()` (en-US)

Подписывает экземпляр `MutationObserver` на получение уведомлений о манипуляциях с DOM-элементом.

`takeRecords()` (en-US)

Возвращает текущий `Array` очереди экземпляра `MutationObserver`, затем очищает её.

`MutationObserverInit`
----------------------

`MutationObserverInit` — объект, который может содержать следующие свойства:

**Примечание:** Так или иначе необходимо установить `true` для одного из следующих свойств: `childList`, `attributes`, `characterData`. В противном случае будет вызвана ошибка "An invalid or illegal string was specified"


| Property | Description |
| --- | --- |
| `childList` | true, если необходимо наблюдать за добавлением или удалением дочерних элементов (Включая текстовые узлы (text nodes)) |
| `attributes` | true, если необходимо наблюдать за изменениями атрибутов целевого элемента. |
| `characterData` | true, если необходимо наблюдать за изменениями значения текстового содержимого целевого узла (текстовых узлов дочернего элемента). |
| `subtree` | true, если необходимо наблюдать за потомками целевого элемента. |
| `attributeOldValue` | true, если необходимо возвращать предыдущее значение атрибута. |
| `characterDataOldValue` | true, если необходимо возвращать предыдущее значение Data атрибута. |
| `attributeFilter` | Устанавливает массив названий атрибутов (без указания пространства имён), если требуется наблюдать за изменениями конкретных атрибутов. |

Mutation Observer & customize resize event listener & demo
----------------------------------------------------------

https://codepen.io/webgeeker/full/YjrZgg/

Пример использования
--------------------

Приведённый ниже пример взят из этого блога.


```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.");
    }
  }
};

// Создаём экземпляр наблюдателя с указанной функцией колбэка
const observer = new MutationObserver(callback);

// Начинаем наблюдение за настроенными изменениями целевого элемента
observer.observe(target, config);

// Позже можно остановить наблюдение
observer.disconnect();
```

Спецификации
------------

| Specification |
| --- |
| DOM Standard # interface-mutationobserver |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* `PerformanceObserver` (en-US)
* `ResizeObserver` (en-US)
* `IntersectionObserver`
* Краткий обзор
* Более детальное обсуждение
* Скринкаст от разработчика Chromium Rafael Weinstein