Почему код выдает ошибку в наблюдателе

Question

let observer = new MutationObserver(mutationRecords => {
  console.log(mutationRecords);
});

mutationRecords = [{
  type: "childList",
  target: <div#elem>,
  removedNodes: [<b>],
  nextSibling: <text node>,
  previousSibling: <text node>
  // другие свойства пусты
}, {
  type: "characterData"
  target: <text node>
  // ...детали изменений зависят от того, как браузер обрабатывает такое удаление
  // он может соединить два соседних текстовых узла "Отредактируй " и ", пожалуйста" в один узел
  // или может оставить их разными текстовыми узлами
}];

<div contentEditable id="elem">Отредактируй <b>меня</b>, пожалуйста</div>

Почему console.log выводит ошибку ?

Answer 1

Эмм... потому что здесь нет никакой магии, это обычный объект из JS, со встроенными возможностями. Ошибка возникает не в console.log. Здесь:

mutationRecords = [{
  type: "childList",
  target: <div#elem>,
  removedNodes: [<b>],
  nextSibling: <text node>,
  previousSibling: <text node>
}]

Вы создаете глобальную переменную mutationRecords и пытаетесь присвоить ей обычный массив, где <div#elem> естественно, недопустимый набор символов для JS.

Пример из ссылки просто не очень четко написан. Это у них пример вывода, а не то, что следует написать в своем коде.

Должно быть так:

let observer = new MutationObserver(mutationRecords => {
  console.log(mutationRecords);
});

observer.observe(elem, {
  childList: true,
  subtree: true,
  characterDataOldValue: true
});

<div contentEditable id="elem">Отредактируй <b>меня</b>, пожалуйста</div>

Если смотреть вывод в инструментах разработчика браузера, он будет именно таким, как у вас в вопросе.

Answer 2

console.log не выводит ошибку:

let observer = new MutationObserver(mutationRecords => {
  console.log(mutationRecords);
});
const config = { attributes: true, childList: true, subtree: true };
observer.observe(document.getElementById("elem"), config);
/*
mutationRecords = [{
  type: "childList",
  target: <div#elem>,
  removedNodes: [<b>],
  nextSibling: <text node>,
  previousSibling: <text node>
  // другие свойства пусты
}, {
  type: "characterData"
  target: <text node>
  // ...детали изменений зависят от того, как браузер обрабатывает такое удаление
  // он может соединить два соседних текстовых узла "Отредактируй " и ", пожалуйста" в один узел
  // или может оставить их разными текстовыми узлами
}];
*/

<div contentEditable id="elem">Отредактируй <b>меня</b>, пожалуйста</div>

БЛОГ НА HUSL

Почему код выдает ошибку в наблюдателе

Ответы (2 шт):