Trình xử lý cho các nút DOM được tạo động khi chúng được chèn

Question

Tôi thích chạy tập lệnh tùy chỉnh trên các trang mà tôi không sở hữu hoặc kiểm soát. Nhiều lần các trang này có nội dung được tạo động mà tôi muốn áp dụng một hàm.

Điều này có khả thi không? Nếu vậy, làm thế nào tôi có thể làm điều này? Lý tưởng nhất là tôi đang tìm kiếm một cái gì đó sống phương pháp của live jQuery, ngoại trừ thay vì ràng buộc một sự kiện như click nó sẽ giống như một sự kiện xảy ra khi phần tử được tải trong DOM. load sự kiện sẽ hoạt động đối với một số yếu tố nhưng tôi không nghĩ cho tất cả ...

Đối với câu hỏi này, giả sử bạn không thể xem hoặc thay đổi mã đang chèn các nút DOM. Tôi muốn một kỹ thuật mà tôi có thể sử dụng trong một usercript hoặc bookmarklet có thể được sử dụng trên nhiều trang web không liên quan.

Chỉnh sửa: Tôi đang tìm kiếm một cái gì đó để sử dụng trên các màu sắc nghịch tôi bookmarklet: JavaScript: Invert color on all elements of a page

Answer 1

Giả sử bạn đang chạy một trình duyệt như Firefox hoặc Chrome, bạn có thể lắng nghe cho sự kiện DOMNodeInserted:

$(document).on('DOMNodeInserted', function(e) { 
    $(e.target).css({ color : '#c00' }); 
}); 

$('body').append('<div>test</div>');​ 

Fiddle: http://jsfiddle.net/VeF6g/ (có thể thất bại trong IE)

Answer 2

này là khá khó khăn để thực hiện, bởi vì không có sự kiện khả thi cho phản ứng với những thay đổi DOM. Thay vào đó, tôi thà gắn bó với sự kiện.

Nhưng có một số sự kiện mà bạn có thể thấy hữu ích hoặc thú vị. Trên Mozilla Developer Network's list of DOM events bạn có thể thấy Eg .:

• DOMNodeInserted,
• DOMNodeInsertedIntoDocument,
• DOMNodeRemoved,
• DOMElementNameChanged,

Tất cả trong số họ tuy nhiên được đánh dấu là dự thảo W3C.

Answer 3

Cách chung để phát hiện chèn nút là sử dụng sự kiện đột biến DOMNodeInserted.

Tôi quan tâm đến mọi nút thực sự. Tôi đang thay đổi màu sắc của mọi thứ trên trang.

Vì mục đích này, giải pháp tốt hơn là chèn biểu định kiểu động, đủ với cờ !important. Nếu bạn chỉ muốn thay đổi màu sắc, tôi khuyên bạn nên mở rộng Stylish (Stylish for Chrome) thay vì GreaseMonkey.

Answer 4

Nếu bạn không có truy cập vào một thư viện như jQuery, đây là cú pháp trong only- Javascript:

document.addEventListener('DOMNodeInserted', nodeInsert) 

function nodeInsert() { 
    event.srcElement.style.color = '#ffffff' 
} 

Tôi nghĩ rằng nó sẽ hoạt động trong hầu hết các trình duyệt.

Answer 5

Đây là một cách hay để xử lý sự kiện chèn nút. thiết lập hình ảnh động cho các yếu tố mà bạn sẽ thêm bằng cách sử dụng css.

<style type="text/css"> 

/* set up the keyframes; remember to create prefixed keyframes too! */ 

@keyframes nodeInserted { 
from { opacity: 0.99; } 
to { opacity: 1; } 
} 

#parent > button { 
animation-duration: 0.001s; 
animation-name: nodeInserted; 
} 

</style> 

#parent là id cho div, trong đó tôi đang đi để thêm nút của động.

<script type="text/javascript"> 

    var insertListener = function(event){ 
     if (event.animationName == "nodeInserted") { 
      // This is the debug for knowing our listener worked! 
      // event.target is the new node! 
      console.warn("Another node has been inserted! ", event, event.target); 
     } 
    } 

    document.addEventListener("animationstart", insertListener, false); // standard + firefox 
    document.addEventListener("MSAnimationStart", insertListener, false); // IE 
    document.addEventListener("webkitAnimationStart", insertListener, false); // Chrome + Safari 

    setInterval(function(){ 

     var btn = document.createElement("BUTTON"); 

     var t = document.createTextNode("CLICK ME");  // Create a text node 

     btn.appendChild(t);   

     document.getElementById("parent").appendChild(btn); 

    }, 2000); 

</script>