recursal/MDN huggingface dataset:
DocumentFragment: children プロパティ
================================

**`children`** は読み取り専用のプロパティで、生きた `HTMLCollection`
 を返します。これは呼び出された文書フラグメントのすべての子`要素`を持ちます。

値
-

この文書フラグメントの子である DOM 要素の、生きた順序通りの集合である `HTMLCollection` です。この集合に対して `item()` メソッドを使用するか、JavaScript の配列スタイル記法を使用すると、集合の個々の子ノードにアクセスすることができます。

この文書フラグメントに子要素がなかった場合は、`children` は `length` が `0` である空のリストを返します。

例
-


```js
let fragment = new DocumentFragment();
fragment.children; // HTMLCollection []

let paragraph = document.createElement("p");
fragment.appendChild(paragraph);

fragment.children; // HTMLCollection [<p>]
```

仕様書
---

| Specification |
| --- |
| DOM Standard # ref-for-dom-parentnode-children① |

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

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

関連情報
----

* `Node.childNodes`
DocumentFragment: lastElementChild プロパティ
========================================

**`DocumentFragment.firstElementChild`** は読み取り専用プロパティで、この文書フラグメントの最後の子`要素`を返します。子要素がなければ `null` を返します。

値
-

このオブジェクトの最後の子要素である `Element` です。存在しなければ `null` です。

例
-


```js
let fragment = new DocumentFragment();
fragment.lastElementChild; // null

let paragraph = document.createElement("p");
fragment.appendChild(paragraph);

fragment.lastElementChild; // <p>
```

仕様書
---

| Specification |
| --- |
| DOM Standard # ref-for-dom-parentnode-lastelementchild① |

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

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

関連情報
----

* `Element.lastElementChild`
DocumentFragment: append() メソッド
===============================

**`DocumentFragment.append()`** メソッドは、この文書フラグメントの最後の子の後に、一連の `Node` オブジェクトまたは文字列を挿入します。文字列は同等の `Text` ノードとして挿入されます。

このメソッドは、`DocumentFragment` に子を追加します。ツリー内の任意の要素に追加する場合は、`Element.append()` を参照してください。

構文
--


```js
append(param1)
append(param1, param2)
append(param1, param2, /\* … ,\*/ paramN)
```

### 引数

`param1`, …, `paramN`

挿入する一連の `Node` または文字列です。

### 返値

なし (`undefined`)。

### 例外

`HierarchyRequestError` `DOMException`

階層内の指定された位置にノードが挿入できなかった場合に発生します。

例
-

### 文書フラグメントに要素を追加


```js
let fragment = new DocumentFragment();
let div = document.createElement("div");
fragment.append(div);

fragment.children; // HTMLCollection [<div>]
```

仕様書
---

| Specification |
| --- |
| DOM Standard # ref-for-dom-parentnode-append① |

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

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

関連情報
----

* `DocumentFragment.prepend()`
* `Element.append()`
DocumentFragment: querySelectorAll() メソッド
=========================================

**`DocumentFragment.querySelectorAll()`** メソッドは `NodeList` で、 `DocumentFragment` の中で指定されたセレクター群に一致する要素の一覧を（文書ノードの深さ優先前順走査 (depth-first pre-order traversal) を使用して）返します。

引数で指定されたセレクターが無効であった場合、 `DOMException` が `SYNTAX_ERR` の値で発生します。

構文
--


```js
querySelectorAll(selectors)
```

### 引数

`selectors`

文字列で、1 つ以上の CSS セレクターをカンマで区切って指定します。

### 返値

生きていない `NodeList` です。これには、指定されたセレクター群の少なくとも 1 つに一致する要素ごとに 1 つの `Element` オブジェクトが格納されます。一致するものがなかった場合は空の `NodeList` となります。

例
-

この例は、 `DocumentFragment` の中にあるすべての `div` 要素のうち、 "`note`" または "`alert`" クラスのついたものすべてのリストを返します。


```js
const matches = documentfrag.querySelectorAll("div.note, div.alert");
```

仕様書
---

| Specification |
| --- |
| DOM Standard # ref-for-dom-parentnode-queryselectorall① |

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

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

関連情報
----

* 所属する `DocumentFragment` インターフェイス
DocumentFragment: prepend() メソッド
================================

**`DocumentFragment.prepend()`** メソッドは、一連の `Node` オブジェクトまたは文字列を、この文書フラグメントにおける最初の子の前に挿入します。文字列は同等の `Text` ノードとして挿入されます。

