16
19

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

jQueryの「document」の意味とは?

Posted at

documentってどんな役割?

JavaScriptでdocumentっていう記述がよく出てきますよね。


$(document).on('click', '【セレクタ】', function ()
 {
 // 何かの処理
});

あれってどんな役割をしているのでしょうか?

documentとは?

JavaScriptでdocumentオブジェクトを活用することで、HTML要素へ簡単にアクセスすることができます。

documentを使ってできること

documentを使ってできることをいくつか紹介します。

URL取得や画面遷移をする:location

locationプロパティを使うと、現在開いているWebページのURLを取得することができます。


//現在開いているWebページのURLを取得する
var url = document.location.href;

hrefプロパティでアドレスバーに表示されているURLを取得することができます。

HTMLの読み込み完了後に処理を実行する

JavaScriptでdocumentオブジェクトを使ってHTML要素を操作する場合、HTMLが読み込まれた後に処理を実行する必要があります

そのため、HTMLが読み込まれてからJavaScriptを実行するために以下のような記述をします。

$(document).ready(function() {
    //処理を実行する
});

この場合、HTMLソースだけを読み込んだあとにすぐJavaScriptの処理が実行されます。画像などを含めて、すべてのリソースが読み込まれてから実行されるわけではないのがポイントでしょう。

まとめ

・documentを使うことで、任意のHTMLを取得したり追加したりできる。

16
19
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
16
19

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?