돌연변이 관찰자는 DOM 변화를 모니터링하기위한 인터페이스입니다. DOM 객체 트리에 변화가 있으면 돌연변이 관찰자에게 알립니다. 이 기사는 새로운 HTML5 기능 돌연변이 관찰자를 기반으로 편집자의 실행 취소 및 폴백 작업을 공유합니다. 관심있는 친구들은 돌연변이 관상 서버의 도입을 언급 할 것입니다.
MutationObserver는 개발자에게 특정 범위 내에서 DOM 나무가 변경 될 때 적절하게 응답 할 수있는 기능을 제공합니다. API는 DOM3 이벤트 사양에 도입 된 돌연변이 이벤트를 대체하도록 설계되었습니다.
돌연변이 관찰자는 DOM 변화를 모니터링하기위한 인터페이스입니다. DOM 객체 트리에서 변경이 발생하면 돌연변이 관찰자에게 알 수 있습니다.
돌연변이 관찰자는 다음과 같은 특징이 있습니다.• 모든 스크립트 작업이 실행되기 전에 완료되기를 기다립니다. 즉, 비동기 방법을 사용합니다.
• DOM 변경 레코드를 개별적으로 처리하는 대신 DOM 변경 레코드를 처리를위한 배열로 캡슐화합니다.
• DOM 노드에서 발생하는 모든 변경 사항을 관찰하거나 특정 유형의 변경 사항을 관찰 할 수 있습니다.
MDN 정보 : MutationObserver
MutationObserver는 생성자이므로 생성 할 때는 새로운 돌연변이 객체를 사용해야합니다.
돌연변이 관측기를 인스턴스화 할 때, 콜백 함수가 필요하며, 지정된 DOM 노드 (대상 노드)가 변경 될 때 호출됩니다.
호출되면 관찰자 객체는 두 매개 변수를 함수로 전달합니다.
1 : 첫 번째 파라미터는 여러 돌연변이 레코드 객체를 포함하는 배열입니다.
2 : 두 번째 매개 변수는 관찰자 객체 자체입니다.
예를 들어:
코드를 복사하십시오