このメソッドは、`DocumentFragment` の先頭に子要素を挿入します。ツリー内の任意の要素に挿入する場合は、 `Element.prepend()` を参照してください。

構文
--


```js
prepend(param1)
prepend(param1, param2)
prepend(param1, param2, /\* … ,\*/ paramN)
```

### 引数

`param1`, …, `paramN`

挿入する一連の `Node` または文字列です。

### 返値

なし (`undefined`)。

### 例外

`HierarchyRequestError` `DOMException`

階層内の指定された位置にノードが挿入できなかった場合に発生します。

例
-

### Prepending an element to a document fragment


```js
let fragment = new DocumentFragment();
let div = document.createElement("div");
let p = document.createElement("p");
fragment.append(p);
fragment.prepend(div);

fragment.children; // HTMLCollection [<div>, <p>]
```

仕様書
---

| Specification |
| --- |
| DOM Standard # ref-for-dom-parentnode-prepend① |

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

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

関連情報
----

* `DocumentFragment.append()`
* `Element.prepend()`
DocumentFragment: getElementById() メソッド
=======================================

**`getElementById()`** は `DocumentFragment` のメソッドで、`id` プロパティが指定された文字列に一致する `Element` オブジェクトを返します。要素の ID は指定された場合は一意であることが求められるため、特定の要素に素早くアクセスする方法として有効です。

ID を持っていない要素へアクセスする必要がある場合は、`querySelector()` を使用すると任意のセレクターを用いて要素を検索することができます。

**メモ:** ID は単一の文書フラグメント内で一意である必要があります。2 つ以上の要素が単一の文書フラグメント内で同じ ID を持っている場合、このメソッドは最初に見つかった要素を返します。

構文
--


```js
getElementById(id)
```


**メモ:** コードが機能するためには、このメソッドの名前における `"Id"` という大文字小文字の表記を正確にしなければなりません。`getElementByID()` のほうが自然に見えますが、正しくなく機能しません。

### 引数

`id`

探す要素の ID です。 ID は大文字と小文字の区別がある文字列で、文書内で固有です。指定された ID の要素は一つしかありません。

### 返値

指定された ID に一致する DOM 要素オブジェクトを記述した `Element` オブジェクト、または文書内に一致する要素がなければ `null` です。

例
-

### 要素のリストを展開

この例では、文書に 1 つのアイテム `Cherry` を持つリストが格納されています。`Apple`、`Orange`、`Banana`、`Melon` の 4 つの項目を含む文書フラグメントを作成します。

次に、`getElementById()` を使用して、文書内とフラグメント内で `Apple` と `Cherry` を探した結果をログ出力します。この点で、`Cherry` は文書内にしか現れず、`Apple` はフラグメント内にしか現れません。

［フラグメントを文書に追加する］をクリックすると、文書内のリストにフラグメントが追加され、文書内とフラグメント内で `Apple` と `Cherry` の両方を探していた結果を再びログ出力します。この時点では、`Apple` と `Cherry` の両方が文書内に現れ、どちらもフラグメントには現れません。

これは、フラグメントを文書に追加すると、フラグメントのノードが DOM 内へ移動し、空の `DocumentFragment` が残るからです。

#### HTML


```html
<button id="add">フラグメントを文書に追加</button>
<button id="reset">例をリセット</button> <br />
リストの内容:
<ul>
  <li id="Cherry">Cherry</li>
</ul>
フラグメントの内容:
<ul id="fragment"></ul>
現在の状態:
<pre id="log" />
```


```
button {
  margin-bottom: 10px;
}
```


#### JavaScript


```js
// 文書フラグメントを初期コンテンツで作成
const fragment = new DocumentFragment();
["Apple", "Orange", "Banana", "Melon"].forEach((fruit) => {
  const li = document.createElement("li");
  li.textContent = fruit;
  li.id = fruit;
  fragment.append(li);
});

// ボタンがクリックされると、フラグメントをリストへ追加
document.getElementById("add").addEventListener("click", () => {
  document.querySelector("ul").append(fragment);
  displayStatus();
});

// 両方の結果を getElementById() でログ出力
function displayStatus() {
  const log = document.getElementById("log");
  log.textContent = "";
  ["Apple", "Cherry"].forEach((id) => {
    log.textContent += `document.getElementById("${id}") ${
 document.getElementById(id) ? "Yes" : "No"
 }\n`;
    log.textContent += `fragment.getElementById("${id}") ${
 fragment.getElementById(id) ? "Yes" : "No"
 }\n`;
  });

  // Empty the fragment viewer and fill it with the current content
  const fragmentViewer = document.getElementById("fragment");
  while (fragmentViewer.hasChildNodes()) {
    fragmentViewer.removeChild(fragmentViewer.lastChild);
  }
  for (entry of fragment.children) {
    fragmentViewer.appendChild(entry.cloneNode(true));
  }
}

// 初期状態をログ出力
displayStatus();

// リセットボタンをフック
document.getElementById("reset").addEventListener("click", () => {
  document.location.reload();
});
```


