recursal/MDN huggingface dataset:
Document.childElementCount
==========================

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

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

構文
--


```js
document.childElementCount;
```

例
-


```js
document.children;
// HTMLCollection で、ふつうは <html> 要素をこの文書の唯一の子として含んでいる

document.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`
* `DocumentFragment.childElementCount`
Document.open()
===============

**`Document.open()`** メソッドは、書き込みのために文書を開きます。

これはいくらかの副作用を招きます。例を挙げます。

* 文書、文書内のノード、文書のウィンドウに現在登録されているイベントリスナーがすべて除去されます。
* すべての既存のノードが文書から除去されます。
構文
--
```

document.open();
```

### 引数

なし。

### 返値

`Document` オブジェクトインスタンスです。

例
-

以下の簡単なコードは、文書を開き、その内容をいくつかの異なる HTML の断片に置き換えてから、再び閉じます。


```js
document.open();
document.write("<p>Hello world!</p>");
document.write("<p>I am a fish</p>");
document.write("<p>The number is 42</p>");
document.close();
```

注
-

ページが読み込まれたあとで `document.write()` が呼び出されると、自動的に `document.open()` が呼び出されます。

Firefox や Internet Explorer では何年も前から、すべてのノードの削除に加えて、 JavaScript の変数なども追加で消去していました。今はそうではありません。document non-spec'ed parameters to document.open

### Gecko 固有のメモ

Gecko 1.9 以降、このメソッドは他のプロパティと同一オリジンポリシーが同じになるようになり、文書のオリジンを変更しようとした場合に動作しません。

Gecko 1.9.2 以降、 `document.open()` はプリンシパルをスタックからフェッチするのではなく、 URI を使用する文書のプリンシパルを使用します。その結果、 `wrappedJSObject` を使用しても、 `document.write()` をクロームからの信頼できない文書に呼び出すことはできません。考え方についてはセキュリティチェックの基本を参照してください。

引数 3 つの document.open()
-----------------------

あまり知られていませんが、あまり使われていない引数 3 つ版の `document.open()` があり、これは `Window.open()` のエイリアスです (詳細はそのページを参照してください)。

この呼び出しは、例えば github.com を新しいウィンドウで開き、オープナーは `null` に設定してみます。


```js
document.open("https://www.github.com", "", "noopener=true");
```

引数 2 つの document.open()
-----------------------

ブラウザーは以下の形で、引数 2 つの `document.open()` に対応してきました。


```js
document.open(type, replace);
```


`type` は書き込もうとしているデータの MIME タイプ (`text/html` など) を指定し、 replace が設定されていれば (すなわち "replace" の文字列)、新しい文書の履歴エントリが書き込まれている文書の現在の履歴エントリを置き換えることを指定していました。

この形式は現在では廃止されています。エラーは発生せず、代わりに `document.open()` に転送されます (つまり、引数なしで実行した場合と同等です)。 履歴の置換動作は常に行われるようになりました。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-document-open-dev |

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

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

関連情報
----

* `Document`
* `Window.open()`
Document.implementation
=======================

**`Document.implementation`** プロパティは、現在の文書に関連付けられた `DOMImplementation` オブジェクトを返します。

値
-

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

例
-


```js
const modName = "HTML";
const modVer = "2.0";
const conformTest = document.implementation.hasFeature(modName, modVer);

console.log(`DOM ${modName} ${modVer} supported?: ${conformTest}`);

// DOM Level 2 HTML module に対応している場合、"DOM HTML 2.0 supported?: true" とアラート表示されます。
```


モジュール名 (Core, HTML, XML, 等) の一覧は Conformance Section で入手可能です。

メモ
--

W3C's DOM Level 1 勧告では `hasFeature` メソッドのみが定義されているので、ブラウザーが DOM モジュールに対応しているかどうかを判断する方法の一つです。 (上記の例と What does your user agent claim to support? を参照してください)。利用できるのであれば、 `DOMImplementation` の他のメソッドが、単一文書の外のものを制御するサービスを提供します。例えば、 `DOMImplementation` インターフェイスは `createDocumentType` メソッドを含んでおり、実装によって管理された 1 つ以上の文書に DTD が作成されます。

