DOMNodeInserted在身体执行DOM操作时表现异常 [英] DOMNodeInserted behaves weird when performing DOM manipulation on body
问题描述
以下代码使用 DOMNodeInserted 在 body 元素插入DOM后执行DOM操作。我知道 $（document）.ready（function {}）; 足以做这个工作，但是我想测试 DOMNodeInserted 事件。
The following code uses DOMNodeInserted to perform DOM manipulation on the body element once it is inserted into the DOM. I know $(document).ready(function { }); is enough to do the job, but I want to test the DOMNodeInserted event.
<!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操作是将所有 innerHTML body into < div class =wrapper>< / div> / code>。
As you can see, the DOM manipulation is to wrap all innerHTML of body into <div class="wrapper"></div>.
它可以工作。然而，一件奇怪的事情发生了。如果您使用Firebug或Chrome开发者工具检查被操纵的正文，您可以发现添加了一个神秘元素。它是：
It does work. However, a weird thing happened. If you use Firebug or Chrome Developer Tool to inspect the manipulated body, you can find that there was a mysterious element being added. It is:
<div style="padding: 0px; margin: 1px 0px 0px; border: 0px none; visibility: hidden; width: 0px; height: 0px; position: static; top: 0px;"></div>
尽管操作成功，Firebug显示了此错误：
And despite the success of the manipulation, Firebug shows this error:
- 没有找到节点（jquery.min.js第2行）
Chrome开发者工具显示此错误：
And Chrome Developer Tool shows this error:
- 未捕获错误：NOT_FOUND_ERR：DOM异常8（jquery.min.js第2行）
但是，如果操作只是添加className，则没有错误：
But if the manipulation is just adding className, there is no error:
document.body.className += ' js';
最奇怪的是，如果你删除了jQuery引用，事件不行。这是否意味着本地 DOMNodeInserted 事件有时需要jQuery工作？
The most weird thing is, if you remove the jQuery reference, the event won't work. Does that mean the native DOMNodeInserted event sometimes needs jQuery to work?
由方式，如果DOM操作使用jQuery语法：
By the way, if the DOM manipulation is using jQuery syntax:
$('body').wrapInner('<div class="wrapper"></div>');
然后神秘元素变得更加奇怪：
Then the mysterious element becomes more weird:
<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>
总而言之，我们可以看到上述实验中的三个问题：
To sum up, we can see three issues from the above experiment:
- 正在添加的奇怪元素
- 发生错误尽管DOM操作的成功
-
DOMNodeInserted有时似乎需要jQuery工作
- weird element(s) being added
- an error occurred despite the success of the DOM manipulation
DOMNodeInsertedsometimes seems to need jQuery to work
任何解释将不胜感激。谢谢。
Any explanation would be appreciated. Thanks.
推荐答案
jQuery在加载时开始一些测试（第1537行在未分解版本中）
jQuery starts some tests when it has been loaded (line 1537 in the un-minified version)
// Run tests that need a body at doc ready
jQuery(function() {
var container, outer, inner, table, td, offsetSupport,
...
为此，它添加一个 div 元素与某些样式，这是您发现的神秘元素。
For this it adds a div element with some stylings. That is your mysterious element you've found.
由于你的事件处理程序，这个元素被包裹在另一个 div 中。在第1654行，jQuery想要删除他们的测试元素
Because of your event handler, this element gets wrapped within another div. At line 1654 jQuery wants to remove their test element with
body.removeChild( container );
由于容器不再是身体的子元素，所以失败了。
which failes because the container isn't a child element of body anymore.
编辑
在您的示例中，您不是向DOM添加元素，因此事件不能触发;）
Edit
In your example you're not adding an element to the DOM so the event can't fire ;)
window.onload = function() {
document.body.appendChild(document.createElement("div")); // will fire DOMNodeInserted
}
为什么它与jQuery工作？因为jQuery在DOM中添加了一个元素（这个神秘的测试元素）：）
Why it "works" with jQuery? Because jQuery adds an element to the DOM (the mysterious test element) :)
这篇关于DOMNodeInserted在身体执行DOM操作时表现异常的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