#### 結果

仕様書
---

| Specification |
| --- |
| DOM Standard # dom-nonelementparentnode-getelementbyid |

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

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

関連情報
----

* `Document.getElementById()`
DocumentFragment: firstElementChild プロパティ
=========================================

**`DocumentFragment.firstElementChild`** は読み取り専用プロパティで、この文書フラグメントの最初の子`要素`を返します。子要素がなければ `null` を返します。

値
-

このオブジェクトの最初の子要素である `Element` です。存在しなければ `null` です。

例
-


```js
let fragment = new DocumentFragment();
fragment.firstElementChild; // null

let paragraph = document.createElement("p");
fragment.appendChild(paragraph);

fragment.firstElementChild; // <p>
```

仕様書
---

| Specification |
| --- |
| DOM Standard # ref-for-dom-parentnode-firstelementchild① |

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

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

関連情報
----

* `Element.firstElementChild`
DocumentFragment: querySelector() メソッド
======================================

**`DocumentFragment.querySelector()`** メソッドは、指定されたセレクター群に一致する `DocumentFragment` の中の最初の要素を（文書ノードの深さ優先前順走査 (depth-first pre-order traversal) を使用して）返します。一致するものがなければ `null` を返します。

ID に一致するセレクターで、その ID が誤って文書中に複数使用されていた場合は、最初に一致する要素を返します。

引数で指定されたセレクターが無効であった場合、 `DOMException` が `SYNTAX_ERR` の値で発生します。

構文
--


```js
querySelector(selectors)
```

### 引数

`selectors`

文字列で、1 つ以上の CSS セレクターをカンマで区切って指定します。

### 返値

指定された CSS セレクターの集合に一致する文書内の最初の要素を表す `Element` オブジェクトです。一致する要素がない場合は `null` が返されます。

例
-

### 基本的な例

この基本的な例では、 `DocumentFragment` の中で "`myclass`" クラスが返されます。


```js
const el = documentfragment.querySelector(".myclass");
```

### CSS の構文とメソッドの引数

`querySelector` に CSS の構文に従う必要があります。 CSS の構文に従っていない ID やセレクター（例えばセミコロンや空白が不適切に入っているなど）に一致させるには、適合しない文字をバックスラッシュ 2 つでエスケープする必要があります。


```html
<div id="foo\bar"></div>
<div id="foo:bar"></div>

<script>
 document.querySelector("#foo\bar"); // 何にも一致しない
 document.querySelector("#foo\\\\bar"); // 最初の div に一致する
 document.querySelector("#foo:bar"); // 何にも一致しない
 document.querySelector("#foo\\:bar"); // 2 つ目の div に一致する
</script>
```

仕様書
---

| Specification |
| --- |
| DOM Standard # ref-for-dom-parentnode-queryselector① |

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

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

関連情報
----

* 所属する `DocumentFragment` インターフェイス
DocumentFragment: DocumentFragment() コンストラクター
=============================================

**`DocumentFragment()`** コンストラクターは、新しい空の `DocumentFragment` オブジェクトを返します。

構文
--


```js
new DocumentFragment()
```

### 引数

なし。

### 返値

新しい `DocumentFragment` オブジェクト。

仕様書
---

| Specification |
| --- |
| DOM Standard # ref-for-dom-documentfragment-documentfragment① |

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

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

**`Document.childElementCount`** は読み取り専用のプロパティで、`DocumentFragment` の子要素の数を返します。

特定の要素の子要素の数を取得する場合は、 `Element.childElementCount` を参照してください。

値
-

この文書フラグメントの子の数を表す数値。

例
-


```js
let fragment = new DocumentFragment();
fragment.childElementCount; // 0

let paragraph = document.createElement("p");
fragment.appendChild(paragraph);

fragment.childElementCount; // 1
```

