Location
========

**`Location`** インターフェイスは、関連付けられたオブジェクトの場所 (URL) を表します。変更が行われると、関連するオブジェクトに反映されます。 `Document` および `Window` インターフェイスにはこのような関連付けられた `Location` があり、それぞれ `Document.location` および `Window.location` でアクセスできます。

Location の解剖
------------

下記 URL の各部分にポインターを当てると、その意味が強調されます。
```

<span id="href" title="href"
 ><span id="origin" title="origin"
 ><span id="protocol" title="protocol">https:</span>//<span
 id="host"
 title="host"
 ><span id="hostname" title="hostname">example.org</span>:<span
 id="port"
 title="port"
 >8080</span
 ></span
 ></span
 ><span id="pathname" title="pathname">/foo/bar</span
 ><span id="search" title="search">?q=baz</span
 ><span id="hash" title="hash">#bang</span></span
>
```


```
html {
  display: table;
  width: 100%;
}

body {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  font-family: Georgia;
  font-size: 175%;
  line-height: 1em;
  white-space: nowrap;
}

[title] {
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  line-height: 2em;
  cursor: pointer;
  color: gray;
}

[title]::before {
  content: attr(title);
  font-family: monospace;
  position: absolute;
  top: 100%;
  width: 100%;
  left: 50%;
  margin-left: -50%;
  font-size: 60%;
  line-height: 1.5;
  background: black;
}

[title]:hover::before,
:target::before {
  background: black;
  color: yellow;
}

[title] [title]::before {
  margin-top: 1.5em;
}

[title] [title] [title]::before {
  margin-top: 3em;
}

[title] [title] [title] [title]::before {
  margin-top: 4.5em;
}

[title]:hover,
:target {
  position: relative;
  z-index: 1;
  outline: 50em solid rgba(255, 255, 255, 0.8);
}
```


```
document.body.addEventListener("click", (event) => {
  event.preventDefault();

  window.location.hash = event.target.hasAttribute("id")
    ? `#${event.target.getAttribute("id")}`
    : "";
});
```

インスタンスプロパティ
-----------

`Location.ancestorOrigins`

静的な `DOMStringList` で、指定された `Location` オブジェクトに関連付けられた文書の、すべての祖先の閲覧コンテキストを逆順に保持します。

`Location.href`

URL 全体を収めた文字列を返す文字列化です。この値を変更すると、関連付けられた文書が新しいページへ移動します。この値は、関連付けられた文書のものとは異なるオリジンから設定できます。

`Location.protocol`

末尾の `':'` を含む、URL のプロトコルスキームを収めた文字列です。

`Location.host`

URL のホスト (すなわち*ホスト名*、`':'`、*ポート番号*) を収めた文字列です。

`Location.hostname`

URL のドメインを収めた文字列です。

`Location.port`

URL のポート番号を収めた文字列です。

`Location.pathname`

URL のパス部分で、先頭の `'/'` に続いて URL のパス部分が入ったもので、クエリー文字列やフラグメントを含めない文字列です。

`Location.search`

URL のうち、 `'?'` とそれに続く引数や「クエリー文字列」を収めた文字列です。最近のブラウザーは、クエリー文字列から引数を容易に解析するための URLSearchParams や URL.searchParams を提供しています。

`Location.hash`

URL のうち、 `'#'` とそれに続くフラグメント識別子を収めた文字列です。

`Location.origin` 読取専用 

特定の位置のオリジンの正規形を収めた文字列です。

インスタンスメソッド
----------

`Location.assign()`

引数で指定した URL のリソースを読み込みます。

`Location.reload()`

現在の URL のリソースを再読み込みします。

`Location.replace()`

現在のリソースを、指定した URL のリソースで置き換えます。 `assign()` メソッドとの違いは、`replace()` を使用した後は現在のページがセッションの `History` に保存されないことであり、ユーザーは*戻る*ボタンを使用して移動することができません。

`Location.toString()`

URL 全体を収めた文字列を返します。これは `Location.href` と同義ですが、こちらは値を変更するために使用できません。

例
-


```js
// location: https://developer.mozilla.org:8080/en-US/search?q=URL#search-results-close-container
const loc = document.location;
console.log(loc.href); // https://developer.mozilla.org:8080/en-US/search?q=URL#search-results-close-container
console.log(loc.protocol); // https:
console.log(loc.host); // developer.mozilla.org:8080
console.log(loc.hostname); // developer.mozilla.org
console.log(loc.port); // 8080
console.log(loc.pathname); // /en-US/search
console.log(loc.search); // ?q=URL
console.log(loc.hash); // #search-results-close-container
console.log(loc.origin); // https://developer.mozilla.org:8080

location.assign("http://another.site"); // load another page
```

仕様書
---

| Specification |
| --- |
| HTML Standard # the-location-interface |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* 2 つの `Location` のプロパティ: `Window.location` および `Document.location`.
* URL を操作するインターフェイス: `URL`, `URLSearchParams`