DOM変化の検出-Mutation ObserverとResizeObserver

先ごろ、プロジェクトにテストライブラリを適用する過程で、MutationObserver is not a constructorというエラーが相次いだ.(エラーの原因はバージョンの競合です)
長い間シャベルをしていましたが、おかげさまでピンぼけのMutationObserverをじっくり探すことができました.
そこで、今日はDOMの変更を検出するMutionObserverとResizeObserverを残します.
ブラウザでは、DOMに何らかの変化が発生した場合、これらの変化を検出して特定のイベントを引き起こす必要がある場合があります.JavaScriptは、DOMの変更を簡単に検出できる5つの内蔵インタフェースを提供しています.

IntersectionObserver:ルート領域(ビューポート)とターゲットオブジェクトのオーバーラップを監視

MutationObserver:オブジェクトの属性変更を監視

PerformanceObserver:プロセスパフォーマンスの監視

ReportingObserver:Webサイトの標準とポリシーの遵守を監視

ResizeObserver:オブジェクトの幅と高さの変化を監視

MutationObserver

ここで、MutationObserverは、DOMプロパティ、テキスト、サブノードの変更を検出できるAPIです.
特定のノードオブジェクトを観察し、変更が発生したときにコールバック関数を実行します.

const observer = new MutationObserver(callback);

const callback = (mutationList, observer) => {
  console.log(mutationList);
};

これにより、MutationObserverコンストラクション関数によって生成され、コールバックが伝達される必要があります.observerオブジェクトを作成すると、トレースされたDOMノードがconfigに接続されます.
configは、検出する変更属性をbooleanと指定できます.(傍観者)
MutationObserver構成のオプションにアクセスできます.

childList : 자식 노드에 발생하는 변경사항

subtree : 하위 모든 노드들의 변경사항

attributes : 해당 노드의 attribute 속성

attributeFilter : 추적을 원하는 attribute name들을 배열 형태로도 전달 가능

characterData : node.data에서 발생하는 변경사항 (text content)

attributeOldValue : true이면 변경되기 이전과 이후의 attribute value를 콜백에서 모두 전달받을 수 있다. false인 경우 새로운 value만 콜백에 전달된다.

characterDataOldValue : true이면 변경되기 이전과 이후의 node.data를 콜백에서 모두 전달받을 수 있다. false인 경우 새로운 값만 콜백에 전달된다.

ノードの追跡を開始すると、指定された変更が行われるたびにコールバックが実行されます.

const el = document.getElementById('root');

observer.observe(el, {
  childList: true,
  subtree: true,
  attributeOldValue: true,
});

コールバック関数は、変更されたマルチレコードオブジェクトの形式を最初のパラメータで表す配列を受け入れます.

const callback = (mutationList, observer) => {
  console.log(mutationList, observer);
};

// mutationList를 찍어보면...
mutationList = [{
  type: "childList",
  target: <div#elem>,
  removedNodes: [<b>],
  nextSibling: <text node>,
  oldValue: null,
  previousSibling: <text node>
  // other properties empty
}, {
  type: "characterData"
  target: <text node>
}];

最初のパラメータMutationRecord配列には、変更に関する情報が含まれています.MutationRecordオブジェクトには、次のプロパティがあります.
MutationRecordに表示されるプロパティ.

type : 변경사항의 타입. 'attributes', 'characterData', childList' 중 하나의 값을 가진다. "attributes" - 속성이 변경됨 "characterData" - 데이터 변경시 (text node) "childList" - 자식 노드가 추가되거나 제거됨

target : 변경사항이 발생한 타겟 노드

addedNodes/removedNodes : 추가되거나 제거된 노드

previousSibling/nextSibling : 추가되거나 제거된 노드의 previous/next 형제 노드

attributeName/attributeNamespace : 변경된 속성의 이름

oldValue : 변경 이전의 값. 속성이나 텍스트가 변경되었을 경우, attributeOldValue/characterDataOldValue 옵션을 주었을 경우에 받아올 수 있다.

また、コールバック関数の2番目のパラメータはobserverオブジェクト自体を受け入れることができます.

変更追跡が完了したら、DOM変更通知の受信を停止するMutationObserverインスタンス.
指定したdisconnect関数を使用して、変更追跡を停止できます.

observer.disconnect();

ResizeObserver

ResizeObserverは、MutationObserverと同様にDOMオブジェクトのサイズ変化を検出します.要素のborder box、content box、およびSVGeelementのbounding boxの変化を正確に検出する.
インスタンスを作成したら、コールバック関数を渡し、observe()を実行してトレースを開始します.

const observer = new ResizeObserver(callback);
const el = document.getElementById('root');

const callback = (entries, observer) => {
  entries.forEach(entry => {
    console.log(entry);
  }

observer.observe(el, options);

ResizeObserverのoptionsは、属性boxが1つしかありません.変更を追跡するcss boxモデルのオプションを設定します.次のいずれかの値を含めることができます.

content-box(デフォルト)

border-box

device-pixel-content-box

これにより,コールバック関数はResizeObserverEntryインスタンスの配列とobserver自身をパラメータとして得ることができる.
ResizeObserverEntryインスタンス配列に含まれる属性.

contentRect(legacy) : 관찰 대상의 사각형 정보(DOMRectReadOnly)

target(legacy) : 관찰 대상 요소(Element)

contentBoxSize : 관찰 대상의 content-box(content) 크기

borderBoxSize : 관찰 대상의 border-box(content + padding + border) 크기

ResizeObserverはIEをサポートしていないため、実際のプロジェクトで使用するには複数の文字を使用する必要があります.@juggle/resize-observer、resize-observer-polyfillなどの多機能ペン.
デバイス幅が一定画素以下に縮小された場合、コールバック関数を使用するか、セグメントサイズの変化を検出する必要がある場合に使用します.
注意:
MDN
( https://developer.mozilla.org/ko/docs/Web/API/MutationObserver#mutationobserverinit )
MutationObserver
( https://ko.javascript.info/mutation-observer )
Resize Observer-元素の大きさの変化を観察する
( https://heropy.blog/2019/11/30/resize-observer/ )