DOMNodeInserted在對主體執行DOM操作時表現怪異

下面的代碼使用DOMNodeInserted對body元素插入DOM後執行DOM操作。我知道$(document).ready(function { });就足夠完成這項工作，但我想測試DOMNodeInserted事件。DOMNodeInserted在對主體執行DOM操作時表現怪異

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
    <script> 
     function DOMmanipulation() { 
      if (document.body) { 
       document.removeEventListener('DOMNodeInserted', DOMmanipulation); 
       // DOM manipulation start 
       document.body.innerHTML = '<div class="wrapper">' + document.body.innerHTML + '</div>'; 
       // DOM manipulation end 
      } 
     } 
     if (document.addEventListener) { 
      document.addEventListener('DOMNodeInserted', DOMmanipulation); 
     } 
    </script> 
</head> 
<body> 
    <p>Lorem ipsum dolor sit amet.</p> 
</body> 
</html>

正如你所看到的，DOM操作是的body所有innerHTML包裝成<div class="wrapper"></div>。

它確實有效。然而，一件奇怪的事發生了。如果您使用Firebug或Chrome開發人員工具來檢查被操縱的body，您會發現有一個神祕的元素被添加。它是：

<div style="padding: 0px; margin: 1px 0px 0px; border: 0px none; visibility: hidden; width: 0px; height: 0px; position: static; top: 0px;"></div>

而且儘管操作成功，螢火顯示了這個錯誤：

節點沒有被發現（jquery.min.js 2號線）

和Chrome開發人員工具顯示此錯誤：

未捕獲錯誤：NOT_FOUND_ERR：DOM異常8（jquery.min.js第2行）

但如果操作是剛剛加入的className，沒有錯誤：

document.body.className += ' js';

最奇怪的是，如果刪除了jQuery的參考，該事件將無法工作。這是否意味着本地DOMNodeInserted事件有時需要jQuery才能正常工作？

順便說一句，如果DOM操作使用jQuery的語法：

$('body').wrapInner('<div class="wrapper"></div>');

然後神祕的元素變得更加怪異：

<div style="padding: 0px; margin: 1px 0px 0px; border: 0px; visibility: hidden; width: 0px; height: 0px; position: static; top: 0px; zoom: 1; "> 
    <div style="position: absolute; top: 0px; left: 0px; width: 1px; height: 1px; padding: 0px; margin: 1% 0px 0px; border: 0px; visibility: hidden; "> 
     <div style="position: relative; top: 0px; left: 0px; width: 1px; height: 1px; padding: 0px; margin: 0px; border: 5px solid rgb(0, 0, 0); display: block; overflow: hidden; "> 
      <div style="padding: 0px; margin: 0px; border: 0px; display: block; overflow: hidden; "></div> 
     </div> 
     <table style="position:absolute;top:0;left:0;width:1px;height:1px;padding:0;margin:0;border:5px solid #000;" cellpadding="0" cellspacing="0"><tbody><tr><td></td></tr></tbody></table> 
    </div> 
</div>

綜上所述，我們可以看到以上實驗中的三個問題：

怪異的元素（一個或多個）被添加
發生了錯誤，儘管DOM操作的成功
DOMNodeInserted有時似乎需要jQuery的工作

任何解釋，將不勝感激。謝謝。

來源

2012-07-10 Ian Y.

，當它已被加載（在未精縮版本線1537）

// Run tests that need a body at doc ready 
jQuery(function() { 
var container, outer, inner, table, td, offsetSupport, 
...

爲此，它增加了一個div元件與一些花式jQuery的啓動一些測試。那是你找到的mysterious元素。

由於您的事件處理程序，此元素被封裝在另一個div中。在行1654 jQuery的希望與

body.removeChild(container);

這failes因爲container不是身體的子元素刪除了他們的測試元件。

編輯
在您的例子你不添加元素到DOM因此事件不能開除;）

window.onload = function() { 
    document.body.appendChild(document.createElement("div")); // will fire DOMNodeInserted 
}

爲什麼它「作品」與jQuery？因爲jQuery向DOM（神祕測試元素）添加了一個元素:) :)

來源

2012-07-10 05:53:45 Andreas

感謝@Andreas解釋這個問題！ – 2012-07-10 06:35:48

@IanY。我錯過了第三部分^^看看我的編輯 – Andreas 2012-07-10 07:54:32

非常感謝你，@Andreas。現在我明白了：） – 2012-07-10 08:17:26

DOMNodeInserted在對主體執行DOM操作時表現怪異

回答

相關問題