仕様書
---

| Specification |
| --- |
| DOM Standard # dom-parentnode-childelementcount |

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

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

関連情報
----

* `Element.childElementCount`
* `Document.childElementCount`
DocumentFragment: replaceChildren() メソッド
========================================

**`DocumentFragment.replaceChildren()`** メソッドは、`DocumentFragment` の既存の子を指定された新しい子の集合で置き換えます。これらは文字列または `Node` オブジェクトです。

構文
--


```js
replaceChildren(param1)
replaceChildren(param1, param2)
replaceChildren(param1, param2, /\* … ,\*/ paramN)
```

### 引数

`param1`, …, `paramN`

一連の `Node` または文字列で、これで `DocumentFragment` の既存の子を置き換えます。置換するオブジェクトが指定されなかった場合、`DocumentFragment` は子ノードがすべて空になります。

### 返値

なし (`undefined`)。

### 例外

`HierarchyRequestError` `DOMException`

ノードツリーの制約に違反していた場合に発生します。

例
-

### 文書フラグメントを空にする

`replaceChildren()` は文書フラグメントの子ノードをすべて空にする、とても便利な方法を提供します。引数を指定せずに呼び出せばよいのです。


```js
let fragment = new DocumentFragment();
let div = document.createElement("div");
let p = document.createElement("p");
fragment.append(p);
fragment.prepend(div);

fragment.children; // HTMLCollection [<div>, <p>]

fragment.replaceChildren();

fragment.children; // HTMLCollection []
```

仕様書
---

| Specification |
| --- |
| DOM Standard # ref-for-dom-parentnode-replacechildren① |

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

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

関連情報
----

* `DocumentFragment.prepend()`
* `DocumentFragment.append()`
BluetoothRemoteGATTDescriptor: value プロパティ
==========================================

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

読み取り専用プロパティ **`BluetoothRemoteGATTDescriptor.value`** は、現在キャッシュされているディスクリプターの値を返します。この値はディスクリプターの値が読まれると更新されます。

値
-

`ArrayBuffer` です。

仕様書
---

| Specification |
| --- |
| Web Bluetooth # dom-bluetoothremotegattdescriptor-value |

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

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

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

**`BluetoothRemoteGATTDescriptor.readValue()`** メソッドは、利用可能で対応していれば `value` プロパティの複製が格納された `ArrayBuffer` で解決する `Promise` を返します。そうでない場合、エラーを投げます。

構文
--


```js
readValue()
```

### 引数

なし

### 返値

`ArrayBuffer` で解決する `Promise` です。

仕様書
---

| Specification |
| --- |
| Web Bluetooth # dom-bluetoothremotegattdescriptor-readvalue |

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

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

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

**`BluetoothRemoteGATTDescriptor.writeValue()`** メソッドは、`value` プロパティを `ArrayBuffer` に格納されたバイト列に設定し、`Promise` を返します。

構文
--


```js
writeValue(array)
```

### 引数

`array`

`value` をこの配列に格納されたバイト列に設定します。

### 返値

`Promise` です。

仕様書
---

| Specification |
| --- |
| Web Bluetooth # dom-bluetoothremotegattdescriptor-writevalue |

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

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

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

 読み取り専用プロパティ **`BluetoothRemoteGATTDescriptor.uuid`** は、このキャラクタリスティックディスクリプターの UUID を返します。
 たとえば、theClient Characteristic Configuration descriptor は「`00002902-0000-1000-8000-00805f9b34fb`」です。

値
-

UUID です。

仕様書
---

| Specification |
| --- |
| Web Bluetooth # dom-bluetoothremotegattdescriptor-uuid |

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

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

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

読み取り専用プロパティ **`BluetoothRemoteGATTDescriptor.characteristic`** は、このディスクリプターが属する `BluetoothRemoteGATTCharacteristic` を返します。

値
-

`BluetoothRemoteGATTCharacteristic` のインスタンスです。

仕様書
---

| Specification |
| --- |
| Web Bluetooth # dom-bluetoothremotegattdescriptor-characteristic |

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

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

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

**`delete()`** は `StylePropertyMap` インターフェイスのメソッドで、指定されたプロパティの CSS 宣言を削除します。

構文
--


```js
delete(property)
```

### 引数

`property`

削除するスタイル特性（フォント、幅、背景色など）を示す識別子です。

### 返値

なし (`undefined`)。

