recursal/MDN huggingface dataset:
Node.removeChild()
==================

**`Node.removeChild()`** 方法從 DOM 移除一個子節點，並傳回移除的節點。

語法
--
```

var oldChild = node.removeChild(child);
或
node.removeChild(child);
```


* `child` 是 DOM 中想要移除的子節點。
* `node` 是 `child` 的父節點。
* `oldChild` 為將被移除的子節點參照，例如：`oldChild === child`.

被刪除的子節點仍然存於記憶體之中，只是不在 DOM 了。從上述的第一種語法形式中，我們知道，透過引用 `oldChild` 還是可以在程式中重新使用已經被移除的子節點。

而第二種語法形式，因為沒有保留 `oldChild` 引用，因此假設你並沒有在其他地方保留節點引用，則它會立即無法使用且不可挽回，而且通常會在短時間內從內存管理中被自動刪除。

如果 `child` 並非某 `element` 節點的子元素，則此方法會拋出異常。而如果調用此方法時，`child` 雖是某 `element` 的子元素，但在嘗試刪除它的過程中已被其他事件處理程序刪除，也會拋出異常（例如 `blur` (en-US)）。

### 會丟出的錯誤

兩種不同的方式拋出異常：

1. 如果 `child` 確實是 `element` 的子元素且確實存在於 DOM，但已被刪除，則會丟出以下異常：
 `Uncaught NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node`.
2. 如果 `child` 不存在於頁面的 DOM，則會拋出下列的異常：
 `Uncaught TypeError: Failed to execute 'removeChild' on 'Node': parameter 1 is not of type 'Node'.`
例子
--

### 簡單的例子

HTML:


```html
<div id="top">
  <div id="nested"></div>
</div>
```


在知道父節點的情況下，刪除特定元素：


```js
let d = document.getElementById("top");
let d_nested = document.getElementById("nested");
let throwawayNode = d.removeChild(d_nested);
```


沒有指定父節點的情況下，刪除特定元素：


```js
let node = document.getElementById("nested");
if (node.parentNode) {
  node.parentNode.removeChild(node);
}
```


從一個元素中移除所有子元素：


```js
let element = document.getElementById("top");
while (element.firstChild) {
  element.removeChild(element.firstChild);
}
```

### 造成一個 TypeError


```html
<!--Sample HTML code-->
<div id="top"></div>

<script type="text/javascript">
 let top = document.getElementById("top");
 let nested = document.getElementById("nested");

 // Throws Uncaught TypeError
 let garbage = top.removeChild(nested);
</script>
```

### 造成一個 NotFoundError


```html
<!--Sample HTML code-->
<div id="top">
  <div id="nested"></div>
</div>

<script type="text/javascript">
 let top = document.getElementById("top");
 let nested = document.getElementById("nested");

 // This first call correctly removes the node
 let garbage = top.removeChild(nested);

 // Throws Uncaught NotFoundError
 garbage = top.removeChild(nested);
</script>
```

規範
--

* DOM Level 1 Core: removeChild
* DOM Level 2 Core: removeChild
* DOM Level 3 Core: removeChild
瀏覽器相容性
------

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

相關連結
----

* `Node.replaceChild` (en-US)
* `Node.parentNode` (en-US)
* `ChildNode.remove` (en-US)
Coordinates.longitude
=====================

**`Coordinates.longitude`** 是個唯讀十進位的複數用來代表裝置經度的位置。

語法
--
```

lon = coordinates.longitude
```

規格
--

| Specification |
| --- |
| Geolocation API # latitude-longitude-and-accuracy-attributes |

瀏覽器的相容性
-------

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

請參考
---

* Using geolocation (en-US)
* 屬於`Coordinates` 介面。
Coordinates.speed
=================

**`Coordinates.speed`** 回傳唯讀的正複數代表速度，單位為公尺/秒。 如果裝置無法測量這個值則回傳 null。

語法
--
```

speed = coordinates.speed
```

規格
--

| Specification |
| --- |
| Geolocation API # speed-attribute |

瀏覽器的相容性
-------

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

請參考
---

* Using geolocation (en-US)
* 屬於 `Coordinates` 介面。
Coordinates.latitude
====================

**`Coordinates.latitude`** 是個唯讀十進位的複數用來代表裝置緯度的位置。

