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