例
-

以下の例では、要素の style 属性から `background-image` プロパティを削除します。


```js
// button 要素を取得
const buttonEl = document.querySelector("button");

// スタイル属性から background-image を削除
buttonEl.attributeStyleMap.delete("background-image");
```

仕様書
---

| Specification |
| --- |
| CSS Typed OM Level 1 # dom-stylepropertymap-delete |

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

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

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

**`clear()`** は `StylePropertyMap` インターフェイスのメソッドで、 `StylePropertyMap` にあるすべての宣言を削除します。

構文
--


```js
clear()
```

### 引数

なし。

### 返値

なし (`undefined`)。

例
-

以下の例は、要素の style 属性からすべてのスタイルを削除します。


```js
// button 要素を取得
const buttonEl = document.querySelector(".example");

// style 属性からすべてのスタイルを削除
buttonEl.attributeStyleMap.clear();
```

仕様書
---

| Specification |
| --- |
| CSS Typed OM Level 1 # dom-stylepropertymap-clear |

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

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

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

**`set()`** は `StylePropertyMap` インターフェイスのメソッドで、指定したプロパティの CSS 宣言を変更します。

構文
--


```js
set(property, value)
```

### 引数

`property`

変更するスタイル特性（フォント、幅、背景色など）を示す識別子です。

`value`

指定されたプロパティが持つべき値です。

### 返値

なし (`undefined`)。

例
-

この例では、要素の style 属性の中で、 `padding-top` プロパティを指定された値に設定しています。


```js
// button 属性を取得
const buttonEl = document.querySelector("button");

// button の style 属性で padding-top を設定
buttonEl.attributeStyleMap.set("padding-top", CSS.px(10));
```

仕様書
---

| Specification |
| --- |
| CSS Typed OM Level 1 # dom-stylepropertymap-set |

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

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

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

**`append()`** は `StylePropertyMap` インターフェイスのメソッドで、渡された CSS の値をこの `StylePropertyMap` の指定されたプロパティで追加します。

構文
--


```js
append(property, value)
```

### 引数

`property`

追加するスタイル特性（フォント、幅、背景色など）を示す識別子です。

`value`

指定されたプロパティが持つべき値です。

### 返値

なし (`undefined`)。

例
-

この例では、要素の `background-image` プロパティに、`HTMLElement.attributeStyleMap` を使用して追加の背景画像の値を追加しています。


```js
// button 要素を取得
const buttonEl = document.querySelector("button");

// background-image プロパティに別の値を追加する
buttonEl.attributeStyleMap.append(
  "background-image",
  "linear-gradient(180deg, blue, black",
);
```

仕様書
---

| Specification |
| --- |
| CSS Typed OM Level 1 # dom-stylepropertymap-append |

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

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

**`deleteRule()`** は `CSSGroupingRule` インターフェイスのメソッドで、子 CSS ルールの一覧からある CSS ルールを取り除きます。

構文
--


```js
deleteRule(index);
```

### 引数

index

削除するルールの位置です。

### 返値

なし (`undefined`)。

### 例外

`IndexSizeError` `DOMException`

*index* が子 CSS ルールの数以上であった場合に発生します。

`InvalidStateError` `DOMException`

削除しようとしているルールが `@namespace` アットルールであり、子 CSS ルールに `@import` アットルールまたは `@namespace` アットルール以外の者があった場合に発生します。

例
-


```js
let myRules = document.styleSheets[0].cssRules;
myRules[0].deleteRule(2); /\* deletes the rule at index 2 \*/
```

仕様書
---

| Specification |
| --- |
| CSS Object Model (CSSOM) # dom-cssgroupingrule-deleterule |

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

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

**`insertRule()`** は `CSSGroupingRule` インターフェイスのメソッドで、新しい CSS ルールを CSS ルールのリストへ追加します。

構文
--


```js
insertRule(rule);
insertRule(rule, index);
```

### 引数

rule

文字列です。

index省略可

省略可能で、このルールを挿入する位置です。既定値は 0 です。

### 返値

新しいルールの位置です。

### 例外

`IndexSizeError` `DOMException`

*index* が子 CSS ルールの数以上であった場合に発生します。

`HierarchyRequestError` `DOMException`

CSS で規定された制約により、リストの指定された（ゼロ起点の）インデックス位置に新しいルールが挿入できない場合に発生します。

`InvalidStateError` `DOMException`

