[js: Mutation Observer] #js

mutation-observer.js

/**
 * https://ja.javascript.info/mutation-observer
 */
const origin = document.querySelector('p#origin')
const copy = document.querySelector('p#copy')

// origin の変更を検知して innerText を copy へ転記、的な...
const obs = new MutationObserver(mutations => {
  // mutations に変更内容の詳細が配列で入ってる感じ
  // 正直ここで origin を api から読み取ったほうが見やすいけど
  // options 次第で old value とったりとか凝ったこともできるぽい
  copy.innerText = mutations.at(-1).target.innerText
}).observe(origin, { childList: true })

// 購読破棄
obs.disconnect()