仕様書
---

| Specification |
| --- |
| DOM Standard # ref-for-dom-document-implementation① |

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

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

`Document` インターフェイスの **`domain`** プロパティは、同一オリジンポリシーで使用される現在の文書のオリジンのうち、ドメインの部分を取得または設定します。

このプロパティが正常に設定されると、オリジンのポート番号の部分も `null` に設定されます。

構文
--
```

const domainString = document.domain
document.domain = domainString
```

### 値

現在の文書のオリジンのうち、ドメインの部分です。

### 例外

`SecurityError`

以下の状況のうちの一つで、 `domain` を設定することが試みられた。

* 文書がサンドボックス化された `<iframe>` の中にある場合
* 文書に閲覧コンテキストがない場合
* 文書の影響ドメインが `null` の場合
* 指定された値が文書の影響ドメインと一致しない (または登録可能なドメインの接頭辞ではない) 場合
* `Feature-Policy` の `document-domain` が有効の場合

例
-

### ドメイン名の取得

`http://developer.mozilla.org/ja/docs/Web` の URI において、この例は `currentDomain` に "`developer.mozilla.org`" の文字列を設定します。


```js
const currentDomain = document.domain;
```

### ウィンドウを閉じる

文書が `www.example.xxx/good.html` のような "`www.example.xxx`" のドメインを持つ場合、この例はウィンドウを閉じようとします。


```js
const badDomain = "www.example.xxx";

if (document.domain === badDomain) {
  // 単なる例: window.close() は効果がないことがある
  window.close();
}
```

仕様書
---

| Specification |
| --- |
| HTML Standard # relaxing-the-same-origin-restriction |

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

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

関連情報
----

* 同一オリジンポリシー
Document.vlinkColor
===================

**非推奨:** この機能は非推奨になりました。まだ対応しているブラウザーがあるかもしれませんが、すでに関連するウェブ標準から削除されているか、削除の手続き中であるか、互換性のためだけに残されている可能性があります。使用を避け、できれば既存のコードは更新してください。このページの下部にある互換性一覧表を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。

**`Document.vlinkColor`** プロパティは、文書内のユーザーが訪問済みのリンクの色を取得または設定します。

構文
--
```

color = document.vlinkColor
document.vlinkColor = color
```

### 引数

* `color` は、色を表す単語 (`red` など) または 16 進値 (`#ff0000` など) の文字列です。
メモ
--

* Mozilla Firefox ではこのプロパティの初期値は紫 (16 進で `#551a8b`) です。
* `Document.vlinkColor` は DOM Level 2 HTML では非推奨です。
* 推奨される代替方法は、 HTML の `<a>` 要素において CSS で `:visited` 擬似クラスの色を設定または取得する方法です (例えば `a:visited {color:red;}`)。
* 他の代替方法に `document.body.vLink` がありますが、これは HTML 4.01 で非推奨となり、 CSS で代替されました。
ブラウザーの互換性
---------

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

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

ID を持たない要素にアクセスする必要がある場合は、 `querySelector()` で何らかのセレクターを使用して要素を検索することができます。

構文
--
```

var element = document.getElementById(id);
```

### 引数

`id`

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

### 返値

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

例
-

### HTML


```html
<html>
  <head>
    <title>getElementById example</title>
  </head>
  <body>
    <p id="para">Some text here</p>
    <button onclick="changeColor('blue');">blue</button>
    <button onclick="changeColor('red');">red</button>
  </body>
</html>
```

### JavaScript


```js
function changeColor(newColor) {
  var elem = document.getElementById("para");
  elem.style.color = newColor;
}
```

### 結果

使用上のメモ
------

コードが機能するためには、メソッドの名前の中の `"Id"` は、大文字と小文字を正しく表記し*なければなりません*。 `getElementByID()` は自然に見えますが、妥当では*なく*動作しません。

`Document.querySelector()` や `Document.querySelectorAll()` などの他の要素検索メソッドとは異なり、 `getElementById()` はグローバルの `document` オブジェクトに対してのみ利用可能であり、 DOM のすべての要素オブジェクトのメソッドとしては利用*できません*。 ID の値は文書全体を通して固有でなければならないため、機能の「ローカル」バージョンは必要ないのです。

### 例


```html
<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <body>
    <div id="parent-id">
      <p>hello word1</p>
      <p id="test1">hello word2</p>
      <p>hello word3</p>
      <p>hello word4</p>
    </div>
    <script>
 var parentDOM = document.getElementById("parent-id");
 var test1 = parentDOM.getElementById("test1");
 // throw error
 // Uncaught TypeError: parentDOM.getElementById is not a function
 </script>
  </body>
</html>
```


もし指定された `id` を持つ要素がなければ、この関数は `null` を返します。なお、 `id` 引数は大文字小文字の区別があるため、 `document.getElementById("Main")` は `<div id="main">` 要素の代わりに `null` を返し、これは "M" と "m" がこのメソッドの目的では区別されるためです。

**文書内にない要素** は `getElementById()` で検索されません。要素を作成し ID を割り当てたとき、 `getElementById()` でアクセスする前に `Node.insertBefore()` またはそのたぐいのメソッドで、要素を文書ツリーに挿入しておく必要があります。


```js
var element = document.createElement("div");
element.id = "testqq";
var el = document.getElementById("testqq"); // el は null になります
```


**HTML 以外の文書**の場合。 DOM の実装では、どの属性が ID 類であるかを示す情報が必要です。 "id" という名前の属性は、文書の DTD で定義されていない限り ID 類とみなされません。 `id` 属性は XHTML, XUL などの一般的な場合には ID 類として定義されています。属性が ID 類であるかどうかが分からない実装では、 `null` を返すでしょう。

仕様書
---

| Specification |
| --- |
| DOM Standard # ref-for-dom-nonelementparentnode-getelementbyid② |

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

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

関連情報
----

* `Document`: 文書内で要素への参照を取得するために使うことができる他のメソッドやプロパティで使用するための参照。
* `Document.querySelector()`: `'div.myclass'` のようなセレクターを通したクエリのためのもの。
* xml:id - `getElementById()` による XML 文書 (Ajax 呼び出しによって返されるものなど) の 'xml:id' の取得を可能とする便利なメソッドを持つ
Document.close()
================

**`Document.close()`** メソッドは、 `Document.open()` で開かれた文書への書き込みを終了します。

構文
--
```

document.close();
```

例
-
```

// 書きこむ文書を開きます。
document.open();

// 文書の内容を書き込みます。
document.write("<p>たったひとつの内容。</p>");

// 文書を閉じます。
document.close();
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-document-close-dev |

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

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

**`getElementsByTagName`** は `Document` インターフェイスのメソッドで、指定されたタグ名を持つ要素の `HTMLCollection` を返します。ルートノードを含めた文書全体が検索されます。返された `HTMLCollection` は生きたものであり、つまり `document.getElementsByTagName()` を再度呼び出さなくても DOM ツリーと同期を取り続けるよう、自動的に自分自身を更新します。.

構文
--
```

