2024/07/25 時点の英語版に基づき更新

files/ja/web/api/mutationobserver/index.md

@@ -1,11 +1,13 @@
 ---
 title: MutationObserver
 slug: Web/API/MutationObserver
+l10n:
+  sourceCommit: 32305cc3cf274fbfdcc73a296bbd400a26f38296
 ---
 
 {{APIRef("DOM WHATWG")}}
 
-{{domxref("MutationObserver")}} インターフェイスは、 [DOM](/ja/docs/Web/API/Document_Object_Model) ツリーへ変更が加えられたことを監視することができる機能を提供します。これは DOM3 Events の仕様で定義されていた [Mutation Events](/ja/docs/Web/API/MutationEvent) 機能の置き換えとして設計されたものです。
+**`MutationObserver`** インターフェイスは、 [DOM](/ja/docs/Web/API/Document_Object_Model) ツリーへ変更が加えられたことを監視することができる機能を提供します。これは DOM3 Events の仕様で定義されていた [Mutation Events](/ja/docs/Web/API/MutationEvent) 機能の置き換えとして設計されたものです。
 
 ## コンストラクター
 
@@ -23,7 +25,7 @@ slug: Web/API/MutationObserver
 
 ## Mutation Observer と resize イベントリスナーのカスタマイズとデモ
 
-<https://codepen.io/webgeeker/full/YjrZgg/>
+<https://codepen.io/milofultz/pen/LYjPXPw>
 
 ## 例
 
@@ -37,13 +39,12 @@ const targetNode = document.getElementById("some-id");
 const config = { attributes: true, childList: true, subtree: true };
 
 // 変更が発見されたときに実行されるコールバック関数
-const callback = function (mutationsList, observer) {
-  // Use traditional 'for loops' for IE 11
-  for (const mutation of mutationsList) {
+const callback = (mutationList, observer) => {
+  for (const mutation of mutationList) {
     if (mutation.type === "childList") {
-      console.log("A child node has been added or removed.");
+      console.log("子ノードが追加または削除されました。");
     } else if (mutation.type === "attributes") {
-      console.log("The " + mutation.attributeName + " attribute was modified.");
+      console.log(`${mutation.attributeName} 属性が変更されました。`);
     }
   }
 };
@@ -71,6 +72,6 @@ observer.disconnect();
 - {{domxref('PerformanceObserver')}}
 - {{domxref('ResizeObserver')}}
 - {{domxref('IntersectionObserver')}}
-- [A brief overview](https://updates.html5rocks.com/2012/02/Detect-DOM-changes-with-Mutation-Observers)
+- [A brief overview](https://developer.chrome.com/blog/detect-dom-changes-with-mutation-observers/)
 - [A more in-depth discussion](https://hacks.mozilla.org/2012/05/dom-mutationobserver-reacting-to-dom-changes-without-killing-browser-performance/)
 - [A screencast by Chromium developer Rafael Weinstein](https://www.youtube.com/watch?v=eRZ4pO0gVWw)