新しいルールが `@namespace` アットルールで、子 CSS ルールのリストが `@import` アットルールと `@namespace` アットルール以外のものを含んでいる場合に発生します。

例
-


```js
let myRules = document.styleSheets[0].cssRules;
myRules[0].insertRule(
  "html {background-color: blue;}",
  0,
); /\* HTML 要素に対するルールを位置 0 に挿入します。 \*/
```

仕様書
---

| Specification |
| --- |
| CSS Object Model (CSSOM) # dom-cssgroupingrule-insertrule |

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

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

**`cssRules`** は `CSSGroupingRule` インターフェイスのプロパティで、 `CSSRuleList` 型で `CSSRule` オブジェクトのコレクションを返します。

値
-

`CSSRuleList` です。

例
-


```js
let myRules = document.styleSheets[0].cssRules;
console.log(myRules);
```

仕様書
---

| Specification |
| --- |
| CSS Object Model (CSSOM) # dom-cssgroupingrule-cssrules |

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

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

**`Navigator.languages`** は読み取り専用プロパティで、ユーザーの推奨される言語を表す文字列の配列を返します。この言語は RFC 5646: Tags for Identifying Languages (also known as BCP 47) による言語タグを使用して記述されています。返された配列の中では、設定で最も推奨される言語が最初に来るように並べられています。

`navigator.language` の値は返される配列の最初の要素です。

この値を変更すると、ユーザーの推奨言語が変更され、 `languagechange` イベントが `Window` オブジェクトに発行されます。

ユーザーのブラウザーからのすべての HTTP リクエストにある `Accept-Language` ヘッダーは、 `navigator.languages` プロパティと同じ値ですが、拡張された `qvalues` (quality values) フィールドのみが異なります (例えば `en-US;q=0.8`)。

値
-

文字列です。

例
-


```js
navigator.language; //"en-US"
navigator.languages; //["en-US", "zh-CN", "ja-JP"]
```

仕様書
---

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

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

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

関連情報
----

* `navigator.language`
* `navigator`
* `languagechange` イベント
Navigator: keyboard プロパティ
=========================

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

**`keyboard`** は `Navigator` インターフェイスの読み取り専用プロパティで、物理キーボードのキーボードレイアウトマップを受け取ったり、キー押下のキャプチャの切り替えたりするための `Keyboard` オブジェクトを返します。

値
-

`Keyboard` オブジェクト。

仕様書
---

| Specification |
| --- |
| Keyboard Lock # h-navigator-keyboard |

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

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

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

**`Navigator.hid`** は読み取り専用のプロパティで、`HID` オブジェクトを返します。このオブジェクトは、HID デバイスへの接続およびアタッチした HID デバイスのリストアップを行うメソッドと、HID デバイスの接続を扱うイベントハンドラーを提供します。

定義されている権限ポリシーが WebHID の使用をブロックしている場合、 `Navigator.hid` プロパティは利用できません。

値
-

`HID` オブジェクトです。

仕様書
---

| Specification |
| --- |
| WebHID API # dom-navigator-hid |

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

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

関連情報
----

* WebHID API
Navigator: contacts プロパティ
=========================

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

**`contacts`** は `Navigator` インターフェイスの読み取り専用プロパティで、 `ContactsManager` インターフェイスを返します。ユーザーが連絡先リストから項目を選択し、選択した項目の限定された詳細をウェブサイトやアプリケーションと共有することができます。

値
-

`ContactsManager` オブジェクトです、 2 回連続して呼び出すと、同じオブジェクトを返します。

例
-

以下のコードは、連絡先ピッカー API に対応しているかどうかを調べるものです。


```js
const supported = "contacts" in navigator && "ContactsManager" in window;
```

仕様書
---

| Specification |
| --- |
| Contact Picker API # dom-navigator-contacts |

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

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

関連情報
----

* A Contact Picker for the Web
* A Contact Picker demo on glitch
Navigator: presentation プロパティ
=============================

**安全なコンテキスト用:** この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。

`presentation` は `Navigator` のプロパティで、プレゼンテーション API のエントリーポイントを提供し、 `Presentation` (en-US) オブジェクトへの参照を返します。

構文
--


```js
const presentation = navigator.presentation
```

### 値

`Presentation` (en-US) オブジェクトへの参照。

仕様書
---

| Specification |
| --- |
| Presentation API # dom-navigator-presentation |

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

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

関連情報
----

* プレゼンテーション API
* `Presentation` (en-US)