Help us understand the problem. What is going on with this article?

jQueryの「document」の意味とは?

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を取得したり追加したりできる。

k152744
大阪府在住の27歳男。未経験からWebエンジニアを目指しテックエキスパート56期生として受講中。 言語:Ruby on Rails, html, css, Javascript データベース:Mysql デブロイ:AWS
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした