Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://developer.cdn.mozilla.net/ja/docs/Web/API/MutationObserver/MutationObserver below:

MutationObserver: MutationObserver() コンストラクター - Web API

Baseline Widely available

DOM の MutationObserver() コンストラクターは、MutationObserver インターフェイスの一部で、指定されたコールバックを DOM イベントが発生したときに実行するオブザーバーを作成して返します。

DOM の監視はすぐに開始されるわけではありません。最初に observe() メソッドを呼び出し、DOM のどの部分を監視し、どのような変更を監視するかを決めなければなりません。

new MutationObserver(callback)

callback

対象となるノードやサブツリー、および指定されたオプションの条件を満たす DOM の変更が起きるたびに呼び出される関数です。

この callback 関数は、2 つの引数を受け取ります。

1. 発生したそれぞれの変更を記述した MutationRecord オブジェクトの配列。
2. callback を呼び出した MutationObserver です。これは MutationObserver.disconnect() を使用してオブザーバーを切断するときによく使われます。

詳細については、以下の例を参照してください。

指定されたコールバックを DOM の変更が発生したときに呼び出すように設定された MutationObserver オブジェクト。

この例には、リストに <li> 要素を追加するボタンと、リストから最初の <li> を除去するボタンがあります。

リストの変更を通知してもらうために、MutationObserver を使用します。コールバック内で、追加と除去をログ出力し、リストが空になったらすぐにオブザーバーを切断します。

「例をリセット」ボタンは、この例を元の状態にリセットします。

<button id="add">子を追加</button>
<button id="remove">子を除去</button>
<button id="reset">例をリセット</button>

<ul id="container"></ul>

<pre id="log"></pre>

#container,
#log {
  height: 150px;
  overflow: scroll;
}

#container li {
  background-color: paleturquoise;
  margin: 0.5rem;
}

const add = document.querySelector("#add");
const remove = document.querySelector("#remove");
const reset = document.querySelector("#reset");
const container = document.querySelector("#container");
const log = document.querySelector("#log");

let namePrefix = 0;

add.addEventListener("click", () => {
  const newItem = document.createElement("li");
  newItem.textContent = `item ${namePrefix}`;
  container.appendChild(newItem);
  namePrefix++;
});

remove.addEventListener("click", () => {
  const itemToRemove = document.querySelector("li");
  if (itemToRemove) {
    itemToRemove.parentNode.removeChild(itemToRemove);
  }
});

reset.addEventListener("click", () => {
  document.location.reload();
});

function logChanges(records, observer) {
  for (const record of records) {
    for (const addedNode of record.addedNodes) {
      log.textContent = `追加: ${addedNode.textContent}\n${log.textContent}`;
    }
    for (const removedNode of record.removedNodes) {
      log.textContent = `除去: ${removedNode.textContent}\n${log.textContent}`;
    }
    if (record.target.childNodes.length === 0) {
      log.textContent = `切断しました\n${log.textContent}`;
      observer.disconnect();
    }
    console.log(record.target.childNodes.length);
  }
}

const observerOptions = {
  childList: true,
  subtree: true,
};

const observer = new MutationObserver(logChanges);
observer.observe(container, observerOptions);

「子を追加」をクリックするとリストアイテムが追加され、「子を除去」をクリックするとリストアイテムが除去されます。 オブザーバーのコールバックは追加と除去をログ出力します。 リストが空になるとすぐに、オブザーバーは「切断」メッセージをログ出力し、オブザーバーを切断します。

「例をリセット」ボタンを押すと、この例が再読み込みされるので、もう一度試すことができます。

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4