DOM 노드 변경에 MutationObserver API를 사용하는 방법
시나리오가 있습니다. 리타 (Rita), 잡지 작가가 그녀의 기사를 온라인에서 편집 중입니다. 그녀는 변경 사항을 저장하고 메시지를 봅니다. “변경 사항이 저장되었습니다.!” 그때 그녀는 그녀가 놓친 오타를 알아 차립니다. 그녀는 그것을 고치고 곧 클릭 할 것입니다. “구하다”, 그녀가 상사로부터 화가 난 전화를받을 때.
통화가 끝난 후, 그녀는 화면으로 돌아가보고, “변경 사항이 저장되었습니다.!” 그녀의 컴퓨터와 폭풍우가 사무실 밖에서 중단된다..
스토리 텔링에 대한 나의 부적응 함과 별개로, 우리는 짧은 시나리오에서 지속적인 메시지가 양조되는 문제를 발견했습니다. 그래서 우리는 가능한 한 그것을 피하기로 결정하고 그것을 클릭하여 사용자가 확인하도록 프롬프트하는 것을 사용합니다. 독자적으로 사라진다.. 빠른 메시지를 위해 두 번째 메시지를 사용하는 것이 좋습니다..
우리는 이미 페이지에서 요소를 사라지게하는 방법을 알고 있으므로 문제가되지 않습니다. 우리가 알아야 할 것은 언제 나타 났습니까?? 우리는 그럴듯한 시간 후에 사라지게 할 수 있습니다..
MutationObserver API
전반적으로 DOM 요소 (예 : 메시지 div) 또는 다른 노드가 변경되면이를 알 수 있어야합니다. 오랫동안 개발자는 기본 API가 없기 때문에 해킹 및 프레임 워크에 의존해야했습니다. 그러나 그것은 바뀌었다..
우리는 지금 MutationObserver (이전의 돌연변이 이벤트). MutationObserver 속성 및 메서드 집합을 포함하는 JavaScript 네이티브 개체입니다. 그것은 우리에게 어떤 노드에서든 변화를 관찰한다. DOM 요소, 문서, 텍스트 등과 같은 것입니다. 노드 추가 또는 제거 및 노드의 속성 및 데이터 변경.
더 나은 이해를위한 예를 보도록하겠습니다. 먼저 Rita가 본 것처럼 버튼 클릭시 메시지가 나타나는 위치를 설정합니다. 그럼 우리는 해당 메시지 상자에 돌연변이 관찰자를 생성하고 연결하십시오. 과 메시지를 자동으로 숨기기위한 논리 코드. 실제적 지식?
노트: 당신은 어느 시점에서 당신의 머리에 이미 나에게 물어볼 수도 있습니다. “왜 자바 스크립트에서 버튼 클릭 이벤트 내부에서 메시지를 숨기지 않을까요??” 필자의 예에서는 서버로 작업하지 않기 때문에 클라이언트는 메시지를 표시하고 너무 쉽게 숨길 수 있습니다. 그러나 서버가 DOM 콘텐츠를 변경하기로 결정한 경우 Rita의 편집 도구와 마찬가지로 클라이언트는 경고 상태를 유지하고 대기 할 수 있습니다.
먼저 버튼 클릭시 메시지를 표시하는 설정을 만듭니다..
var msg = document.querySelector ( 'msg msg), SUCCESSMSG = "변경 사항이 저장되었습니다!"; / * 버튼 클릭 이벤트 추가 * / document .querySelector ( 'button') .addEventListener ( 'click', showMsg); function showMsg () msg.textContent = SUCCESSMSG; msg.style.background = '청록색';
초기 설정이 실행되면 다음을 수행 할 수 있습니다.
- 만들기
MutationObserver객체가 사용자 정의 콜백 함수 (함수는 포스트의 뒷부분에서 정의 됨)를 갖습니다. 이 기능은 다음에 의해 관찰 된 모든 돌연변이에서 실행됩니다.MutationObserver. - 설정 개체를 만들어서 관찰 할 변종의 종류를 지정하십시오.
MutationObserver. - 바인딩
MutationObserver대상에 'msg'div우리의 예에서.
(mutationObserverCalback (mutations);), / * 2) 설정 객체 만들기 * / config = MutationObserver (mutationObserverCallback (mutations) 참된; / * 3) Glue'em all * / observer.observe (msg, config); ) ();
아래의 속성 목록이 있습니다. 구성 다른 종류의 돌연변이를 식별하는 객체. 이 예에서는 메시지 텍스트 용으로 작성된 자식 텍스트 노드 만 다루기 때문에 childList 재산.
관찰 된 돌연변이의 종류
| 재산 | 설정시 참된 |
| childList | 대상의 자식 노드 삽입 및 제거가 관찰되었습니다.. |
| 속성들 | 목표 속성의 변화가 관찰됩니다.. |
| characterData | 목표 데이터의 변화가 관찰됩니다.. |
이제 모든 관찰 된 돌연변이에 실행되는 콜백 함수.
function mutationObserverCallback (돌연변이) / * 첫 번째 돌연변이를 잡아라. * / var mutationRecord = mutations [0]; / * 자식 노드가 추가 된 경우 2s 뒤에 msg를 숨 깁니다. * / if (mutationRecord.addedNodes [0]! == undefined) setTimeout (hideMsg, 2000); function hideMsg () msg.textContent = "; msg.style.background = '없음';
우리는 메시지를 div, 우리는 단지 관찰 된 첫 번째 돌연변이를 잡고 텍스트 노드가 삽입되었는지 확인합니다. 하나 이상의 변화가 일어나면 우리는 돌연변이 정렬.
모든 돌연변이가 돌연변이 배열은 객체에 의해 표현된다. MutationRecord 다음 속성을 가진.
재산 MutationRecord
| 재산 | 보고 |
| addedNodes | 빈 배열 또는 추가 된 노드의 배열. |
| attributeName | 추가, 제거 또는 변경된 속성의 Null 또는 이름. |
| attributeNamespace | 추가, 제거 또는 변경된 속성의 Null 또는 네임 스페이스. |
| nextSibling | 추가되거나 제거 된 노드의 널 또는 다음 형제. |
| oldValue | 속성 또는 데이터의 Null 또는 이전 값이 변경됨. |
| 이전 형제 | 추가되거나 제거 된 노드의 널 또는 이전 형제. |
| removedNodes | 빈 배열 또는 제거 된 노드의 배열. |
| 목표 | 에 의해 타겟팅 된 노드 MutationObserver |
| 유형 | 관찰 된 돌연변이 유형. |
그리고 그게 다야. 마지막 단계에서 코드를 함께 넣어두면됩니다..
브라우저 지원
참고
- “W3C DOM4 변이 관찰자.” W3C. 편물. 2015 년 6 월 19 일
- “MutationObserver.” Mozilla 개발자 네트워크. 편물. 2015 년 6 월 19 일.
