«параметр 1 не относится к типу Node» при использовании MutationObserver

Question

Я полный нуб на JS (как и в случае с веб-разработкой в ​​целом): (

В настоящее время я работаю над небольшим скриптом для Tampermonkey, который присматривает за указанием c элементы в определенном классе и воспроизводит звук всякий раз, когда происходят какие-либо изменения с элементом. (Изменения значений, элементы скрываются / отображаются и т. д. c.).

В настоящее время у меня есть следующий код:

     var audio = new Audio('URL_to_the_sound');
        var mutationObserver = new MutationObserver(function(mutations) {
      mutations.forEach(function(mutation) {
        console.log(mutation);
          audio.play();
      });
    });
    var target = document.getElementsByClassName('CLASSNAME');
        mutationObserver.observe(target, {
      attributes: true,
      characterData: true,
      childList: true,
      subtree: true,
      attributeOldValue: true,
      characterDataOldValue: true
    });

Однако мой браузер отвечает следующей ошибкой:

Uncaught TypeError: Failed to execute 'observe' on 'MutationObserver': parameter 1 is not of type 'Node'.

Следует отметить, что в одном классе несколько элементов.

Что мне делать?: (

Answer 1

OK. Я понял. Я использовал следующую функцию:

waitForKeyElements (
            "span.classname"
            , soundfx, false
        );

Все работает нормально, я поэкспериментирую с этим, чтобы добиться лучших результатов. Спасибо всем, кто прокомментировал этот пост! :)

Answer 2

Вам нужно перебрать каждый элемент, возвращаемый getElementsByClassName . Этот метод возвращает HTMLCollection , который не имеет никакого l-1016 * -подобного метода, но вы можете преобразовать его в Array , а затем использовать метод forEach :

var targets = document.getElementsByClassName("CLASSNAME");

Array.from(targets).forEach(target => {
  mutationObserver.observe(target, {
    attributes: true,
    characterData: true,
    childList: true,
    subtree: true,
    attributeOldValue: true,
    characterDataOldValue: true
  });
});

Вот рабочий пример, основанный на вашем фрагменте кода: https://stackblitz.com/edit/js-qbetr2