web-dev-qa-db-ja.com

ドキュメントセレクターとウィンドウセレクターの違いは何ですか？

ユーザー入力を取得して画面に表示する次のJQuery関数があります。 $(document)と$(window)の両方を選択すると、関数は機能します。どちらのセレクターを使用する場合の欠点は何ですか？これらのセレクターとその違いの詳細はどこで確認できますか？

前もって感謝します。

  $(document).keypress(function(e) {
      if(e.keyCode == 13) {
          var id = $("input#example").val()
          console.log(id);
          $('#data').append(id);
      }
  });
jqueryjquery-selectorswindowdocument
26
JZ.

jQuery dom selector でwindowまたはdocumentオブジェクトを使用している間、ほとんどの場合、2つのオブジェクトの違いに気付くことはありません。

ただし、これらは同じオブジェクトではないことに注意することが重要です。

window-ビューポートを参照します。 JavaScriptのメイングローバルオブジェクトとして使用されます。
document-windowの直接の子孫。 ドキュメントツリーのルート を参照します。

すべてのDOM要素はdocumentの子孫です。これはwindowの直接の子孫です。

12
Shaz

$(window)セレクタはビューポートを選択するためのものです

$(document)セレクターは、ドキュメント全体（つまり、<html>タグ（ビューポートを超えても）。

21
Itai Sagi

この質問に答えるために、DOMの定義から始めましょう。一般的には "document"として知られています。

ドキュメントオブジェクトモデル（DOM）は、有効なHTMLおよび整形式のXMLドキュメント用のアプリケーションプログラミングインターフェイス（API）です。ドキュメントの論理構造と、documentへのアクセスおよび操作方法を定義します。 DOM仕様では、「ドキュメント」という用語は広義で使用されます。

ここで、browsing contextsについて私が見つけたものについて少し説明しましょう。これは、DocumentとWindowの通常の関係です。ただし、Documentはbrowsing contextなしで存在する可能性がありますが、jqueryでは決して表示されないはずです。

ユーザーはDocumentのメインビューを操作します。ビューは、Documentをユーザーエージェントに提示するために使用されているメディアとして定義されます。画面、印刷、スピーチ。メインビューはデフォルトのビューであり、AbstractViewインターフェースを実装するWindowオブジェクトによって表されます。

簡単に言うと、windowはコンテナであり、documentはコンテンツです。ただし、理解を深めるために、少なくともこのドキュメントをざっと読むことをお勧めします。

出典：

1
Edd