var elements = document.getElementsByTagName(name);
```


* *elements* は生きた `HTMLCollection` であり、見つかった要素がツリーに出現する順に並んでいます (ただし、下記のメモを見てください)。
* *name* は文字列で、要素の名前を表します。特殊な文字列 "\*" は全ての要素を表します。

**メモ:** 最新の W3C 仕様書 では `elements` は `HTMLCollection` です。しかし、 WebKit ブラウザーではこのメソッドは `NodeList` を返します。詳しくは Firefox バグ 14869 を見てください。

例
-

以下の例では、 `getElementsByTagName()` は特定の親要素から開始し、その親要素から DOM を上から下へ再帰的に検索し、タグが `name` パラメータと一致する子要素を探します。これは `document.getElementsByTagName()` と、機能的に同等な `Element.getElementsByTagName()` は、 DOM ツリー内の特定の要素から検索を始めることを示します。

ボタンをクリックすると `getElementsByTagName()` を使用して、特定の親 (文書自体または 2 つの `<div>` 要素の何れかに囲まれたもの) の子孫の段落要素を数えます。


```html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>getElementsByTagName example</title>
    <script>
 function getAllParaElems() {
 var allParas = document.getElementsByTagName("p");
 var num = allParas.length;
 alert("この文書には " + num + " 個の段落があります");
 }

 function div1ParaElems() {
 var div1 = document.getElementById("div1");
 var div1Paras = div1.getElementsByTagName("p");
 var num = div1Paras.length;
 alert("#div1 には " + num + " 個の段落があります");
 }

 function div2ParaElems() {
 var div2 = document.getElementById("div2");
 var div2Paras = div2.getElementsByTagName("p");
 var num = div2Paras.length;
 alert("#div2 には" + num + " 個の段落があります");
 }
 </script>
  </head>
  <body style="border: solid green 3px">
    <p>Some outer text</p>
    <p>Some outer text</p>

    <div id="div1" style="border: solid blue 3px">
      <p>Some div1 text</p>
      <p>Some div1 text</p>
      <p>Some div1 text</p>

      <div id="div2" style="border: solid red 3px">
        <p>Some div2 text</p>
        <p>Some div2 text</p>
      </div>
    </div>

    <p>Some outer text</p>
    <p>Some outer text</p>

    <button onclick="getAllParaElems();">文書内のすべての p 要素を表示</button
 ><br />

    <button onclick="div1ParaElems();">
      div1 要素内のすべての p 要素を表示</button
 ><br />

    <button onclick="div2ParaElems();">
      div2 要素内のすべての p 要素を表示
    </button>
  </body>
</html>
```

注
-

HTML 文書上で呼び出された場合、 `getElementsByTagName()` は処理前に引数を小文字に変換します。これは HTML 文書内のサブツリーにあるキャメルケースの SVG 要素に一致させようとする場合には望ましくありません。この場合は `document.getElementsByTagNameNS()` が便利です。 Firefox バグ 499656 を参照してください。

`document.getElementsByTagName()` は、検索が文書全体を含むという点以外は `Element.getElementsByTagName()` と類似しています。

仕様書
---

| Specification |
| --- |
| DOM Standard # ref-for-dom-document-getelementsbytagname① |

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

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

関連情報
----

* `Element.getElementsByTagName()`
* `document.getElementById()` : `id` によって検索した要素への参照を返す
* `document.getElementsByName()` : `name` によって検索した要素への参照を返す
* `document.querySelector()` : `'div.myclass'` のような CSS セレクターによって要素への参照を返す
Document.anchors
================

**非推奨:** この機能は非推奨になりました。まだ対応しているブラウザーがあるかもしれませんが、すでに関連するウェブ標準から削除されているか、削除の手続き中であるか、互換性のためだけに残されている可能性があります。使用を避け、できれば既存のコードは更新してください。このページの下部にある互換性一覧表を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。

**`anchors`** は `Document` インターフェイスの読み取り専用のプロパティで、文書中のすべてのアンカーのリストを返します。

構文
--


```js
nodeList = document.anchors;
```

### 値

`HTMLCollection` です。

例
-


```js
if (document.anchors.length >= 5) {
  dump("found too many anchors");
}
```


文書中のアンカーを基に目次を作成して文書に挿入する例を以下に示します。


```html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Test</title>
    <script>
 function init() {
 var toc = document.getElementById("toc");
 var i, li, newAnchor;
 for (i = 0; i < document.anchors.length; i++) {
 li = document.createElement("li");
 newAnchor = document.createElement("a");
 newAnchor.href = "#" + document.anchors[i].name;
 newAnchor.textContent = document.anchors[i].text;
 li.appendChild(newAnchor);
 toc.appendChild(li);
 }
 }
 </script>
  </head>
  <body onload="init()">
    <h1>Title</h1>
    <h2><a name="contents">Contents</a></h2>
    <ul id="toc"></ul>

    <h2><a name="plants">Plants</a></h2>
    <ol>
      <li>Apples</li>
      <li>Oranges</li>
      <li>Pears</li>
    </ol>

    <h2><a name="veggies">Veggies</a></h2>
    <ol>
      <li>Carrots</li>
      <li>Celery</li>
      <li>Beats</li>
    </ol>
  </body>
