0

次のコードは、要素が DOM に挿入されるとDOMNodeInserted、その要素に対して DOM 操作を実行するために使用します。body仕事をするのに十分であることはわかっていますが、イベント$(document).ready(function { });をテストしたいと思います。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>


ご覧のとおり、DOM 操作は のすべてinnerHTMLをbodyにラップすること<div class="wrapper"></div>です。

それは機能します。しかし、奇妙なことが起こりました。Firebug や Chrome Developer Tool を使って操作した を調べるbodyと、謎の要素が追加されていることがわかります。それは：

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

操作が成功したにもかかわらず、Firebug は次のエラーを表示します。

  • ノードが見つかりませんでした (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>



要約すると、上記の実験から 3 つの問題を確認できます。

  • 奇妙な要素が追加されています
  • DOM 操作が成功したにもかかわらずエラーが発生した
  • DOMNodeInsertedjQueryが機能する必要があるようです

説明をいただければ幸いです。ありがとう。

4

1 に答える 1

2

jQuery はロードされるといくつかのテストを開始します (縮小されていないバージョンでは 1537 行目)。

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

このために、divいくつかのスタイルを持つ要素を追加します。それがあなたmysteriousが見つけたあなたの要素です。

イベント ハンドラーのため、この要素は別の 内にラップされますdiv。1654 行目で、jQuery はテスト要素を削除しようとしています。

body.removeChild( container );

これcontainerは body の子要素ではないため失敗します。

編集
あなたの例では、DOMに要素を追加していないので、イベントは発生しません;)

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

jQueryで「機能する」のはなぜですか? jQuery は DOM に要素を追加するため (謎のテスト要素) :)

于 2012-07-10T05:53:45.477 に答える