MutationObserverでエラーが出る

Question

コード
```■開発全体の内容
　ある事務処理系クラウドサービスに対し、追加入力された内容に問題がある場合にアラートを出させるクローム拡張の機能

■今回問題が発生した部分　クローム拡張で青線部の子要素の追加を監視する部分
![青線部の子要素の変更を監視したい](78caee495871d1b228abf303f0c97f09.png)


■実装内容　　[参考](http://okakacacao.wpblog.jp/technology/mutation-observer#_8211_subtree)
```javascript
content_script.js
//変更検出時に実行するコールバック関数を引数に渡し,MutationObserver をインスタンス化する
var observer = new MutationObserver(function (MutationRecords, MutationObserver) {
  alert('Mutated!!');
});
//監視対象のノードと監視方法を指定するオプションを引数に渡して、
//作成したインスタンスの observe() メソッドを実行する
observer.observe($('#pres_out_ctg').get(0), {　　　　　　　　//:12
    childList: true,
});
console.log('observe is used');

■予想との違い
実装した後、クロームのページをリロードした時点で下記の通りエラーが出ました

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

at content_script.js:12

ページ読み込み時、読み込みの終了よりもエラーがコンソールに出力される方が早いように見えます。
また、下記写真の上側のバー部分などのidは正しく返ってきており、その部分は読み込みの始めの方に完了しています。
](c812c6b0fd5782aa61bf90fb51ced979.png)

manifest.json

{
  "name": "DOMstr",
  "version": "1",
  "manifest_version": 2,
  "description": "DOMの変更に対しalert",
  "icons": {
    "16"  : "images/sample_16.png",
    "48"  : "images/sample_48.png",
    "128" : "images/sample_128.png"
  },
  "browser_action": {
    "default_icon": "images/sample_16.png",
    "default_title": "DOMの変更に対しalert"
  },
  "content_scripts": [{
   "matches": ["https://s2.movacal.net/*"],
   "js": ["jquery-3.3.1.min.js","content_script.js"]
  }],

  "permissions":[ "notifications"]
}

Answer 1

Elementでなければいけません。そもそもjQueryはあるのでしょうか？
$('#pres_out_ctg').get(0)ではなく、

document.getElementById('pres_out_ctg')

Comments

[TarouKotani]

変更の監視はDOMでは不可能で、Elementでは可能ということでしょうか。

[TarouKotani]

こちらの子要素リストの変化を監視のとおりに実装しましたが同じエラーが出ます、、
https://qiita.com/munieru_jp/items/a6f1433652124a2165e4

[x_x]

そこもjQueryは使ってませんよね？

[TarouKotani]

使ってないです。なるほど、jQueryを使わないと要素が取得できないんですね

[x_x]

え、なぜそうなりますか？ 回答したように、jQueryなど忘れて素のJavaScriptで書けばいいです

Answer 2

1つの可能性として、「DOMが作成される前にJavaScriptが実行されている」ということが考えられます。

「JavaScriptの読み込み位置を'#pres_out_ctg'より後に回す」、あるいは「$(function(){...})の中で実行する」という方法で、解決しますでしょうか。

Comments

[TarouKotani]

$(function(){...})の方、同じエラーと新たなwarningが出ました
「JavaScriptの読み込み位置を'#pres_out_ctg'より後に回す」はどうすればできますか？

[maisumakun]

「新たなWarning」はどのようなものでしょうか。

あと、「console.log($('#pres_out_ctg').get(0))」のようにして、これがキチンとエレメントを取れているか確認してみましょう。

[TarouKotani]

新たなエラーは
jQuery.Deferred exception: Failed to execute 'observe' on 'MutationObserver': parameter 1 is not of type 'Node'. TypeError: Failed to execute 'observe' on 'MutationObserver': parameter 1 is not of type 'Node'.
console.logを追加したら
Uncaught SyntaxError: Unexpected token .が出て元のエラーが消えました

[maisumakun]

「Uncaught SyntaxError」ということは、何か文法的におかしくなっています。observer.observeの前の行に「console.log($('#pres_out_ctg').get(0))」だけの行を作ってください。

[x_x]

これは拡張機能で、デフォルトではタイミングはdocument_idleなので、わざわざdocument_startを指定していない限り作成されていないとは考えにくいです。