</html>
```


JSFiddle で確認

メモ
--

後方互換性のため、返されるアンカーのセットには `name` 属性を付けて作成されたアンカーのみが含まれ、 `id` 属性付きで作成されたものは含まれません。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-document-anchors |

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

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

**非推奨:** この機能は非推奨になりました。まだ対応しているブラウザーがあるかもしれませんが、すでに関連するウェブ標準から削除されているか、削除の手続き中であるか、互換性のためだけに残されている可能性があります。使用を避け、できれば既存のコードは更新してください。このページの下部にある互換性一覧表を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。

**`styleSheetSets`** プロパティは読み取り専用で、現在有効なすべてのスタイルシートセットの生きたリストを返します。

値
-

利用可能なスタイルシートセットのリストです。

例
-

"sheetList" という ID を持つ `<ul>` （リスト）要素がある場合、次のようなコードで、利用可能なすべてのスタイルシートセットの名前を入力することができます。


```js
const list = document.getElementById("sheetList");
const sheets = document.styleSheetSets;

list.textContent = "";

for (let i = 0; i < sheets.length; i++) {
  const item = document.createElement("li");

  item.textContent = sheets[i];
  list.appendChild(item);
}
```

注
-

有効なスタイルシートセットのリストは、その文書に有効なすべてのスタイルシートを `Document.styleSheets` 属性で並べられている順に列挙し、題名を持つそれぞれのスタイルシートの `title` をリストに追加することによって構築されます。重複するものは（大文字小文字を区別する比較を使用して）リストから削除されます。

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

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

関連情報
----

* `Stylesheet`
* `Document.styleSheets`
* `document.lastStyleSheetSet`
* `document.preferredStyleSheetSet`
* `document.selectedStyleSheetSet`
* `document.enableStyleSheetsForSet()`
Document.doctype
================

現在の文書に関連付けられた文書型宣言 (Document Type Declaration) (DTD) を返します。返されるオブジェクトは、 `DocumentType` インターフェイスを持ちます。 `DocumentType` を生成するには `DOMImplementation.createDocumentType()` を使用してください。

構文
--
```

doctype = document.doctype;
```


* `doctype` : 読み取り専用のプロパティです。
例
-


```js
var doctypeObj = document.doctype;

console.log(
  "doctypeObj.name: " +
    doctypeObj.name +
    "\n" +
    "doctypeObj.internalSubset: " +
    doctypeObj.internalSubset +
    "\n" +
    "doctypeObj.publicId: " +
    doctypeObj.publicId +
    "\n" +
    "doctypeObj.systemId: " +
    doctypeObj.systemId,
);
```

メモ
--

現在の文書に関連付けられている DTD が存在しないは `null` が返されます。

DOM レベル 2 では、文書型宣言の編集に対応していません。

仕様書
---

| Specification |
| --- |
| DOM Standard # ref-for-dom-document-doctype① |

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

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

`Document` インターフェイスの **`embeds`** プロパティは読み取り専用で、現在の文書の埋め込み `<object>` 要素のリストを返します。

構文
--
```

nodeList = document.embeds
```

### 値

`HTMLCollection` です。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-document-embeds-dev |

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

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

**`elementsFromPoint()`** は `Document` インターフェイスのメソッドで、指定された（ビューポートからの相対位置の）座標にあるすべての要素の配列を返します。
 要素はビューポートの最上位のボックスから最下位のボックスに向けて並べられます。

これは `elementFromPoint()` メソッドと同じような方法で動作します。

構文
--


```js
elementsFromPoint(x, y)
```

### 引数

`x`

点の水平座標です。

`y`

点の垂直座標です。

### 返値

`Element` オブジェクトの配列で、ビューポートの最上位のボックスから最下位のボックスに向けて並べられます。

例
-

### HTML


```html
<div>
  <p>Some text</p>