語法
--
```

lat = coordinates.latitude
```

規格
--

| Specification |
| --- |
| Geolocation API # latitude-longitude-and-accuracy-attributes |

瀏覽器的相容性
-------

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

請參考
---

* Using geolocation (en-US)
* 屬於 `Coordinates` 介面。
Coordinates.altitudeAccuracy
============================

**`Coordinates.altitudeAccuracy`** 是個唯讀的正複數用來代表高度的精準度，單位為公尺，並有 95% 可靠度。如果裝置無法提供這個值則回傳 null。

語法
--
```

altAcc = coordinates.altitudeAccuracy
```

規格
--

| Specification |
| --- |
| Geolocation API # altitude-and-altitudeaccuracy-attributes |

瀏覽器的相容性
-------

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

請參考
---

* Using geolocation (en-US)
* 屬於 `Coordinates` 介面。
Coordinates.heading
===================

**`Coordinates.heading`** 是個唯讀的正複數用來代表裝置前進的方向。這個數值代表你偏離北方多少度，0 度代表你向著正北方，照著順時針的方向遞增(90 度代表正東方，270 度代表正西方)。如果`Coordinates.speed` 為 0 度，則此值為 `NaN` (en-US)。如果這個裝置無法提供這個值則回傳 null。

語法
--
```

heading = coordinates.heading
```

規格
--

| Specification |
| --- |
| Geolocation API # heading-attribute |

瀏覽器的相容性
-------

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

請參考
---

* Using geolocation (en-US)
* 屬於 `Coordinates` 介面。
Coordinates.altitude
====================

**`Coordinates.altitude`** 是個唯讀的正複數用來代表距離海平面的高度，單位為公尺。如果無法提供這個值則回傳 null。

語法
--
```

alt = coordinates.altitude
```

規格
--

| Specification |
| --- |
| Geolocation API # altitude-and-altitudeaccuracy-attributes |

瀏覽器的相容性
-------

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

請參考
---

* Using geolocation (en-US)
* 屬於 `Coordinates` 介面。
Coordinates.accuracy
====================

**`Coordinates.accuracy`** 是個唯讀的正複數用來代表 `Coordinates.latitude` 和 `Coordinates.longitude` 的準確度，單位為公尺，並有 95% 可靠度。

語法
--
```

acc = coordinates.accuracy
```

規格
--

| Specification |
| --- |
| Geolocation API # latitude-longitude-and-accuracy-attributes |

瀏覽器的相容性
-------

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

請參考
---

* Using geolocation (en-US)
* 屬於 `Coordinates` 介面。
Blob.size
=========

**`Blob.size`** 屬性回傳以 byte 為單位的 `Blob` 或一個 `File` 的大小。

語法
--
```

var sizeInBytes = blob.size
```

值
-

一個數字。

範例
--


```js
// fileInput 是個 HTMLInputElement: <input type="file" multiple id="myfileinput">
var fileInput = document.getElementById("myfileinput");

// files 是個 FileList 物件 （類似 NodeList）
var files = fileInput.files;

for (var i = 0; i < files.length; i++) {
  console.log(files[i].name + " has a size of " + files[i].size + " Bytes");
}
```

規格
--

| Specification |
| --- |
| File API # dfn-size |

瀏覽器相容性
------

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

參見
--

* `Blob`
Blob()
======

**`Blob()`** 建構式會回傳一個新建立的 `Blob` 物件。新物件的內容是由 *array* 參數的成員值串連所構成。

語法
--
```

var aBlob = new Blob( array, options );
```

### 參數

* *array* 可以是一個由 `ArrayBuffer`、`ArrayBufferView` (en-US)、`Blob` 或 `DOMString` 組成的 `Array` 物件，或是上述多種型別物件的混合陣列。這個陣列將會被放進新建立的 `Blob` 物件當中。DOMStrings 的編碼為 UTF-8。
* *options* 是選擇性的 `BlobPropertyBag` 字典物件，有以下兩個指定的屬性：
    + `type` 屬性，預設值為空字串 `""`，表示將被放進 `Blob` 物件的陣列內容之 MIME 類型。
    + `endings` 屬性，表示包含 `\n` 換行字元的字串要如何輸出，預設值為字串 `"transparent"`。此屬性值可為：`"native"`，代表換行字元會被轉為目前作業系統的換行字元編碼。也可以是 `"transparent"`，代表保留 `Blob` 物件中資料的換行字元。
    非標準
範例
--


```js
var aFileParts = ['<a id="a"><b id="b">hey!</b></a>']; // an array consisting of a single DOMString
var oMyBlob = new Blob(aFileParts, { type: "text/html" }); // the blob
```

規範
--

| Specification |
| --- |
| File API # constructorBlob |

瀏覽器相容性
------

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

參見
--

* 廢棄的 `BlobBuilder` (en-US) 和取代他的建構子。
Blob.type
=========

`Blob` 物件的 **`type`** 屬性提供檔案的 MIME 類別 (en-US)。若無法辨明型別則回傳空字串。

語法
--
```

var mimetype = instanceOfFile.type
```

值
-

一個字串。

範例
--


```js
var i, fileInput, files, allowedFileTypes;

// fileInput 是個 HTMLInputElement: <input type="file" multiple id="myfileinput">
fileInput = document.getElementById("myfileinput");

// files 是個 FileList 物件 （類似 NodeList）
files = fileInput.files;

// 這範例接受 \*.png, \*.jpeg 和 \*.gif 圖片。
allowedFileTypes = ["image/png", "image/jpeg", "image/gif"];

for (i = 0; i < files.length; i++) {
  // 測試 file.type 是否是允許的類別。
  if (allowedFileTypes.indexOf(files[i].type) > -1) {
    // 若符合則執行這裡的程式碼。
  }
});
```

規格
--

| Specification |
| --- |
| File API # dfn-type |

瀏覽器相容性
------

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

參見
--

* `Blob`
GlobalEventHandlers.onclose
===========================

Baseline 2022
-------------

Newly availableSince March 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
送至視窗的 close event 的處理器（handler）。（不支援 Firefox 2 及 Safari）

語法
--
```

window.onclose = funcRef;
```

### 參數

* `funcRef` 為函式的參照。
範例
--


```js
window.onclose = resetThatServerThing;
```

規範
--

| Specification |
| --- |
| HTML Standard # event-close |

瀏覽器相容性
------

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

`submit` 事件會在表單送出時觸發。

要注意的是，`submit` 事件**只會**在 form element (en-US) 上觸發， button (en-US) 或是 submit input (en-US) 則不會觸發。（送出的是「表單」，而非「按鈕」）

基本資料
----

定義規範

HTML5

Interface
`Event`
Bubbles

 是
 雖說在規範上這是個不 bubble 的事件


Cancelable

是

Target

Element

默認行動

修改（傳送表單內容至伺服器）。

屬性
--

| Property | Type | Description |
| --- | --- | --- |
| `target` Read only  | `EventTarget` | The event target (the topmost target in the DOM tree). |
| `type` Read only  | `DOMString` | The type of event. |
| `bubbles` Read only  | `Boolean` | Whether the event normally bubbles or not. |
| `cancelable` Read only  | `Boolean` | Whether the event is cancellable or not. |

規範
--

| Specification |
| --- |
| HTML Standard # event-submit |
| HTML Standard # handler-onsubmit |
Navigator.language
==================

**`Navigator.language`** 是一個唯讀的屬性，回傳使用者偏好的語言字串，通常是瀏覽器 UI 的文字

語法
--


```js
const lang = navigator.language
```

### 值

一個 `DOMString`. `lang` 儲存一個代表此語言的字串。定義在BCP 47。範例: 合法的語言代碼 "en", "en-US", "fr", "fr-FR", "es-ES", etc.

 在 iOS 小於 10.2 的 Safari 國碼是回傳小寫的喲！
 "en-us", "fr-fr" etc.

範例
--


```js
if (/^en\b/.test(navigator.language)) {
  doLangSelect(window.navigator.language);
}
```

規格
--

| Specification |
| --- |
| HTML Standard # dom-navigator-language-dev |

瀏覽器相容性
------

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

參見
--

* `Navigator.languages` (en-US)
* `navigator` (en-US)
Navigator.geolocation
=====================

**`Navigator.geolocation`** 回傳一個唯讀的 `Geolocation` 物件，透過這個物件可以存取設備的位置訊息。同時也允許網站或應用程式根據使用者的位置提供客製化的結果。

**備註：** 因為隱私的因素，當網頁要求存取位置資訊時，用戶會被提示通知並且詢問授權與否。注意不同的瀏覽器在詢問授權時有各自不同的策略和方式。

語法
--
```

geo = navigator.geolocation
```

規格
--

| Specification |
| --- |
| Geolocation API # dom-navigator-geolocation |

瀏覽器相容性
------

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

請參考
---

* Using geolocation (en-US)
Firefox 3 Web-based protocol handler
====================================

### 摘要

window.navigator.registerProtocolHandler 讓網站可以將自己註冊為特定通訊協定的處理者。

### 語法
```

window.navigator.registerProtocolHandler(protocol, uri, title);
```


* protocol 是網站想要處理的 protocol 名稱，用字串表示。
* uri 是要給 handler 處理的 URI 字串。你可以在字串裡用 "%s" 來代表 escaped 過、需要處理的 URI。
* title 是 handler 的 title，會以字串的形式呈現給使用者。
### 例子
```

navigator.registerProtocolHandler("mailto",
                                 "https://mail.google.com/mail?view=cm&tf=0&to=%s",
                                 "Google Mail");
```


這會建立一個 handler，它允許 mailto 的鏈結將使用者帶到 Google Mail，將鏈結中指定的 email 位址插入到 URL。

### 參考資料

1. DOM:window.navigator.registerProtocolHandler 原始網頁
### 延伸閱讀

1. WHATWG's Web Applications 1.0 working draft
File.File()
===========

**`File()`** 建構子建立一個新的 `File` 物件實例

語法
--
```

var myFile = new File(bits, name[, options]);
```

### 參數

*bits*

An `Array` of `ArrayBuffer`, `ArrayBufferView` (en-US), `Blob`, or `DOMString` objects — 或是由這些物件組成的集合。這是以 UTF-8 編碼的檔案內容。

*name*

檔案名稱或檔案的路徑（`USVString` (en-US)）。

*options* 選擇性

物件選項，包含物件非必要的屬性，以下為可得到的屬性：

* `type`: 物件的 MIME 類型（`DOMString` ）將被放進檔案中，預設為 ""（空值）。
* `lastModified`: 檔案最後修改時間，格式為毫秒，預設為 `Date.now()`.

範例
--


```js
var file = new File(["foo"], "foo.txt", {
  type: "text/plain",
});
```

規格
--

| Specification |
| --- |
| File API # file-constructor |

瀏覽器相容性
------

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

看更多
---

* `FileReader`
* `Blob`
File.fileName
=============

**非標準:** This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

**gecko 7.0:** 不推薦使用此功能。雖可能有一些瀏覽器仍然支援它，但也許已自相關的網頁標準中移除、正準備移除、或僅為了維持相容性而保留。避免使用此功能，盡可能更新現有程式；請參考頁面底部的相容性表格來下決定。請注意：本功能可能隨時停止運作。

總覽
--

回傳檔案名稱，基於安全因素，檔案路徑不包含這個屬性。

**備註：** 這個檔案是廢棄的，使用 `File.name` 取代。

語法
--


```js
var name = instanceOfFile.fileName;
```

數值
--

字串

格式
--

尚無資料

看更多
---

* `File.name`
HTMLSelectElement.setCustomValidity()
=====================================

Baseline 2023
-------------

Newly availableSince March 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
**`HTMLSelectElement.setCustomValidity()`** 方法可為指定的元素設定自定義檢核訊息。使用空字串表示元素*沒有*發生違反自定檢核條件的錯誤。

語法
--


```js
selectElt.setCustomValidity(string);
```

### 參數

* *string* 為 `DOMString`，代表錯誤訊息。
規範
--

| Specification |
| --- |
| HTML Standard # dom-cva-setcustomvalidity-dev |

瀏覽器相容性
------

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

參見
--

* 表單驗證 (en-US)
HTMLSelectElement.checkValidity()
=================================

Baseline 2023
-------------

Newly availableSince March 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
**`HTMLSelectElement.checkValidity()`** 方法會檢查元素是否有任何的檢核、驗證條件，並且檢查是否滿足這些條件。如果元素沒有通過這些檢核，瀏覽器會於該元素上觸發一個可取消的 `invalid` (en-US) 事件，並回傳 `false`。

語法
--


```js
var result = selectElt.checkValidity();
```

規範
--

| Specification |
| --- |
| HTML Standard # dom-cva-checkvalidity-dev |

瀏覽器相容性
------

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

參見
--

* Form validation. (en-US)
Document.registerElement()
==========================

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
**已棄用:** 不推薦使用此功能。雖可能有一些瀏覽器仍然支援它，但也許已自相關的網頁標準中移除、正準備移除、或僅為了維持相容性而保留。避免使用此功能，盡可能更新現有程式；請參考頁面底部的相容性表格來下決定。請注意：本功能可能隨時停止運作。

**警告：** document.registerElement() 已經被棄用，建議使用 customElements.define().

**`document.registerElement()`** 可以在瀏覽器中註冊一個新的自訂標籤(元素)and returns a constructor for the new element.

**備註：** This is an experimental technology. The browser you use it in must support Web Components. See Enabling Web Components in Firefox (en-US).

語法
--
```

var constructor = document.registerElement(tag-name, options);
```

### 參數

*標籤名稱*

自訂的標籤名稱需有一個 橫線 ( - ), 例如`my-tag`.

*options 選擇性*

An object with properties **prototype** to base the custom element on, and **extends**, an existing tag to extend. Both of these are optional.

例子
--

這是一個非常簡單的例子:


```js
var Mytag = document.registerElement("my-tag");
```


現在新的標籤已經在瀏覽器中註冊了. The `Mytag` variable holds a constructor that you can use to create a `my-tag` element in the document as follows:


```js
document.body.appendChild(new Mytag());
```


This inserts an empty `my-tag` element that will be visible if you use the browser's developer tools. It will not be visible if you use the browser's view source capability. And it won't be visible in the browser unless you add some content to the tag. Here is one way to add content to the new tag:


```js
var mytag = document.getElementsByTagName("my-tag")[0];
mytag.textContent = "I am a my-tag element.";
```

瀏覽器支援性
------

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

也看一下
----

* Custom Elements (en-US)
Window.print()
==============

摘要
--

打開列印視窗來列印當前的文件。

語法
--
```

window.print()
```

注釋
--

Starting with Chrome V46.0 this method is blocked inside an `<iframe>` (en-US) unless its sandbox attribute has the value `allow-modals`.

規範
--

| Specification |
| --- |
| HTML Standard # printing |

參見
--

* Printing
* `window.onbeforeprint` (en-US)
* `window.onafterprint` (en-US)
Window.localStorage
===================

**`localStorage`** 為一唯讀屬性, 此屬性允許你存取目前文件(`Document` (en-US))隸屬網域來源的 `Storage` 物件; 與 sessionStorage 不同的是其儲存資料的可存取範圍為跨瀏覽頁狀態(Browser Sessions). `localStorage` 的應用與 `sessionStorage` 相似, 除了 `localStorage` 的儲存資料並無到期的限制, 而 `sessionStorage` 的儲存資料於目前瀏覽頁狀態結束的同時將一併被清除 — 也就是目前瀏覽器頁面被關閉的同時.

值得注意的是不論 `localStorage` 或者 `sessionStorage` **皆為專屬於目前瀏覽器頁面的通訊協定(Protocol)**.

鍵值名稱和值皆為**字串型式**(請留意, 當其為物件, 整數等將自動轉換為字串型式).

Syntax
------
```

myStorage = window.localStorage;
```

### Value

`Storage` 物件 which can be used to access the current origin's local storage space.

### Exceptions

`SecurityError`

The request violates a policy decision, or the origin is not a valid scheme/host/port tuple (this can happen if the origin uses the `file:` or `data:` scheme, for example). 舉例來說，使用者 may have their browser configured to deny permission to persist data for the specified origin.

Example
-------

下列的程式碼片段讀取了目前域名內的 local `Storage` 物件 ，並用`Storage.setItem()` (en-US)，增加一個資料物件 item 到其中


```js
localStorage.setItem("myCat", "Tom");
```


讀取 `localStorage` 內物件的語法如下：


```js
var cat = localStorage.getItem("myCat");
```


移除 `localStorage` 內物件的語法如下：


```js
localStorage.removeItem("myCat");
```


刪除 `localStorage` 內所有物件的語法如下：


```js
// Clear all items
localStorage.clear();
```


**備註：** Please refer to the Using the Web Storage API (en-US) article for a full example.

Specifications
--------------

| Specification |
| --- |
| HTML Standard # dom-localstorage-dev |

瀏覽器相容性
------

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

See also
--------

* Using the Web Storage API (en-US)
* Local storage with Window.localStorage (en-US)
* `Window.sessionStorage`
Window: orientationchange event
===============================

`orientationchange` 事件在設備方向改變時被觸發。

| 冒泡 | No |
| --- | --- |
| 可取消 | No |
| 介面 | `Event` |
| 事件處理器 | `onorientationchange` |

範例
--

可於 `addEventListener` 方法中使用 `abort` 事件：


```js
window.addEventListener("orientationchange", function () {
  console.log(
    "the orientation of the device is now " + screen.orientation.angle,
  );
});
```


或使用 `onorientationchange` 事件處理器屬性：


```js
window.onorientationchange = function () {
  console.log(
    "the orientation of the device is now " + screen.orientation.angle,
  );
};
```

規範
--

| Specification |
| --- |
| Compatibility Standard # event-orientationchange |

瀏覽器相容性
------

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

`sessionStorage` 屬性能讓開發人員訪問當前 origin 的 `Storage` 物件。`sessionStorage` 跟 `localStorage` 很相似：唯一不同的地方是存放在 `localStorage` 的資料並沒有過期的時效；而存放在 `sessionStorage` 的資料則會在頁面 session 結束時清空。只要該頁面頁面(頁籤)沒被關閉或者有還原(restore)該頁面，資料就會保存。**開啟新頁籤或視窗會產生一個新的 sessionStorage**，跟 Session 與 Cookies 的做法不大一樣。

另應該注意：不論資料放在 `sessionStorage` 還是 `localStorage`，都被**限制在該網站的規範內，其他網站無法存取**。

語法
--


```js
// 將資料存到sessionStorage
sessionStorage.setItem("key", "value");

// 從sessionStorage取得之前存的資料
var data = sessionStorage.getItem("key");

// 從sessionStorage移除之前存的資料
sessionStorage.removeItem("key");

// 從sessionStorage移除之前存的所有資料
sessionStorage.clear();
```

### 回傳值

一個 `Storage` 物件.

範例
--

下面簡短的程式碼，訪問了當前域名下的 session `Storage` 物件，並使用 `Storage.setItem()` (en-US) 添加了資料單元。


```js
sessionStorage.setItem("myCat", "Tom");
```


以下提供的範例為將文字輸入元件的內容自動保存，如果瀏覽器不小心重新整理，在頁面恢復後，會自動將內容還原，不會造成尚未送出的資料被清空。


```js
// 取得我們要保留內容的text field元件
var field = document.getElementById("field");

// 檢查是否有之前的autosave的內容
// 這段程式碼會在瀏覽器進入該頁面時被執行
if (sessionStorage.getItem("autosave")) {
  // 還原先前的內容到指定的text field
  field.value = sessionStorage.getItem("autosave");
}

// 註冊事件監聽text field內容的變化
field.addEventListener("change", function () {
  // 並儲存變化後的內容至sessionStorage的物件裡
  sessionStorage.setItem("autosave", field.value);
});
```


**備註：** 完整的範例可參考這篇文章: Using the Web Storage API (en-US)。

規格
--

| Specification |
| --- |
| HTML Standard # dom-sessionstorage-dev |

瀏覽器相容性
------

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

相關內容
----

* Using the Web Storage API (en-US)
* `Window.localStorage`
window.onpopstate
=================

摘要
--

視窗上 popstate 事件的事件處理器。

在同一文件的當前歷史紀錄變動時，如果其變動介於兩個歷史紀錄間，`popstate` 就會被呼叫。如果當前的歷史紀錄是藉由呼叫 `history.pushState()`建立，或曾被 `history.replaceState()` 修改過，`popstate` 事件的 `state` 屬性，將包含一份歷史紀錄的 `state` 物件。

請注意：直接呼叫 `history.pushState()` 或 `history.replaceState()` 不會驅動 `popstate` 事件。`popstate` 事件只會被瀏覽器的行為驅動，例如點擊上一頁按鈕（或透過 JavaScript 呼叫 `history.back()`）。且此事件只會在用戶於同文件的兩個歷史紀錄間瀏覽時作動。

