MutationObserverのエラーが解決できない

http://bl.ocks.org/stepheneb/1182434

上のURLのcircleを対象にしてMutationObeserverを実行しようとしました。参考は↓です。
https://qiita.com/munieru_jp/items/a6f1433652124a2165e4

しかしエラーがでるので調べたところ、DOMが構築される前にMutationObserver.observeが実行されるからといようなことが書いてあったので以下を実行しました。

function hoge(){
　　 let target = document.getElementsByTagName('circle');
　　 if(!target){ setTimeout(hoge, 500); return;} 
　　 let config = {attributes : true}; 
　　let observer = new MutationObserver(record => {console.trace();}); 
　　observer.observe(target, config)
}
 hoge();

エラーは以下です。

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

コードを変えた後も前もエラー文は変わりません。コードは</body>の前で読み込んでいます。上に挙げたコードを最後尾に配置してもダメでした。

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

回答1件

ベストアンサー

getElementsByTagName()の返り値は配列っぽいオブジェクトだからobserve(array-like)となってエラーになっているのかな。
要素が最初の一つだけでいいなら以下のように直せば動くはず。

js
1function hoge(){
2　　 let target = document.getElementsByTagName('circle')[0]; // +[0]
3　　 if(!target){ setTimeout(hoge, 500); return;} 
4　　 let config = {attributes : true}; 
5　　let observer = new MutationObserver(record => {console.trace();}); 
6　　observer.observe(target, config)
7}
8 hoge();

今回は関係なさそうだけど、もしScriptを実行してからDOM構築を待ちたい場合はDOMContentLoadedイベントを使うとスマート。

js
1window.addEventListener('DOMContentLoaded', function(e){
2	let target = document.getElementsByTagName('circle')[0];
3	let config = {attributes : true}; 
4	let observer = new MutationObserver(record => {console.trace();}); 
5	observer.observe(target, config);
6}, {once: true});