属性あるいはテキストの変更の場合のみ。この属性はそこにフォーカスし、編集することを可能とします。...詳細は、ブラウザがどのように変更を処理するかによって異なります。1つのノードに合体するかもしれません。後の余分なスペースを削除する可能性もあります。これが役立つシナリオはあるでしょうか?もちろんあります。アーキテクチャの観点から良い例を示します。このサイトのように、プログラミングに関するWebサイトを作成しているとしましょう。記事やその他の資料にはソースコードのスニペットが含まれることがあります。ハイライトライブラリがあります。要素の内容が検査され、ここのページの例と同じように、色付きの構文ハイライトが追加されます。スニペットは次のように見えます(デフォルトでは行番号はなし)。"world";今のところ、すべて簡単ですね。コードスニペットがあり、それらをハイライト表示しています。サーバから資料や素材を動的に取得するとします。見つかりませんでそのためのメソッドを学びます。ここでは、WebサーバからHTMLの記事を取得し、オンデマンドでそれを表示する、という点がポイントです。HTMLはコードスニペットを含むかもしれません。呼び出す必要があります。しないと、ハイライト表示されません。呼び出すのは誰の責任でしょう?次のように、記事をロードするコードへその呼び出しを追加することはできます。articleElem.querySelectorAll('pre[class*="language-"]');snippets.forEach(Prism.highlightElem);...しかし想像してみてください。コードでコンテンツをロードする場所はたくさんあります。記事、質問、フォーラムへの投稿など。到るところにハイライト表示をする呼び出しを書かなければならないのでしょうか?また、その呼び出しを忘れないように注意する必要もあります。誰かによって書かれたフォーラムがあり、それは動的にコンテンツをロードします。そこに構文のハイライト表示を追加したいような場合です。誰もサードパーティのスクリプトにパッチを当てるようなことはしたくありません。幸いなことに、別の選択肢があります。それにより、私たちはハイライト機能を一ヶ所で処理することができ、統合の必要性から解放されます。動的なハイライト表示のデモここに動作サンプルがあります。コードを実行すると、下の要素を監視し始め、そこに表れた任意のコードスニペットをハイライト表示します。true});id="highlight-demo"を持つデモ要素です。上のサンプルで監視されています。上のコードを実行していれば、スニペットがハイライト表示されます。それについて考えることなく、コードスニペットの追加/削除ができます。ガベージコレクションオブザーバは、内部的にはノードへの弱い参照を使用します。削除され、到達不可能になると、ガベージコレクションの対象になります。オブザーバはそれを妨げません。それでも、オブザーバはいつでも解放することができます。mutation(変化)のレコード一覧を取得します。これらは、変化は発生したが、コールバックはそれらを処理しなかったものです。属性、要素の追加/削除、テキストコンテンツ。これを使って、私たち自身の他の部分のコード、あるいはサードパーティのコードによってもたらされた変更を追跡することができます。ように、動的に挿入されたコンテンツの後処理をします。前のレッスン次のレッスンシェアチュートリアルマップコメントコメントをする前に読んでください...自由に記事への追加や質問を投稿をしたり、それらに回答してください。タグを使ってください。codepen...)。記事の中で理解できないことがあれば、詳しく説明してください。Kantorプロジェクトについてコンタクト。