Javascript 在主体上执行DOM操作时，DOMNodeInserted的行为异常_Javascript_Jquery_Events_Dom

Javascript 在主体上执行DOM操作时，DOMNodeInserted的行为异常

javascript jquery events dom

Javascript 在主体上执行DOM操作时，DOMNodeInserted的行为异常,javascript,jquery,events,dom,Javascript,Jquery,Events,Dom,以下代码使用DOMNodeInserted在body元素插入DOM后对其执行DOM操作。我知道$（文档）.ready（函数{}）足以完成这项工作，但我想测试DOMNodeInserted事件 <!DOCTYPE html> <html lang="en"> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></scr

以下代码使用

DOMNodeInserted

在

body

元素插入DOM后对其执行DOM操作。我知道

$（文档）.ready（函数{}）

足以完成这项工作，但我想测试

DOMNodeInserted

事件

<!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>

尽管操作成功，Firebug还是显示了以下错误：

未找到节点（jquery.min.js第2行）

Chrome Developer Tool显示此错误：

未捕获错误：未找到错误：DOM异常8（jquery.min.js第2行）

但如果操作只是添加类名，则不会出现错误：

document.body.className += ' js';

最奇怪的是，如果删除jQuery引用，事件将无法工作。这是否意味着本机

DOMNodeInserted

事件有时需要jQuery才能工作

顺便说一下，如果DOM操作使用jQuery语法：

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

$（'body'）.wrapInner（''）；

然后神秘的元素变得更加怪异：

<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才能工作

如有任何解释，将不胜感激。谢谢。

jQuery在加载后会启动一些测试（未精简版本中的第1537行）

为此，它添加了一个带有一些样式的

div

元素。这就是你发现的神秘元素

由于您的事件处理程序，此元素被包装在另一个

div

中。在第1654行，jQuery希望使用

body.removeChild( container );

它失败了，因为

容器不再是body的子元素
编辑

在您的示例中，您没有向DOM添加元素，因此事件无法触发；）
为什么它与jQuery“一起工作”？因为jQuery向DOM添加了一个元素（神秘的测试元素）：）感谢@Andreas解释这个问题！非常感谢你，安德烈亚斯。现在我明白了：）
// Run tests that need a body at doc ready
jQuery(function() {
var container, outer, inner, table, td, offsetSupport,
...

body.removeChild( container );

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