javascript - JavaScript から隠されている文書要素

Question

私が現在取り組んでいる Web アプリケーションで、javascript ドキュメントの可視性を扱う風変わりな何かに遭遇しました。このアプリケーションには、ノードとエッジのネットワークを表す InfoVis グラフを含む div があり、ドラッグ ズーム機能を実装しています。よく知らない場合 (おそらく)、InfoVis は、グラフやその他の視覚化を HTML5 キャンバスにレンダリングする js ライブラリです。

外観と機能をカスタマイズするために、InfoVis のコア .js に多くの変更を加えました。そこにドラッグ ズームを実装する予定でした。

<script../>私が取り組んでいる .html ページは、InfoVis コアとタグ付きの独自の .js ファイルの両方をロードします。

InfoVis コアでonMouseDown: function(e) { alert("click"); }は、キャンバスの背景の定義は期待どおりに機能しますが、(実際の .html ファイルでインスタンス化され、.css ファイルでスタイル設定された) div を次のように変更すると、次のようになります。

onMouseDown: function(e) {
  e = e || window.event;
  dragging = true;
  $("#dragZoom")[0].style = "display: block; width: 0px; height: 0px; left: "+e.clientX+"; top: "+e.clientY+";";
}

div の新しいスタイルを設定するに$("#dragZoom")は、未定義[0]です。つまり、javscript ブロックはドキュメント内の div を認識できません。

ただし、別の .js ファイル (InfoVis コアではない) で関数を定義すると、function foo() { alert($("#dragZoom")[0]); }このように foo() を呼び出すことができます。

onMouseDown: function(e) {
  foo();
}

そして foo() は div にアクセスできます!

両方が同じ方法でロードされているときに、これが 1 つの .js ファイルから見えて、別の .js ファイルから見えないのはなぜですか? これは私が何かを達成するのを妨げているわけではありませんが、それはかなり奇妙だと思い、何が起こっているのかを知りたいと思いました. 情報をありがとう！