</div>
<p>Elements at point 30, 20:</p>
<div id="output"></div>
```

### JavaScript


```js
let output = document.getElementById("output");
if (document.elementsFromPoint) {
  let elements = document.elementsFromPoint(30, 20);
  elements.forEach((elt, i) => {
    output.textContent += elt.localName;
    if (i < elements.length - 1) {
      output.textContent += " < ";
    }
  });
} else {
  output.innerHTML =
    '<span style="color: red;">' +
    "Browser does not support <code>document.elementsFromPoint()</code>" +
    "</span>";
}
```

### 結果

仕様書
---

| Specification |
| --- |
| CSSOM View Module # dom-document-elementsfrompoint |

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

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

関連情報
----

* `Document.elementFromPoint()`
Document.queryCommandState()
============================

**非推奨:** この機能は非推奨になりました。まだ対応しているブラウザーがあるかもしれませんが、すでに関連するウェブ標準から削除されているか、削除の手続き中であるか、互換性のためだけに残されている可能性があります。使用を避け、できれば既存のコードは更新してください。このページの下部にある互換性一覧表を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。

**`queryCommandState()`** メソッドは、現在の選択範囲に特定の `Document.execCommand()` コマンドが適用されているかどうかを知らせます。

構文
--


```js
queryCommandState(String command)
```

### 引数

`command` は `Document.execCommand()` のコマンドです。

### 返値

`queryCommandState()` は論理値、または状態が不明な場合は `null` を返す可能性があります。

例
-

### HTML


```html
<div contenteditable="true">Select a part of this text!</div>
<button onclick="makeBold();">Test the state of the 'bold' command</button>

<hr />

<div id="output"></div>
```


```
hr,
button {
  margin: 1rem 0;
}
```

### JavaScript


```js
function makeBold() {
  const state = document.queryCommandState("bold");
  let message;
  switch (state) {
    case true:
      message = "The bold formatting will be removed from the selected text.";
      break;
    case false:
      message = "The selected text will be displayed in bold.";
      break;
    default:
      message = "The state of the 'bold' command is indeterminable.";
      break;
  }
  document.querySelector("#output").textContent = `Output: ${message}`;
  document.execCommand("bold");
}
```

### 結果

仕様書
---

この機能は、現在のどの仕様にも含まれていません。標準化される予定もありません。

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

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

関連情報
----

* `HTMLElement.contentEditable`
* `document.designMode`
* `queryCommandState()` に関するブラウザーのバグ: Scribe's "Browser Inconsistencies" documentation
Document: location プロパティ
========================

**`Document.location`** は読み取り専用のプロパティで、この文書の URL に関する情報を持った `Location` オブジェクトを返します。これはその URL を変更したり他の URL を読み込んだりするためのメソッドも提供しています。

`Document.location` は*読み取り専用*の `Location` オブジェクトですが、文字列を代入することができます。つまり、 document.location が文字列であるかのように扱うことができます。 `document.location = 'http://www.example.com'` は `document.location.href = 'http://www.example.com'` の別名です。他の文字列を代入すると、ブラウザーは代入されたウェブサイトを読み込みます。

URL を文字列として受け取るだけであれば、読み取り専用の `document.URL` プロパティも利用することができます。

現在の文書が閲覧コンテキスト内にない場合、返値は `null` となります。

値
-

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

例
-


```js
console.log(document.location);
// Location オブジェクトをコンソールへ表示
```

仕様書
---

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

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

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

関連情報
----

* 返値のインターフェイスである `Location`
* 同様の情報で閲覧コンテキストに結びつけられている `Window.location`
Document.documentElement
========================

**`Document.documentElement`** は、その `document` のルート要素 (例えば、 HTML 文書の場合は `<html>` 要素) である `Element` を返します。

構文
--
```

