問題タブ [mutation-events]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票する
2 に答える
5443 参照

javascript - ページに読み込まれているときに HTML コンテンツを変更する方法

私は自分のサイトで A/B テストを行っていますが、ほとんどの作業はページの上部に読み込まれる JS ファイルで行います。このファイルは他のものがレンダリングされる前に読み込まれますが、jQuery が読み込まれた後は便利な場合があります。

H1 タグを変更する非常に単純な例を挙げると、通常はヘッドにスタイルを挿入して H1 の不透明度を 0 に設定し、次に DOMContentLoaded で H1 コンテンツを操作してから不透明度を 1 に設定します。この理由変更が行われる前に古いコンテンツのフラッシュを避けることです。オブジェクト全体を非表示にすると、見た目がより優雅になります。

MutationObserver API を調べ始めました。ユーザーが開くことができるオーバーレイダイアログボックスのコンテンツを変更するときにこれを使用したことがありますが、これは非常にクールなアプローチであると思われます。最初のレンダリングの前とDOMContentLoadedの前にドキュメントを解析して変更しますか?

このアプローチにより、H1 コンテンツを非表示にしてから変更してから表示することなく変更できます。

私は試みましたが、これまでのところ失敗しており、時代遅れになる突然変異イベントについて読んで、不可能なことをしようとしているのだろうかと思っています. しかし、私たち(私ではありません)が火星にロボットを置くことに成功したので、これを解決できることを願っています.

ページがロード/解析されているときに、MutationObservers を使用してオンザフライで HTML コンテンツを変更することは可能ですか?

助けてくれてありがとう。

よろしく、ニック

0 投票する
1 に答える
6045 参照

javascript - MutationObserver と querySelectorAll

私は現在 Javascript を学んでおり、私の章の 1 つは「Mutation Observer」です。新しい div がページに追加されたかどうかを検出してコンソールに表示する単純な関数を作成しようとしています。ただし、このメッセージが表示され、このエラーを修正する方法を見つけるのに苦労しています。誰かが私が間違っていることを説明してくれれば、とても感謝しています。前もって感謝します!

不明な TypeError: 'MutationObserver' で 'observe' を実行できませんでした: パラメータ 1 はタイプ 'Node' ではありません。

これまでのところ、これは私が書いたコードです: