recursal/MDN huggingface dataset:
CustomElementRegistry.upgrade()
===============================

**`upgrade()`** は `CustomElementRegistry` インターフェイスのメソッドで、 `Node` サブツリー内のすべてのシャドウを含むカスタム要素を、メイン文書に接続する前であってもアップグレードします。

構文
--


```js
customElements.upgrade(root);
```

### 引数

`root`

アップグレードされる、シャドウを含む子孫要素を持つ `Node` インスタンス。アップグレード可能な子孫要素がない場合、エラーは発生しません。

### 返値

なし。

例
-

HTML
仕様書 から取りました。


```js
const el = document.createElement("spider-man");

class SpiderMan extends HTMLElement {}
customElements.define("spider-man", SpiderMan);

console.assert(!(el instanceof SpiderMan)); // not yet upgraded

customElements.upgrade(el);
console.assert(el instanceof SpiderMan); // upgraded!
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-customelementregistry-upgrade-dev |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
ElementInternals: setValidity() メソッド
====================================

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
**`setValidity()`** は `ElementInternals` インターフェイスのメソッドで、この要素の妥当性を設定します。

構文
--


```js
setValidity(flags)
setValidity(flags, message)
setValidity(flags, message, anchor)
```

### 引数

`flags` 省略可

要素の有効状態を示す、 1 つ以上のフラグを含む辞書オブジェクトです。

`valueMissing`

論理値で、要素に `required` 属性があって値がない場合は `true` となり、そうでない場合は `false` となります。もし `true` なら、その要素は CSS の `:invalid` の擬似クラスに一致します。

`typeMismatch`

論理値で、値が必要とされる構文でない場合（`type` が `email` または `url` の場合）は `true` となり、構文が正しい場合は `false` となります。 `true` の場合、その要素は CSS の `:invalid` の擬似クラスに一致します。

`patternMismatch`

論理値で、指定された `pattern` に一致しない場合は `true` となり、一致する場合は `false` となります。 `true` の場合、その要素は CSS の `:invalid` の擬似クラスに一致します。

`tooLong`

論理値で、値が `HTMLInputElement` または `HTMLTextAreaElement` オブジェクトで指定された `maxlength` を超える場合は `true` となり、最大の長さ以下の場合は `false` となります。 `true` の場合、その要素は CSS の `:invalid` および `:out-of-range` 擬似クラスに一致します。

`tooShort`

論理値で、値が `HTMLInputElement` または `HTMLTextAreaElement` オブジェクトで指定された `minlength` に満たない場合は `true` となり、最小の長さ以上の場合は `false` となります。 `true` の場合、その要素は CSS の `:invalid` および `:out-of-range` 擬似クラスに一致します。

`rangeUnderflow`

論理値で、値が `min` 属性で指定された最小値より小さい場合は `true` となり、最小値以上の場合は `false` となります。 `true` の場合、要素は CSS の `:invalid` および `:out-of-range` 擬似クラスに一致します。

`rangeOverflow`

論理値で、値が `max` 属性で指定された最大値より大きい場合は `true` となり、最大値以下であれば `false` となります。 `true` の場合、要素は CSS の `:invalid` および `:out-of-range` 擬似クラスに一致します。

`stepMismatch`

論理値で、値が `step` 属性によって決定されるルールに適合しない（つまり、ステップ値で均等に割り切れない）場合は `true` となり、ステップのルールに適合する場合は `false` となります。 `true` の場合、要素は CSS の `:invalid` および `:out-of-range` 擬似クラスに一致します。

`badInput`

論理値で、ブラウザーが変換できない入力をユーザーが入力した場合に `true` となります。

`customError`

論理値で、この要素の `setCustomValidity()` メソッドを呼び出すことで、要素のカスタム有効性メッセージが空でない文字列に設定されたかどうかを示します。


**メモ:** すべてのフラグを `false` に設定し、この要素がすべての制約の検証に合格したことを示すには、空のオブジェクト `{}` を渡してください。この場合、 `message` も渡す必要はありません。

`message` 省略可

`flags` が `true` の場合に設定されるメッセージを含む文字列。すべての `flags` が `false` の場合のみ、この引数はオプションとなります。

`anchor` 省略可

このフォーム送信に関する問題を報告するためにユーザーエージェントが使用する `HTMLElement` です。

### 返値

なし (`undefined`)。

### 例外

`NotSupportedError` `DOMException`

要素の `formAssociated` プロパティが `true` に設定されていない場合に発生します。

`TypeError`

1 つ以上の `flags` が `true` の場合に発生します。

`NotFoundError` `DOMException`

`anchor` が与えられているが、そのアンカーが要素のシャドウを含む子孫でない場合に発生します。

例
-

次の例では、 `setValidity` を空の `flags` 引数を指定して呼び出して、この要素が制約検証ルールを満たしていることを示します。


```js
this.internals_.setValidity({});
```


次の例では、 `valueMissing` フラグを `true` に設定して `setValidity` を呼び出しています。その際、 `message` 引数にメッセージを渡す必要があります。


```js
this.internals_.setValidity({ valueMissing: true }, "my message");
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-elementinternals-setvalidity |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
ElementInternals: labels プロパティ
==============================

**`labels`** は `ElementInternals` インターフェイスのプロパティで、要素に関連付けられたラベルを返します。

値
-

この要素に関連付けられたすべてのラベル要素の入った `NodeList` です。

例
-

 次の例は、カスタムチェックボックスコンポーネントに `<label>` 要素をリンクしたものです。
 `labels` の値をコンソールに出力すると、このラベルを表す1つのエントリを持つ `NodeList` が返されます。


```html
<form id="myForm">
  <custom-checkbox id="custom-checkbox"></custom-checkbox>
  <label for="custom-checkbox">Join newsletter</label>
</form>
```



```js
let element = document.getElementById("custom-checkbox");
console.log(element.internals_.label);
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-elementinternals-labels |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
ElementInternals: reportValidity() メソッド
=======================================

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
**`reportValidity()`** は `ElementInternals` インターフェイスのメソッドで、適用された制約検証ルールをこの要素が満たしているかどうかをチェックします。

`reportValidity` が `false` を返した場合、キャンセル可能な invalid イベントが要素で発生します。

このメソッドは `ElementInternals.checkValidity()` と同様の振る舞いをしますが、 `ElementInternals.validationMessage` (en-US) の値をユーザーエージェントに送信して表示させます。

構文
--


```js
reportValidity()
```

### 引数

なし。

### 返値

論理値で、要素がすべての検証される制約に合格していれば `true` を返します。

### 例外

`NotSupportedError` `DOMException`

要素の `formAssociated` プロパティが `true` に設定されていない場合に発生します。

例
-

以下の例では、 `ElementInternals.setValidity()` を使用して、要素が検証ルールを満たしていないことを示します。 `reportValidity()` を呼び出すと `false` が返され、 "メッセージ" という値がユーザーエージェントに送られ、表示されます。

再度 `setValidity` を呼び出し、今度はすべてのルールが false になっていることを示すと、`reportValidity()` は `true` を返します。


```js
let element = document.getElementById("join-checkbox");
element.internals_.setValidity({ valueMissing: true }, "メッセージ");
console.log(element.internals_.reportValidity()); // false
element.internals_.setValidity({});
console.log(element.internals_.reportValidity()); // true
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-elementinternals-reportvalidity |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
ElementInternals: setFormValue() メソッド
=====================================

**`setFormValue()`** は `ElementInternals` インターフェイスのメソッドで、このメソッドは、要素の送信値と状態を設定し、これらをユーザーエージェントに伝えます。

構文
--


```js
setFormValue(value)
setFormValue(value, state)
```

### 引数

`value`

サーバに送信する値として、`File`、文字列、`FormData` のいずれかを指定します。

`state` 省略可

`File`、文字列、`FormData` のいずれかで、ユーザーの入力を表します。
 これにより、アプリケーションは必要に応じて、ユーザーが送信した情報を、ユーザーが入力した形式で再表示することができます。




**メモ:** 一般的に、 `state` はユーザがー指定した情報を渡すために、 `value` はサニタイズ後、サーバーに送信するのに適した情報を渡すために使用されます。
 たとえば、カスタム要素で日付の入力を求められた場合、ユーザーは「3/15/2019」と入力するかもしれません。
 これは `state` です。
 サーバーは `2019-03-15` という日付書式を期待しているので、この書式の日付が `value` として渡されます。


### 返値

undefined です。

### 例外

`NotSupportedError` `DOMException`

要素の `formAssociated` プロパティが `true` に設定されていない場合に発生します。

例
-

次の例では、チェックボックスのカスタム要素で、サーバーに送信する値として `on` を、状態として `checked` を設定しています。