const element = document.documentElement
```

例
-


```js
const rootElement = document.documentElement;
const firstTier = rootElement.childNodes;
// firstTier は <head> や <body> などの
// ルート要素の直接の子である NodeList

for (const child of firstTier) {
  // ルート要素のそれぞれの直接の子に対する処理
}
```

メモ
--

空ではない HTML 文章の場合、 `documentElement` は常に `<html>` 要素を返します。空ではない XML 文章の場合、 `documentElement` は常に文章のルート要素である何らかの要素を返します。

仕様書
---

| Specification |
| --- |
| DOM Standard # ref-for-dom-document-documentelement① |

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

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

**`Document.pictureInPictureElement`** は読み取り専用プロパティで、 この文書内のピクチャインピクチャモードで現在表示されている `Element` を返します。ピクチャインピクチャモードが現在使用されていない場合は `null` を返します。

このプロパティは読み取り専用ですが、（厳格モードであっても）変更されても例外は発生しません。セッターは何もせず、無視されます。

値
-

現在ピクチャインピクチャモードになっている `Element` オブジェクトへの参照です。現在この `document` でピクチャインピクチャモードが使用されていない場合、返される値は `null` です。

例
-

この例では `pictureInPictureElement` が返す値を検査する関数 `exitPictureInPicture()` を表示しています。現在の文書がピクチャインピクチャモードでない（`pictureInPictureElement` が `null` である）場合、 `Document.exitPictureInPicture()` を実行してピクチャインピクチャモードを終了します。


```js
function exitPictureInPicture() {
  if (document.pictureInPictureElement) {
    document.exitPictureInPicture();
  }
}
```

仕様書
---

| Specification |
| --- |
| Picture-in-Picture # ref-for-dom-documentorshadowroot-pictureinpictureelement①⑤ |

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

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

関連情報
----

* `HTMLVideoElement.requestPictureInPicture()`
* `HTMLVideoElement.disablePictureInPicture`
* `Document.pictureInPictureEnabled`
* `Document.exitPictureInPicture()`
* `:picture-in-picture`
Document.getElementsByName()
============================

`Document` オブジェクトの **`getElementsByName()`** メソッドは、文書内で指定した `name` を持つ要素の `NodeList` コレクションを返します。

構文
--
```

var elements = document.getElementsByName(name);
```


* *elements* は、生きた `NodeList` コレクション、つまり文書内で同じ `name` を持った新しい要素が追加されたり削除されたりすると自動的に更新されるものです。
* `name` は、要素の `name` 属性の値です。
例
-


```html
<!doctype html>
<html lang="en">
  <title>document.getElementsByName の使用例</title>

  <input type="hidden" name="up" />
  <input type="hidden" name="down" />

  <script>
 var up\_names = document.getElementsByName("up");
 console.log(up\_names[0].tagName); // "INPUT" と表示
 </script>
</html>
```

メモ
--

`name` 属性は、(X)HTML 文書にのみ適用可能です。

返却された `NodeList` コレクションには、 `<meta>` や `<object>` など、それに `name` 属性にまったく対応していない要素も含め、指定された `name` を持つ*すべての*要素が含まれます。

**警告:** **getElementsByName** メソッドは、 IE10 以前では動作が異なります。この場合、 `getElementsByName()` は指定された `id` 属性を持つ要素も返します。 `name` および `id` で同じ文字列を使用しないように注意してください。

**警告:** **getElementsByName** メソッドは IE では動作が異なります。この場合、 `getElementsByName()` は `name` 属性を許容しない要素 (`<span>` など) を返しません。

**警告:** IE および Edge では、 `NodeList` ではなく `HTMLCollection` を返します。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-document-getelementsbyname-dev |

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

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

関連情報
----

* `document.getElementById()` : 固有の `id` を持つ要素への参照を返す
* `document.getElementsByTagName()` : 同じタグ名の要素への参照を返す
* `document.querySelector()` : `'div.myclass'` のような CSS セレクターによって要素への参照をかえす