在頁面載入時，不同瀏覽器具有不同的 `popstate` 行為。Chrome 與 Safari 會在頁面載入時觸發 `popstate` 事件，但 Firefox 則不會。

語法
--
```

window.onpopstate = funcRef;
```


* *funcRef* 是一個事件處理函數
popstate 事件
-----------

以下範例，位於 `http://example.com/example.html` 並執行下列程式的頁面，將會產生如標示的對話框：


```js
window.onpopstate = function (event) {
  alert(
    "location: " +
      document.location +
      ", state: " +
      JSON.stringify(event.state),
  );
};

history.pushState({ page: 1 }, "title 1", "?page=1");
history.pushState({ page: 2 }, "title 2", "?page=2");
history.replaceState({ page: 3 }, "title 3", "?page=3");
history.back(); // 跳出 "location: http://example.com/example.html?page=1, state: {"page":1}"
history.back(); // 跳出 "location: http://example.com/example.html, state: null
history.go(2); // 跳出 "location: http://example.com/example.html?page=3, state: {"page":3}
```


請注意，雖然原始的歷史紀錄（`http://example.com/example.html`）沒有關聯的 `state` 物件，在我們第二次呼叫 `history.back()` 時仍然會觸發 `popstate` 事件。

標準
--

* HTML5 popstate event
請參照
---

* `window.history` (en-US)
* Manipulating the browser history
* Ajax navigation example (en-US)
Window.opener
=============

概要
--

回傳一個開啟目前視窗（window）之視窗的參考（reference）。

語法
--
```

objRef = window.opener;
```

範例
--


```js
if (window.opener != indexWin) {
  referToTop(window.opener);
}
```

備註
--

當一個視窗是由另一個視窗所開啟（使用 `Window.open` (en-US) 或一個帶有 `target` (en-US) 屬性設定的連結），被開啟的這個視窗會於 **window.opener** 保留開啟它的第一個視窗之參考。假如目前的視窗沒有開啟它的視窗，則會回傳 NULL。

Windows Phone 瀏覽器不支援 `window.opener`（測試版本為 Microsoft Edge 25.10586.36.0）。若 `window.opener` 為不同的安全區域（security zone），則 IE 也不支援此屬性。

在 某些瀏覽器中，在發起連結的標籤中加入 `rel="noopener"` 屬性，可以阻止設定 `window.opener` 視窗參考。
HTMLElement.click()
===================

**`HTMLElement.click()`** 方法可以模擬滑鼠點擊一個元素。

當 `click()` 被使用在支援的元素（例如任一 `<input>` (en-US) 元素），便會觸發該元素的點擊事件。事件會冒泡至 document tree（或 event chain）的上層元素，並觸發它們的點擊事件。其中的例外是：`click()` 方法不會讓 `<a>` (en-US) 元素和接收到真實滑鼠點擊一樣進行頁面跳轉。

語法
--
```

elt.click()
```

規範
--

| Specification |
| --- |
| HTML Standard # dom-click-dev |

瀏覽器相容性
------

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

**`HTMLElement.lang`** 屬性（property）可以讀取或設定一個表示元素之語系的標籤屬性（attribute）值。

`HTMLElement.lang` 屬性所回傳的語系代碼定義於網際網路工程任務小組（IETF）的 *Tags for Identifying Languages (BCP47)* 文件中。常見的例子如 "en" 代表英語、"ja" 代表日語、"es" 代表西班牙語等等。此標籤屬性的預設值為 `unknown`。請留意，雖然此標籤屬性於個別層級的元素上是有效的，但大部分都設定於文件的根元素。

`HTMLElement.lang` 屬性只對 `lang` 標籤屬性有作用，而不是 `xml:lang`。

語法
--
```

var languageUsed = elementNodeReference.lang; // Get the value of lang
elementNodeReference.lang = NewLanguage; // Set new value for lang
```


*languageUsed* is a string variable that gets the language in which the text of the current element is written. *NewLanguage* is a string variable with its value setting the language in which the text of the current element is written.

範例
--


```js
// this snippet compares the base language and
// redirects to another url based on language
if (document.documentElement.lang === "en") {
  window.location.href = "Some\_document.html.en";
} else if (document.documentElement.lang === "ru") {
  window.location.href = "Some\_document.html.ru";
}
```

規範
--

| Specification |
| --- |
| HTML Standard # dom-lang |