```js
this.internals_.setFormValue("on", "checked");
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-elementinternals-setformvalue |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
ElementInternals: ariaDisabled プロパティ
====================================

**`ariaDisabled`** は `ElementInternals` インターフェイスのプロパティで、`aria-disabled` 属性の値を反映し、要素が知覚可能だが無効であり、編集や他の処理をすることはできないことを示します。

**メモ:** `ElementInternals` に aria 属性を設定することで、カスタム要素に既定値を定義することができます。これらは作成者が定義した属性によって上書きされる可能性がありますが、作成者が属性を削除したり、追加しなかった場合でも確実に既定値を定義することができます。より詳しい情報は、 Accessibility Object Model explainer を参照してください。

値
-

以下のいずれかの値を持つ文字列です。

`"true"`

要素とフォーカス可能なすべての子孫は無効ですが、知覚可能であり、それらの値はユーザーによって変更できません。

`"false"`

要素が有効になっています。

例
-

この例では、 `ariaDisabled` の値を "true" に設定しています。


```js
this.internals_.ariaDisabled = "true";
```

仕様書
---

| Specification |
| --- |
| Accessible Rich Internet Applications (WAI-ARIA) # dom-ariamixin-ariadisabled |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
ElementInternals: 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
**`checkValidity()`** は `ElementInternals` インタフェイスのメソッドで、要素が適用された制約検証のルールを満たしているかどうかをチェックします。

もし `checkValidity` が `false` を返したら、キャンセル可能な invalid イベントが要素で発生します。

構文
--


```js
checkValidity()
```

### 引数

なし。

### 返値

論理値で、要素がすべての検証される制約に合格していれば `true` を返します。

### 例外

`NotSupportedError` `DOMException`

要素の `formAssociated` プロパティが `true` に設定されていない場合に発生します。

例
-

以下の例では、 `ElementInternals.setValidity()` を使用して、要素が検証ルールを満たしていないことを示します。 `checkValidity()` を呼び出すと `false` が返されます。再度 `setValidity` を呼び出し、今度はすべてのルールが false になっていることを示すと、`checkValidity()` は `true` を返します。


```js
let element = document.getElementById("join-checkbox");
element.internals_.setValidity({ valueMissing: true }, "メッセージ");
console.log(element.internals_.checkValidity()); // false
element.internals_.setValidity({});
console.log(element.internals_.checkValidity()); // true
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-elementinternals-checkvalidity |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
ElementInternals: form プロパティ
============================

**`form`** は `ElementInternals` インターフェイスの読み取り専用プロパティで、この要素に関連付けられた `HTMLFormElement` を返します。

値
-

`HTMLFormElement` です。

例
-

 次の例では、 ID が `myForm` のフォーム内にカスタムチェックボックスコンポーネントを配置しています。
 コンソールに `form.length` を出力すると、 `HTMLFormElement.length` という値が得られます。


```html
<form id="myForm">
  <custom-checkbox id="custom-checkbox"></custom-checkbox>
  <custom-label for="custom-checkbox">Join newsletter</custom-label>
</form>
```



