I am a total noob at JS (as well as with the web development in general) :(

Currently, I am working on a small script for Tampermonkey, which looks after specific elements in a particular class and plays a sound whenever any changes occur with the element. (Value changes, elements hides/shows, etc.).

Currently, I have the following code:

     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
    });

However, my browser responds with the following error:

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

I should mention that there are several elements in the same class.

What should I do? :(

I am a total noob at JS (as well as with the web development in general) :(

Currently, I am working on a small script for Tampermonkey, which looks after specific elements in a particular class and plays a sound whenever any changes occur with the element. (Value changes, elements hides/shows, etc.).

Currently, I have the following code:

     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
    });

However, my browser responds with the following error:

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

I should mention that there are several elements in the same class.

What should I do? :(

• javascript
• jquery
• html
• tampermonkey

• 2 getElementsByClassName returns a NodeList, not a single Node. You need to loop through it and create an observer for each element – Rory McCrossan Commented Mar 20, 2020 at 15:17
• @RoryMcCrossan Can you provide me with the example of the code? I have tried adding a loop function; however, the web-page is not loading with it. – Rudy Grinberg Commented Mar 20, 2020 at 15:22
• Might be easier to just use waitForKeyElements. – woxxom Commented Mar 20, 2020 at 15:25
• @wOxxOm Could you please provide a code example for the matter? – Rudy Grinberg Commented Mar 20, 2020 at 15:41
• You can find a lot of those easily: here. The first result contains the script itself and the examples. – woxxom Commented Mar 20, 2020 at 15:44

2 Answers 2

OK. I figured it out. I have used the following function:

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

It works sort-of okay, I will play around with it to achieve better results. Thanks to all who mented on this post! :)

You need to iterate over each element returned by getElementsByClassName. This method returns HTMLCollection which has no any loop-like method, but you could convert it to Array, and then use forEach method:

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
  });
});

Here is working example based on your code snippet: https://stackblitz./edit/js-qbetr2