DOM 변경을 감지/모니터링하는 가장 효율적인 방법?

StackOverflow https://stackoverflow.com/questions/2457043

문제

DOM의 변화를 감지하기위한 효율적인 메커니즘이 필요합니다. 바람직하게는 크로스 브라우저이지만 효율적인 수단이 있다면 ~ 아니다 크로스 브라우저, 실패 안전 크로스 브라우저 방법으로 이들을 구현할 수 있습니다.

특히 페이지의 텍스트에 영향을 줄 변경을 감지해야하므로 새, 제거 또는 수정 된 요소 또는 내부 텍스트 (innerHtml) 변경이 필요합니다.

나는 변경 사항을 제어 할 수 없기 때문에 (제 3 자 JavaScript가 포함 된 등으로 인한 것일 수 있음)이 각도에서 접근 할 수 없습니다. 어떻게 든 변경을 "모니터링"해야합니다.

현재 나는 "Quick'n'Dirty"메소드를 구현했습니다. body.innerHTML.length 간격으로. 이것은 물론 동일한 길이가 반환되는 변화를 감지하지는 않지만이 경우 "충분히 양호"입니다. 이런 일이 발생할 가능성은 매우 얇아서이 프로젝트에서는 변화를 감지하지 못하면 결과가 발생하지 않습니다. 손실 된 데이터에서.

문제 body.innerHTML.length 비싸다는 것입니다. 1에서 5 밀리 초 사이에 걸릴 수 있습니다. 빠른 브라우저, 그리고 이것은 많은 일을 많이 할 수 있습니다. 나는 또한 많은 수의 iframes를 다루고 있으며 모두 더해집니다. 이 작업을 수행하는 비용은 InnerHTML 텍스트가 브라우저에 의해 정적으로 저장되지 않으며 읽을 때마다 DOM에서 계산해야하기 때문입니다.

내가 찾고있는 답변의 유형은 "정확한"(예 : 이벤트)에서 "충분히 충분하다"에 이르기까지 모든 것입니다.

편집 : 나는 또한 수정 된 정확한 요소를 감지하는 것이 "좋은"것이지만 절대적인 필요성은 아니라고 지적해야한다. 어느 변화는 충분할 것입니다. 바라건대 이것은 사람들의 반응을 넓 힙니다. 나는 돌연변이 사건을 조사 할 것입니다. 그러나 여전히 IE 지원을위한 폴백이 필요합니다.

도움이 되었습니까?

해결책

http://www.quirksmode.org/js/events/domtree.html

JQuery는 이제 선택기에 해당하는 기존 및 미래 요소에 이벤트를 첨부하는 방법을 지원합니다. http://docs.jquery.com/events/live#typefn

또 다른 흥미로운 발견 - http://james.padolsey.com/javaScript/Monitoring-dom-Properties/

다른 팁

이를 최신 상태로 만들기 위해 DOM4 표준은 돌연변이 사건을 없애고 돌연변이 관찰자로 대체합니다. https://developer.mozilla.org/en-us/docs/web/api/mutationobserver

돌연변이 사건 당신이 찾고있는 것에 대한 W3 권장 사항입니다 ..

그들이 주변에 지원되는지 확실하지 않습니다 .. (즉, 그들을 지원하지 않을 것입니다 ..)

domnodeinserted 및 domnoderemoved 이벤트를 사용해 볼 수 있습니다. 퀴크 스 모드로 묘사하면서, 그들은 대부분의 브라우저에서 일하는데, 즉, 예외적으로 주목할만한 ...

http://www.quirksmode.org/dom/events/index.html

나는 최근에 정확히 그 일을하는 플러그인을 작성했습니다. jQuery.initialize

당신은 그것을 같은 방식으로 사용합니다 .each 기능

$(".some-element").initialize( function(){
    $(this).css("color", "blue"); 
});

의 차이 .each IS- 선택기가 필요합니다.이 경우 .some-element 앞으로이 선택기와 함께 새로운 요소를 기다리십시오. 그러한 요소가 추가되면 초기화됩니다.

우리의 경우 초기화 함수는 요소 색상을 파란색으로 변경합니다. 따라서 새로운 요소를 추가하면 (Ajax 또는 F12 Inspector 등이 있든 상관없이) :

$("<div/>").addClass('some-element').appendTo("body"); //new element will have blue color!

플러그인이 즉시 시작됩니다. 또한 플러그인은 하나의 요소가 한 번만 초기화되어 있는지 확인합니다. 그러므로 요소를 추가하면 .deatch() 몸에서 나서 다시 추가하면 다시 초기화되지 않습니다.

$("<div/>").addClass('some-element').appendTo("body").detach()
    .appendTo(".some-container");
//initialized only once

플러그인은 기반입니다 MutationObserver - IE9와 10에서는 README 페이지.

jQuery 돌연변이 이것도 기본적으로 지원합니다 height, width, scrollHeight 등 ... 그러나 약간의 추가 코드로 확장 할 수 있습니다.

http://www.jqui.net/jquery-projects/jquery-mutate-foricial/

도움이되기를 바랍니다

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top