JavaScriptのwindowオブジェクト, location, document, history, navigator, status, defaultStatus, visible, menubar, toolbar, locationbarについて

JavaScriptのwindowオブジェクト, location, document, history, navigator, status, defaultStatus, visible, menubar, toolbar, locationbarについて

window.location

window.locationは、現在のページのURLに関連する情報や操作を提供するプロパティです。windowは省略可能で、単にlocationとも書けます。

主なプロパティとメソッド

  • location.href: 現在のURL全体を取得または設定します。
  • location.protocol: URLのプロトコル(例: http:https:)を取得します。
  • location.hostname: ホスト名(例: www.example.com)を取得します。
  • location.pathname: パス部分(例: /path/to/page)を取得します。
  • location.search: クエリ文字列(例: ?id=123&name=test)を取得します。
  • location.hash: URLのフラグメント(例: #section1)を取得または設定します。
  • location.reload(): ページをリロードします。
  • location.replace(url): 現在のURLを指定したURLに置き換えます。

使用例


// 現在のURLを取得
console.log(location.href);

// クエリ文字列を取得
console.log(location.search);

// 新しいURLに移動
location.href = "https://www.example.com";

// ページをリロード
location.reload();
    

window.document

window.documentは、現在表示されているHTMLドキュメントを表します。documentと省略して書くこともできます。

主なプロパティとメソッド

  • document.title: ドキュメントのタイトルを取得または設定します。
  • document.body: ドキュメントの<body>要素を取得します。
  • document.getElementById(id): 指定したIDの要素を取得します。
  • document.querySelector(selector): CSSセレクタに一致する最初の要素を取得します。
  • document.createElement(tagName): 新しい要素を作成します。

使用例


// タイトルを変更
document.title = "新しいタイトル";

// IDで要素を取得
const element = document.getElementById("myElement");

// 新しい要素を作成して追加
const newDiv = document.createElement("div");
newDiv.textContent = "新しい要素";
document.body.appendChild(newDiv);
    

window.history

window.historyは、ブラウザのセッション履歴にアクセスするためのオブジェクトです。

主なプロパティとメソッド

  • history.length: セッション履歴内のエントリ数を取得します。
  • history.back(): 前のページに戻ります。
  • history.forward(): 次のページに進みます。
  • history.go(n): 指定した履歴の位置に移動します。

使用例


// 履歴の長さを取得
console.log(history.length);

// 1つ前のページに戻る
history.back();

// 2ページ先に進む
history.go(2);
    

window.navigator

window.navigatorは、ブラウザやデバイスに関する情報を提供するオブジェクトです。

主なプロパティ

  • navigator.userAgent: ブラウザのユーザーエージェント文字列を取得します。
  • navigator.language: ブラウザの言語設定を取得します。
  • navigator.geolocation: デバイスの位置情報を取得するためのAPIを提供します。

使用例


// ユーザーエージェントを取得
console.log(navigator.userAgent);

// 現在の言語を取得
console.log(navigator.language);
    

window.statusとwindow.defaultStatus

window.statusは、ブラウザのステータスバーに表示するテキストを設定しますが、現在のブラウザではほとんど無効化されています。window.defaultStatusも同様に非推奨です。

使用例


// ステータスバーのテキストを設定(多くのブラウザでは無効)
window.status = "ロード中...";
    

window.menubar.visible, window.toolbar.visible, window.locationbar.visible

これらのプロパティは、ブラウザのUI要素(メニューバー、ツールバー、ロケーションバー)が表示されているかを確認します。ただし、多くのモダンブラウザではこれらのプロパティはサポートされていません。

使用例


// ブラウザのツールバーが表示されているかを確認
console.log(window.toolbar.visible);
    

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です