質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Chrome extension

Chrome拡張機能

Q&A

2回答

3866閲覧

MutationObserverでエラーが出る

TarouKotani

総合スコア42

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Chrome extension

Chrome拡張機能

0グッド

0クリップ

投稿2018/02/14 08:51

編集2022/01/12 10:55
コード ```■開発全体の内容  ある事務処理系クラウドサービスに対し、追加入力された内容に問題がある場合にアラートを出させるクローム拡張の機能 ■今回問題が発生した部分 クローム拡張で青線部の子要素の追加を監視する部分 ![青線部の子要素の変更を監視したい](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

json

1{ 2 "name": "DOMstr", 3 "version": "1", 4 "manifest_version": 2, 5 "description": "DOMの変更に対しalert", 6 "icons": { 7 "16" : "images/sample_16.png", 8 "48" : "images/sample_48.png", 9 "128" : "images/sample_128.png" 10 }, 11 "browser_action": { 12 "default_icon": "images/sample_16.png", 13 "default_title": "DOMの変更に対しalert" 14 }, 15 "content_scripts": [{ 16 "matches": ["https://s2.movacal.net/*"], 17 "js": ["jquery-3.3.1.min.js","content_script.js"] 18 }], 19 20 "permissions":[ "notifications"] 21}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

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

JavaScript

1document.getElementById('pres_out_ctg')

投稿2018/02/14 08:58

x_x

総合スコア13749

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

TarouKotani

2018/02/14 09:29

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

2018/02/14 09:48

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

2018/02/14 09:50

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

2018/02/14 09:51

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

0

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

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

投稿2018/02/14 10:11

maisumakun

総合スコア145121

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

TarouKotani

2018/02/14 10:29

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

2018/02/14 10:31

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

2018/02/14 10:47

新たなエラーは 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

2018/02/14 10:49

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

2018/02/15 00:26

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問