```js
class CustomCheckbox extends HTMLElement {
  static formAssociated = true;
  #internals;

  constructor() {
    super();
    this.#internals = this.attachInternals();
  }

  connectedCallback() {
    console.log(this.#internals.form.length);
  }
}

window.customElements.define("custom-checkbox", CustomCheckbox);
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-elementinternals-form |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
CSSStyleValue.parse()
=====================

**Experimental:** **これは実験的な機能です。**  
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

**`parse()`** は `CSSStyleValue` インターフェイスのメソッドで、特定の CSS プロパティを指定された値に設定し、最初の値を `CSSStyleValue` オブジェクトとして返します。

構文
--


```js
parse(property, cssText)
```

### 引数

`property`

設定する CSS プロパティ

`cssText`

指定されたプロパティに適用する 1 つ以上の値を含む、カンマで区切られた文字列。

### 返値

最初に与えられた値を格納した `CSSStyleValue` オブジェクトです。

例
-

 下記のコードは `transform` プロパティに対する一連の宣言を解釈します。
 2 つ目のコードブロックは、返されたオブジェクトの構造を、開発者ツールのコンソールに表示したものです。


```js
const css = CSSStyleValue.parse(
  "transform",
  "translate3d(10px,10px,0) scale(0.5)",
);
```



```css
CSSTransformValue {0: CSSTranslate, 1: CSSScale, length: 2, is2D: false}
```

仕様書
---

| Specification |
| --- |
| CSS Typed OM Level 1 # dom-cssstylevalue-parse |

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

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

関連情報
----

* `CSSStyleValue.parseAll()`
* CSS 型付きオブジェクトモデルの使用
* CSS 型付きオブジェクトモデル API
CSSStyleValue.parseAll()
========================

**Experimental:** **これは実験的な機能です。**  
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

**`parseAll()`** は `CSSStyleValue` インターフェイスのメソッドで、出現したすべての特定の CSS プロパティを指定された値に設定し、それぞれが与えられた値の 1 つを格納した `CSSStyleValue` オブジェクトの配列を返します。

構文
--


```js
parseAll(property, value)
```

### 引数

`property`

設定する CSS プロパティです。

`value`

指定されたプロパティに適用される 1 つ以上の値を格納したカンマ区切りの文字列。

### 返値

`CSSStyleValue` オブジェクトの配列で、それぞれが与えられた値の 1 つを格納します。

仕様書
---

| Specification |
| --- |
| CSS Typed OM Level 1 # dom-cssstylevalue-parseall |

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

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

関連情報
----

* `CSSStyleValue.parse()`
* CSS 型付きオブジェクトモデルの使用
* CSS 型付きオブジェクトモデル API
BackgroundFetchManager.getIds()
===============================

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
**Experimental:** **これは実験的な機能です。**  
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

`BackgroundFetchManager` インターフェイスの **`getIds()`** メソッドは、登録済みのすべてのバックグラウンドフェッチの ID を返します。

構文
--


```js
getIds()
```

### 引数

なし。

### 返値

`文字列`の配列 (`Array`) で解決される `Promise` を返します。

### 例外

なし。

例
-

下記の例は、登録済みのすべてのバックグラウンドフェッチの ID を取得する方法を紹介しています。アクティブなサービスワーカーの `ServiceWorkerRegistration.backgroundFetch` プロパティを参照して `BackgroundFetchManager` オブジェクトにアクセスし、その `getIds()` メソッドを呼び出しています。


```js
navigator.serviceWorker.ready.then(async (swReg) => {
  const ids = await swReg.backgroundFetch.getIds();
});
```

仕様書
---

| Specification |
| --- |
| Background Fetch # background-fetch-manager-get-ids |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
BackgroundFetchManager.fetch()
==============================

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
**Experimental:** **これは実験的な機能です。**  
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

**`fetch()`** は `BackgroundFetchManager` インターフェイスのメソッドで、指定された 1 つ以上の URL または `Request` オブジェクトを取り、バックグラウンドのフェッチ操作を開始します。

構文
--


```js
fetch(id, requests)
fetch(id, requests, options)
```

### 引数

`id`

この操作の `BackgroundFetchRegistration` を取得するために、他のメソッドに渡すことができる、開発者定義の識別子です。

`requests`

`RequestInfo` オブジェクトまたは `RequestInfo` お武衛ジェクトの配列です。

それぞれの `RequestInfo` オブジェクトは `Request` オブジェクト、または `Request()` コンストラクターの `input` 引数として与えられる文字列です。

`options` 省略可

ブラウザーの表示するフェッチ進捗ダイアログをカスタマイズするために使用されるオブジェクトです。以下のプロパティがあります。

`title`

文字列で、進捗ダイアログのタイトルとして使われます。

`icons`

ブラウザーの進捗ダイアログに使用するアイコンを表すオブジェクトの配列です。各オブジェクトには、以下のプロパティがあります。

`src`

アイコンファイルの URL を表す文字列。

`sizes`

画像の大きさを表す文字列で、 `<link>` 要素の `sizes` 属性と同じ構文を使用して表します。 省略可

`type`

アイコンの MIME タイプを表す文字列です。 省略可

`label`

アイコンのアクセシブル名を表す文字列です。 省略可


`downloadTotal`

フェッチ操作の推定総ダウンロードサイズを表す数値（バイト単位）。これは、ダウンロードの大きさをユーザーに示すため、また、ユーザーのダウンロードの進捗状況を示すために使用されます。

ダウンロードサイズの合計が `downloadTotal` を超えると、すぐに取得が中止されます。


### 返値

`BackgroundFetchRegistration` オブジェクトで解決される `Promise` 。

### 例外

`TypeError`

次のような場合に発生します。リクエストが与えられていない場合、リクエストのモードが 'no-cors' の場合、サービスワーカーが存在しない場合、リクエストされた `id` のリクエストが既に存在する場合、またはリクエストが失敗した場合。

`AbortError` `DOMException`

fetch が失敗したことを示します。

`NotAllowedError` `DOMException`

バックグラウンド fetch を作成するためのユーザー権限が与えられていないことを示します。

例
-

下記の例は `fetch()` を使用してバックグラウンドフェッチ操作を行う方法を方法を示しています。アクティブな サービスワーカー で、 `ServiceWorkerRegistration.backgroundFetch` プロパティを使用して `BackgroundFetchManager` オブジェクトにアクセスし、その `fetch()` メソッドを呼び出しています。


```js
navigator.serviceWorker.ready.then(async (swReg) => {
  const bgFetch = await swReg.backgroundFetch.fetch(
    "my-fetch",
    ["/ep-5.mp3", "ep-5-artwork.jpg"],
    {
      title: "Episode 5: Interesting things.",
      icons: [
        {
          sizes: "300x300",
          src: "/ep-5-icon.png",
          type: "image/png",
          label: "Downloading a show",
        },
      ],
      downloadTotal: 60 \* 1024 \* 1024,
    },
  );
});
```

仕様書
---

| Specification |
| --- |
| Background Fetch # background-fetch-manager-fetch |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
BackgroundFetchManager.get()
============================

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
**Experimental:** **これは実験的な機能です。**  
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

**`get()`** は `BackgroundFetchManager` インターフェイスのメソッドで、引数に与えられた `id` に紐づく `BackgroundFetchRegistration` で解決される `Promise` を返します。 `id` が見つからない場合は `undefined` を返します。

構文
--


```js
get(id)
```

### 引数

`id`

`fetch()` を呼び出すことで定義された `backgroundFetchRegistration` の ID 。

### 返値

`BackgroundFetchRegistration` で解決される `Promise` または `undefined` 。

例
-

下記の例では、 `get()` を呼び出して `BackgroundFetchRegistration` を取得する方法を紹介しています。アクティブな `service worker` の `ServiceWorkerRegistration.backgroundFetch` を参照して `BackgroundFetchManager` オブジェクトにアクセスし、その `get()` メソッドを呼び出しています。


```js
navigator.serviceWorker.ready.then(async (swReg) => {
  const bgFetch = await swReg.backgroundFetch.get("my-fetch");
});
// my code block
```

仕様書
---

| Specification |
| --- |
| Background Fetch # background-fetch-manager-get |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
HTMLDataElement: value プロパティ
============================

**`value`** は `HTMLDataElement` インターフェイスのプロパティで、HTML の `value` 属性を反映する文字列を返します。

値
-

文字列です。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-data-value |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
IDBIndex: get() メソッド
====================

`IDBIndex` の **`get()`** メソッドは `IDBRequest` オブジェクトを返し、別スレッドで参照先のオブジェクトストアから指定のキーに対応する値、もしくは `key` が `IDBKeyRange` に設定された場合は対応する最初の値を検索します。

値が見つかった場合は、その構造化複製を作成し、要求オブジェクトの `result` に設定します。これにより、キーに対応するレコードを返します。

**注:** この機能は Web Worker 内で利用可能です

構文
--


```js
get()
get(key)
```

### 引数

`key` 省略可

取得するレコードを特定するキーまたは `IDBKeyRange` です。`null` であったり省略された場合は、ブラウザーは無限のキー範囲を用います。

### 返値

この操作に関係する今後のイベントが発火する `IDBRequest` オブジェクトです。

操作に成功した場合は、この要求の `result` プロパティの値は与えられたキーもしくはキー範囲にマッチする最初のレコードの値になります。

### 例外

このメソッドは、以下の種類のいずれかの `DOMException` を投げる可能性があります。

`TransactionInactiveError` `DOMException`

この `IDBIndex` のトランザクションが実行中でないとき投げられます。

`DataError` `DOMException`

与えられたキーまたはキー範囲が無効なキーを含むとき投げられます。

`InvalidStateError` `DOMException`

この `IDBIndex` が削除されたか取り除かれたとき投げられます。

例
-

以下の例では、トランザクションとオブジェクトストアを開き、シンプルな連絡先データベースからインデックス `lName` を取得します。そして、このインデックスで `IDBIndex.openCursor` により基本的なカーソルを開きます。これは、返されるレコードが主キーではなくこのインデックスに基づいてソートされる以外、`ObjectStore` で直接 `IDBObjectStore.openCursor` を用いてカーソルを開くのと同じように動きます。

そして、`myIndex.get('Bungle')` により `lName` が `Bungle` であるレコードを取得し、`success` コールバックで要求の結果をコンソールに記録します。

最後に、各レコードを走査し、データを HTML テーブルに挿入します。動く例全体は、IndexedDB-examples デモレポジトリーを参照してください。(動く例を見る)


```js
function displayDataByIndex() {
  tableEntry.innerHTML = "";
  const transaction = db.transaction(["contactsList"], "readonly");
  const objectStore = transaction.objectStore("contactsList");

  const myIndex = objectStore.index("lName");
  const getRequest = myIndex.get("Bungle");
  getRequest.onsuccess = () => {
    console.log(getRequest.result);
  };

  myIndex.openCursor().onsuccess = (event) => {
    const cursor = event.target.result;
    if (cursor) {
      const tableRow = document.createElement("tr");
      tableRow.innerHTML =
        `<td>${cursor.value.id}</td>` +
        `<td>${cursor.value.lName}</td>` +
        `<td>${cursor.value.fName}</td>` +
        `<td>${cursor.value.jTitle}</td>` +
        `<td>${cursor.value.company}</td>` +
        `<td>${cursor.value.eMail}</td>` +
        `<td>${cursor.value.phone}</td>` +
        `<td>${cursor.value.age}</td>`;
      tableEntry.appendChild(tableRow);

      cursor.continue();
    } else {
      console.log("全エントリーを表示しました。");
    }
  };
}
```

仕様書
---

| Specification |
| --- |
| Indexed Database API 3.0 # ref-for-dom-idbindex-get① |

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

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

関連情報
----

* IndexedDB の使用
* トランザクションの開始: `IDBDatabase`
* トランザクションの使用: `IDBTransaction`
* キー範囲の設定: `IDBKeyRange`
* データの取得と変更: `IDBObjectStore`
* カーソルの使用: `IDBCursor`
* リファレンス例: To-do Notifications (動く例を見る)
IDBIndex: objectStore プロパティ
===========================

`IDBIndex` インターフェイスの **`objectStore`** プロパティは、現在のインデックスが参照するオブジェクトストアを返します。

**注:** この機能は Web Worker 内で利用可能です

値
-

`IDBObjectStore` です。

例
-

以下の例では、トランザクションとオブジェクトストアを開き、シンプルな連絡先データベースからインデックス `lName` を取得します。そして、このインデックスで `IDBIndex.openCursor` により基本的なカーソルを開きます。これは、返されるレコードが主キーではなくこのインデックスに基づいてソートされる以外、`ObjectStore` で直接 `IDBObjectStore.openCursor` を用いてカーソルを開くのと同じように動きます。

現在のオブジェクトストアをコンソールに記録します。これは以下のようなものになるはずです。


```json
IDBObjectStore { name: "contactsList", keyPath: "id", indexNames: DOMStringList[7], transaction: IDBTransaction, autoIncrement: false }
```


最後に、各レコードを走査し、データを HTML テーブルに挿入します。動く例全体は、IndexedDB-examples デモレポジトリーを参照してください。(動く例を見る)


```js
function displayDataByIndex() {
  tableEntry.innerHTML = "";
  const transaction = db.transaction(["contactsList"], "readonly");
  const objectStore = transaction.objectStore("contactsList");

  const myIndex = objectStore.index("lName");
  console.log(myIndex.objectStore);

  myIndex.openCursor().onsuccess = (event) => {
    const cursor = event.target.result;
    if (cursor) {
      const tableRow = document.createElement("tr");
      tableRow.innerHTML =
        `<td>${cursor.value.id}</td>` +
        `<td>${cursor.value.lName}</td>` +
        `<td>${cursor.value.fName}</td>` +
        `<td>${cursor.value.jTitle}</td>` +
        `<td>${cursor.value.company}</td>` +
        `<td>${cursor.value.eMail}</td>` +
        `<td>${cursor.value.phone}</td>` +
        `<td>${cursor.value.age}</td>`;
      tableEntry.appendChild(tableRow);

      cursor.continue();
    } else {
      console.log("全エントリーを表示しました。");
    }
  };
}
```

仕様書
---

| Specification |
| --- |
| Indexed Database API 3.0 # ref-for-dom-idbindex-objectstore① |

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

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

関連情報
----

* IndexedDB の使用
* トランザクションの開始: `IDBDatabase`
* トランザクションの使用: `IDBTransaction`
* キー範囲の設定: `IDBKeyRange`
* データの取得と変更: `IDBObjectStore`
* カーソルの使用: `IDBCursor`
* リファレンス例: To-do Notifications (動く例を見る)