js chrome拡張機能　MutationObserverがうまく動作しない

おこっていること

Twitchのコメントを随時取得したいのですがうまくMutationObserverが動作しません。
エラーコードを調べてもよくわからなかったので質問します...。

JavaScript
1 'use strict';
2 const target = document.getElementsByClassName("chat-scrollable-area__message-container tw-flex-grow-1 tw-pd-b-1");
3 const name1 = document.getElementsByClassName("chat-author__display-name");
4 const name2 = document.getElementsByClassName("chat-author__intl-login");
5 var i = 0;
6 var num;
7 var author = "ﾃｽﾄ";
8
9 //chrome.tabs.onUpdated.addListener(function(tabid, indo, tab){})
10
11  var ob = new MutationObserver(function(){
12    console.log("MutationObserver");
13    i++;
14  });
15
16 ob.observe(target[0], { attributes: true, childList: true });

エラーコード

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

ob.observe(target[0], { attributes: true, childList: true });
↑ここの部分でエラーが出ています。

行動規範の内容に同意します

回答2件

ベストアンサー

単純にtarget[0]を参照する時点で定義されていないのだと思います

window.addEventListener('DOMContentLoaded', ()=>{
  ob.observe(target[0], { attributes: true, childList: true });
  target[0].appendChild(document.createElement('span'))
});

投稿2021/02/04 00:29