recursal/MDN huggingface dataset:
ServiceWorkerGlobalScope: periodicsync イベント
===========================================

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

**`periodicsync`** は `ServiceWorkerGlobalScope` インターフェイスのイベントで、 `PeriodicSyncManager`を登録したときに指定された時間間隔で発行されます。

このイベントはキャンセル不可で、バブリングしません。

構文
--

このイベント名を `addEventListener()` 等のメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。


```js
addEventListener("periodicsync", (event) => {});

onperiodicsync = (event) => {};
```

イベント型
-----

`PeriodicSyncEvent` (en-US) です。 `Event` を継承しています。

Event

ExtendableEvent

PeriodicSyncEvent

(en-US)イベントプロパティ
---------

*祖先である `Event` からプロパティを継承しています*。

`PeriodicSyncEvent.tag` (en-US) 読取専用 

この `PeriodicSyncEvent` の開発者定義の識別子を返します。ウェブアプリケーションで複数のタグを使用すると、異なる頻度で異なる定期的なタスクを実行することができます。

例
-

以下の例は、サービスワーカーで定期的な同期イベントに応答する方法を示しています。


```js
self.addEventListener("periodicsync", (event) => {
  if (event.tag === "get-latest-news") {
    event.waitUntil(fetchAndCacheLatestNews());
  }
});
```


また、 `onperiodicsync` プロパティを使用してイベントハンドラーを設定することもできます。


```js
self.onperiodicsync = (event) => {
  // ...
};
```

仕様書
---

| Specification |
| --- |
| Web Periodic Background Synchronization # periodicsync-event |
| Web Periodic Background Synchronization # dom-serviceworkerglobalscope-onperiodicsync |

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

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

関連情報
----

* Richer offline experiences with the Periodic Background Sync API
* A Periodic Background Sync demo app
ServiceWorkerGlobalScope: install イベント
======================================

**`install`** は `ServiceWorkerGlobalScope` インターフェイスのイベントで、 `ServiceWorkerRegistration` が新しい `ServiceWorkerRegistration.installing` ワーカーを取得したときに発行されます。

このイベントはキャンセル不可で、バブリングしません。

構文
--

このイベント名を `addEventListener()` 等のメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。


```js
addEventListener("install", (event) => {});

oninstall = (event) => {};
```

イベント型
-----

`ExtendableEvent` です。 `Event` を継承しています。

Event

ExtendableEventイベントプロパティ
---------

*固有のプロパティは実装していませんが、親である `Event` からプロパティを継承しています。*

例
-

以下のスニペットでは、`install`イベントハンドラーを使用して、キャッシュに多くのレスポンスを投入し、サービスワーカーがオフラインで資産を提供するために使用する方法を示しています。


```js
this.addEventListener("install", (event) => {
  event.waitUntil(
    caches
      .open("v1")
      .then((cache) =>
        cache.addAll([
          "/",
          "/index.html",
          "/style.css",
          "/app.js",
          "/image-list.js",
          "/star-wars-logo.jpg",
          "/gallery/",
          "/gallery/bountyHunters.jpg",
          "/gallery/myLittleVader.jpg",
          "/gallery/snowTroopers.jpg",
        ]),
      ),
  );
});
```


また、 `oninstall` プロパティを使用して、イベントハンドラーを設定することもできます。


```js
globalScope.oninstall = (event) => {
  // ...
};
```

仕様書
---

| Specification |
| --- |
| Service Workers # dom-serviceworkerglobalscope-oninstall |

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

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

関連情報
----

* `activate` イベント
* `ServiceWorkerGlobalScope`
* サービスワーカー API
ServiceWorkerGlobalScope: pushsubscriptionchange イベント
=====================================================

**`pushsubscriptionchange`** イベントはグローバルスコープとしての `ServiceWorker` へ送信され、アプリケーションの制御の外から起動されたプッシュ通知への加入状況が変化したことを示します。

これはブラウザーが加入を更新した場合に発生しますが、加入が取り消されたり失われたりしたときにも発生する可能性があります。

このイベントはキャンセル不可で、バブリングしません。

構文
--

このイベント名を `addEventListener()` 等のメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。


```js
addEventListener("pushsubscriptionchange", (event) => {});

onpushsubscriptionchange = (event) => {};
```

イベント型
-----

一般的な `Event` です。

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

加入に関する情報をアプリケーションサーバーと共有する方法を示す例では `fetch()` を使用する傾向がありますが、これは実際の使用には必ずしも最適な選択ではありません。たとえば、アプリがオフラインの場合は機能しないためです。

サービスワーカーとアプリサーバー間で加入情報を同期するのに別の方法を使用することを検討するか、 `fetch()` を使用するコードが、データ交換の試行が失敗した場合を処理するのに十分堅牢であることを確認してください。

**メモ:** この仕様書の早期の草稿では、このイベントは `PushSubscription` が期限切れになった時に送信されるよう定義されていました。

例
-

この例は、サービスワーカーのコンテキストで実行するものであり、 `pushsubscriptionchange` イベントを待ち受けて、無効になった場合に再加入します。


```js
self.addEventListener(
  "pushsubscriptionchange",
  (event) => {
    const subscription = swRegistration.pushManager
      .subscribe(event.oldSubscription.options)
      .then((subscription) =>
        fetch("register", {
          method: "post",
          headers: {
            "Content-type": "application/json",
          },
          body: JSON.stringify({
            endpoint: subscription.endpoint,
          }),
        }),
      );
    event.waitUntil(subscription);
  },
  false,
);
```


加入の有効期限が切れたことを示す `pushsubscriptionchange` イベントが到着すると、プッシュマネージャーの `subscribe()` メソッドを呼び出して再加入します。返されたプロミスが解決されると、新しい加入を受け取ります。これは、 `fetch()` 呼び出しを使用してアプリサーバーに配信され、 JSON 形式で加入の `endpoint` の返信をアプリサーバーに送信します。

`onpushsubscriptionchange` イベントハンドラープロパティを使用してイベントハンドラーを設定することもできます。


```js
self.onpushsubscriptionchange = (event) => {
  event.waitUntil(
    swRegistration.pushManager
      .subscribe(event.oldSubscription.options)
      .then((subscription) => {
        /\* ... \*/
      }),
  );
};
```

仕様書
---

| Specification |
| --- |
| Push API # the-pushsubscriptionchange-event |
| Push API # dom-serviceworkerglobalscope-onpushsubscriptionchange |

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

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

関連情報
----

* プッシュ API の使用
ServiceWorkerGlobalScope: notificationclick イベント
================================================

**`notificationclick`** イベントは、 `ServiceWorkerRegistration.showNotification()` によって生み出されたシステム通知がクリックされたことを示すために発生します。

このイベントはキャンセル不可で、バブリングしません。

構文
--

このイベント名を `addEventListener()` 等のメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。


```js
addEventListener("notificationclick", (event) => {});

onnotificationclick = (event) => {};
```

イベント型
-----

`NotificationEvent` です。 `Event` を継承しています。

Event

ExtendableEvent

NotificationEventイベントプロパティ
---------

*親である `Event` からプロパティを継承しています*。

`NotificationEvent.notification` 読取専用 

クリックされイベントが発行された通知を表す `Notification` オブジェクトを返します。

`NotificationEvent.action` 読取専用 

ユーザーがクリックした通知ボタンの文字列 ID を返します。この値は、ユーザーがアクションボタン以外のどこかで通知をクリックした場合、またはその通知にボタンがなかった場合、空文字列を返します。

例
-

`notificationclick` イベントは `addEventListener` メソッド内で使用することができます。


```js
self.addEventListener("notificationclick", (event) => {
  console.log("On notification click: ", event.notification.tag);
  event.notification.close();

  // This looks to see if the current is already open and
  // focuses if it is
  event.waitUntil(
    clients
      .matchAll({
        type: "window",
      })
      .then((clientList) => {
        for (const client of clientList) {
          if (client.url === "/" && "focus" in client) return client.focus();
        }
        if (clients.openWindow) return clients.openWindow("/");
      }),
  );
});
```


または、 `onnotificationclick` イベントハンドラープロパティを使用してください。


```js
self.onnotificationclick = (event) => {
  console.log("On notification click: ", event.notification.tag);
  event.notification.close();

  // This looks to see if the current is already open and
  // focuses if it is
  event.waitUntil(
    clients
      .matchAll({
        type: "window",
      })
      .then((clientList) => {
        for (const client of clientList) {
          if (client.url === "/" && "focus" in client) return client.focus();
        }
        if (clients.openWindow) return clients.openWindow("/");
      }),
  );
};
```


イベントのアクションは `event.action` を使って `notificationclick` イベントハンドラーの中で処理することができます。


```js
navigator.serviceWorker.register("sw.js");
Notification.requestPermission((result) => {
  if (result === "granted") {
    navigator.serviceWorker.ready.then((registration) => {
      // Archive というタイトルのアクションを含んだ通知を表示します。
      registration.showNotification("New mail from Alice", {
        actions: [
          {
            action: "archive",
            title: "Archive",
          },
        ],
      });
    });
  }
});

self.addEventListener(
  "notificationclick",
  (event) => {
    event.notification.close();
    if (event.action === "archive") {
      // ユーザーが [Archive] アクションを選択しました。
      archiveEmail();
    } else {
      // ユーザーが通知本文を選択（例：クリック）した。
      clients.openWindow("/inbox");
    }
  },
  false,
);
```

仕様書
---

| Specification |
| --- |
| Notifications API Standard # activating-a-notification |
| Notifications API Standard # dom-serviceworkerglobalscope-onnotificationclick |

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

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

関連情報
----

* サービスワーカー API
* 通知 API
ServiceWorkerGlobalScope.skipWaiting()
======================================

**`ServiceWorkerGlobalScope.skipWaiting()`** は `ServiceWorkerGlobalScope` のメソッドで、待機しているサービスワーカーがアクティブになるように強制します。

このメソッドは、 `Clients.claim()` と併用することで、現在のクライアントと他のすべてのアクティブなクライアントの両方で、元となるサービスワーカーの更新が即座に有効になるようにします。

構文
--


```js
skipWaiting()
```

### 引数

なし。

### 返値

`Promise` で、直ちに `undefined` に解決します。

例
-

`self.skipWaiting()` はサービスワーカーの実行中、いつでも呼び出すことができますが、新しくインストールされたサービスワーカーが `waiting` 状態のままである場合にのみ効果があります。したがって、 `self.skipWaiting()` は `InstallEvent` ハンドラーの内部から呼び出すことが一般的です。

以下の例では、アクティブなサービスワーカーが既にあるかどうかに関係なく、新しくインストールされたサービスワーカーを `activating` 状態に進行させるようにします。


```js
self.addEventListener("install", (event) => {
  // skipWaiting() が返すプロミスは無視しても安全です。
  self.skipWaiting();

  // event.waitUntil() の内部で、サービスワーカーを
  // インストールするために必要な他のアクションを
  // 実行することも可能です。
});
```

仕様書
---

| Specification |
| --- |
| Service Workers # service-worker-global-scope-skipwaiting |

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

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

関連情報
----

* サービスワーカーの使用
* サービスワーカーの基本的なコード例
* Is ServiceWorker ready?
* `Clients.claim()`
* プロミス
* ウェブワーカーの使用
ServiceWorkerGlobalScope: fetch イベント
====================================

**fetch** イベントは `fetch()` メソッドが呼び出されたときに発生します。

このイベントはキャンセル不可で、バブリングしません。

構文
--

このイベント名を `addEventListener()` 等のメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。


```js
addEventListener("fetch", (event) => {});

onfetch = (event) => {};
```

イベント型
-----

一般的な `Event` です。

例
-

このコードスニペットは、service worker prefetch の例（prefetch の例のライブ版を参照してください）からのものです。 `onfetch` イベントハンドラーは `fetch` イベントを監視します。イベントが発生した時、コードは `Cache` オブジェクト内で、最初に一致したリクエストに対して解決するプロミスを返します。もし、何も一致しなかった場合は、コードはネットワークからレスポンスを読み取ります。

さらに、このコードは `fetch()` 操作で発生した例外を処理しています。 HTTP のエラーレスポンス（たとえば、404）は、例外を引き起こさないことに注意してください。適切なエラーコードセットを持った通常のレスポンスオブジェクトを返します。


```js
self.addEventListener("fetch", (event) => {
  console.log(`Handling fetch event for ${event.request.url}`);

  event.respondWith(
    caches.match(event.request).then((response) => {
      if (response) {
        console.log("Found response in cache:", response);
        return response;
      }
      console.log("No response found in cache. About to fetch from network…");

      return fetch(event.request)
        .then((response) => {
          console.log("Response from network is:", response);

          return response;
        })
        .catch((error) => {
          console.error(`Fetching failed: ${error}`);
          throw error;
        });
    }),
  );
});
```

仕様書
---

| Specification |
| --- |
| Service Workers # dom-serviceworkerglobalscope-onfetch |

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

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

関連情報
----

* サービスワーカーの使用
* サービスワーカーの基本的なコード例
* Is ServiceWorker ready?
* `Promise`
* ウェブワーカーの使用
ServiceWorkerGlobalScope.clients
================================

**`clients`** は `ServiceWorkerGlobalScope` インターフェイスの読み取り専用プロパティで、サービスワーカーに関連付けられた `Clients` オブジェクトを返します。

値
-

指定されたワーカーに関連付けられた `Clients` オブジェクト。

仕様書
---

| Specification |
| --- |
| Service Workers # service-worker-global-scope-clients |

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

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

関連情報
----

* サービスワーカーの使用
* サービスワーカーの基本的なコード例
* Is ServiceWorker ready?
* `Promise`
* ウェブワーカーの使用
PushSubscriptionOptions.applicationServerKey
============================================

`PushSubscriptionOptions` インターフェイスの **`applicationServerKey`** 読み取り専用プロパティは、プッシュサーバーが用いる公開鍵です。

値
-

プッシュサーバーがプッシュサーバーを通じてクライアントアプリケーションにメッセージを送信するのに用いる公開鍵です｡この値は､アプリケーションサーバーで生成された署名用鍵ペアの一部であり､P-256 曲線上での楕円曲線デジタル署名 (ECDSA) で利用可能です｡

例
-

この例では、`applicationServerKey` の値をコンソールに出力します。


```js
navigator.serviceWorker.ready.then((reg) => {
  reg.pushManager.getSubscription().then((subscription) => {
    const options = subscription.options;
    console.log(options.applicationServerKey); // 公開鍵
  });
});
```

仕様書
---

| Specification |
| --- |
| Push API # dom-pushsubscriptionoptions-applicationserverkey |

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

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

`PushSubscriptionOptions` の **`userVisibleOnly`** 読み取り専用プロパティは、プッシュサブスクリプションがユーザーに見える効果を持つメッセージのみに使われるかどうかを表します。

値
-

プッシュサブスクリプションがユーザーに見える効果を持つメッセージのみに使われるかどうかを表す `boolean` 値です｡

例
-

この例では、`userVisibleOnly` の値をコンソールに出力します。


```js
navigator.serviceWorker.ready.then((reg) => {
  reg.pushManager.getSubscription().then((subscription) => {
    const options = subscription.options;
    console.log(options.userVisibleOnly); // ユーザーに見えるサブスクリプションであれば true
  });
});
```

仕様書
---

| Specification |
| --- |
| Push API # dom-pushsubscriptionoptions-uservisibleonly |

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

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

**`media`** は `CSSMediaRule` インターフェイスの読み取り専用プロパティで、 `MediaList` でスタイル情報の出力先メディアを表します。

値
-

`MediaList` です。

例
-

 この CSS には、単一のスタイルルールを持つメディアクエリーが含まれています。これは `document.styleSheets[0].cssRules` が返す最初の `CSSRule` になります。
 したがって、 `myRules[0].media` を呼び出すと、メディアクエリーを表す `MediaList` オブジェクトを返します。


```css
@media (min-width: 500px) {
  body {
    color: blue;
  }
}
```



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

仕様書
---

| Specification |
| --- |
| CSS Conditional Rules Module Level 3 # dom-cssmediarule-media |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
DOM ツリーの作成方法
============

このページでは JavaScript において DOM API を用いて DOM オブジェクトを作成したり変更したりする方法を解説します。

次の XML 文書を見てください。


```xml
<?xml version="1.0"?>
<people>
  <person first-name="eric" middle-initial="H" last-name="jung">
    <address street="321 south st" city="denver" state="co" country="usa"/>
    <address street="123 main st" city="arlington" state="ma" country="usa"/>
  </person>

  <person first-name="jed" last-name="brown">
    <address street="321 north st" city="atlanta" state="ga" country="usa"/>
    <address street="123 west st" city="seattle" state="wa" country="usa"/>
    <address street="321 south avenue" city="denver" state="co" country="usa"/>
  </person>
</people>
```


DOM API を使うことで、この文書のメモリー内の表現を作成することができます。


```js
const doc = document.implementation.createDocument("", "", null);
const peopleElem = doc.createElement("people");

const personElem1 = doc.createElement("person");
personElem1.setAttribute("first-name", "eric");
personElem1.setAttribute("middle-initial", "h");
personElem1.setAttribute("last-name", "jung");

const addressElem1 = doc.createElement("address");
addressElem1.setAttribute("street", "321 south st");
addressElem1.setAttribute("city", "denver");
addressElem1.setAttribute("state", "co");
addressElem1.setAttribute("country", "usa");
personElem1.appendChild(addressElem1);

const addressElem2 = doc.createElement("address");
addressElem2.setAttribute("street", "123 main st");
addressElem2.setAttribute("city", "arlington");
addressElem2.setAttribute("state", "ma");
addressElem2.setAttribute("country", "usa");
personElem1.appendChild(addressElem2);

const personElem2 = doc.createElement("person");
personElem2.setAttribute("first-name", "jed");
personElem2.setAttribute("last-name", "brown");

const addressElem3 = doc.createElement("address");
addressElem3.setAttribute("street", "321 north st");
addressElem3.setAttribute("city", "atlanta");
addressElem3.setAttribute("state", "ga");
addressElem3.setAttribute("country", "usa");
personElem2.appendChild(addressElem3);

const addressElem4 = doc.createElement("address");
addressElem4.setAttribute("street", "123 west st");
addressElem4.setAttribute("city", "seattle");
addressElem4.setAttribute("state", "wa");
addressElem4.setAttribute("country", "usa");
personElem2.appendChild(addressElem4);

const addressElem5 = doc.createElement("address");
addressElem5.setAttribute("street", "321 south avenue");
addressElem5.setAttribute("city", "denver");
addressElem5.setAttribute("state", "co");
addressElem5.setAttribute("country", "usa");
personElem2.appendChild(addressElem5);

peopleElem.appendChild(personElem1);
peopleElem.appendChild(personElem2);
doc.appendChild(peopleElem);
```


DOM ツリーは以下のことをすることができます。

* XPath 式を用いて問い合わせ
* XMLSerializer を用いて文字列に変換
* ウェブサーバーに POST (`XMLHttpRequest` で)
* XSLT または XLink を使用して形式変換
関連情報
----

* XML
* XPath
* XML の解釈とシリアライズ
* XMLHttpRequest
セレクターを使用した DOM 要素の特定
====================

セレクター API により提供されるメソッドを用いると、一連のセレクターに一致する要素 (`Element`) ノードを DOM から簡単かつ素早く取り出すことができます。これは過去の技術よりもはるかに速く、必要な場所で、例えば、 JavaScript コードでループを使用して検索する必要があるアイテムを特定するために使います。

NodeSelector インターフェース
---------------------

この仕様書では、 `Document`, `DocumentFragment`, `Element` インターフェースを実装しているすべてのオブジェクトに対して 2 つの新しいメソッドを追加しています。

`querySelector()`

ノードのサブツリー内で最初に一致した `Element` ノードを返します。一致する要素がなかった場合は `null` を返します。

`querySelectorAll()`

ノードのサブツリー内で一致するすべての `Element` ノードを含む `NodeList` を返すか、一致するものが見つからなかった場合は空の `NodeList` を返します。


**メモ:** `querySelectorAll()` が返す `NodeList` はライブではありません。すなわち、 DOM で行われた変更がコレクションに反映されません。これは他の DOM クエリメソッドがライブのノードリストを返すのと異なります。

例や詳細については、 `Element.querySelector()` および `Element.querySelectorAll()` メソッドの記事を参照してください。

セレクター
-----

セレクターのメソッドはセレクターを受け入れて、どの要素または要素群を返すかを判断します。これはセレクターリストを含みますので、単一の問い合わせで複数のセレクターをグループ化することができます。

ユーザーのプライバシーを保護するために、一部の擬似クラスには対応していなかったり、異なる動作をしたりすることがあります。例えば `:visited` に一致するものは返されなかったり、 `:link` は `:any-link` と同様に扱われたりします。

要素のみが選択できますので、擬似クラスには対応していません。

例
-

文書中ですべての段落要素 (`p`) のうち、 CSS のクラスが `warning` または `note` に指定されているものを抽出するには、次のようにします。


```js
const special = document.querySelectorAll("p.warning, p.note");
```


もちろん、次のように ID による指定も可能です。


```js
const el = document.querySelector("#main, #basic, #exclamation");
```


上記のコードが実行されると、`el` には ID が `main`、 `basic`、 `exclamation` である要素の内、最初の要素だけが格納されます。

関連情報
----

* セレクター仕様書
* CSS セレクター
* `Element.querySelector()`
* `Element.querySelectorAll()`
* `Document.querySelector()`
* `Document.querySelectorAll()`
ドキュメントオブジェクトモデルの使用
==================

ドキュメントオブジェクトモデル (DOM) は、（他の文書のツリー風の型の中で） HTML や XML 文書の DOM ツリーを操作するための API です。この API はページの記述の根底にあり、ウェブ上のスクリプティングのベースとなるものです。

DOM ツリーとは？
----------

**DOM ツリー**は一種の ツリー構造で、ノードが HTML または XML 文書のコンテンツを表します。それぞれの HTML または XML 文書は固有の DOM ツリーの表現を持っています。例えば、以下の文書を見てください。


```html
<html lang="en">
  <head>
    <title>My Document</title>
  </head>
  <body>
    <h1>Header</h1>
    <p>Paragraph</p>
  </body>
</html>
```


これは以下のように見える DOM ツリーを持っています。

![ルートとコンテンツを含むノード要素を保有する文書のツリー状表現としての DOM](/ja/docs/Web/API/Document_object_model/Using_the_Document_Object_Model/using_the_w3c_dom_level_1_core-doctree.jpg)

なお、上位のツリーは上記の文書の DOM ツリーと似ていますが、同じではありません。実際の DOM ツリーはホワイトスペースを温存するからです。

ウェブブラウザーが HTML 文書を解釈するとき、ブラウザーは DOM ツリーを構築し、文書を表示するために使用します。

文書 API で何ができるのか
---------------

文書 API、 DOM API とも呼ばれますが、これによって何でも好きなように DOM ツリーを変更できます。これは、任意の HTML や XML 文書をゼロから作成したり、与えられた HTML や XML 文書の内容を変更したりすることができることを意味します。ウェブページの作者は、文書の DOM を JavaScript を使ってグローバルオブジェクトの `document` プロパティにアクセスすることで編集することができます。この `document` オブジェクトは `Document` インターフェイスを実装しています。

簡単な例
----

上の文書を元に作者は、ヘッダーの内容を変え、1つある段落を 2 つに書き換えたいものとしましょう。これは以下のスクリプトによってできます。

### HTML


```html
<html lang="ja">
  <head>
    <title>文書</title>
  </head>
  <body>
    <input type="button" value="この文書を変更" onclick="change()" />
    <h2>見出し</h2>
    <p>段落</p>
  </body>
</html>
```

### JavaScript コンテンツ


```js
function change() {
  // document.getElementsByTagName("h2") は、文書内の <h2> 要素の NodeList
  // であり、最初のものは 0 番
  const header = document.getElementsByTagName("h2").item(0);

  // header の firstChild はテキストノード
  header.firstChild.data = "動的文書";

  // ヘッダーが "動的文書" になった

  // 最初の段落にアクセス
  const para = document.getElementsByTagName("p").item(0);
  para.firstChild.data = "これが最初の段落です。";

  // 2 番目の段落のために新しいテキストノードを生成する
  const newText = document.createTextNode("これが 2 番目の段落です。");

  // 2 番目の段落になる新しい要素を生成する
  const newElement = document.createElement("p");

  // 段落にテキストを置く
  newElement.appendChild(newText);

  // また、（段落の親に当たる)）ody に追加することで、文書の最後に
  // 段落を置く
  para.parentNode.appendChild(newElement);
}
```

### 結果

どうすればもっと学べるのか
-------------

これで DOM の基本的な概念に慣れたと思いますので、JavaScript と DOM インターフェイスによる HTML の表の操作 を読んで、文書 API の基本的な機能についてもっと学びたいと思うかもしれません。

関連情報
----

* ドキュメントオブジェクトモデル (DOM).
AudioScheduledSourceNode.start()
================================

`start()` は `AudioScheduledSourceNode` のメソッドで、指定した時刻に再生が始まるように、音をスケジュールします。時刻を指定しなかった場合は、すぐに音を再生し始めます。

構文
--


```js
start()
start(when)
```

### 引数

`when` 省略可

音の再生を始めるべき時刻を、秒単位で指定します。この値は `AudioContext` がその `currentTime` 属性で使用しているのと同じ時間座標系で指定します。 0 の値を指定する（または`when`引数を完全に除外する）と、音の再生をすぐに始めるようにします。

### 返値

なし (`undefined`)。

### 例外

`InvalidStateNode` `DOMException`

ノードが既に開始されている場合に発生します。このエラーは `stop()` を事前に呼び出したためにノードがもう実行されていない場合でも発生します。

`RangeError`

when` に指定した値が負である場合に発生します。

例
-

この例では、2秒後に再生を始め、その1秒後に再生を停止するようにスケジュールされた `OscillatorNode` を作成する方法を示します。時刻は `AudioContext.currentTime` が返すコンテキストの現在のタイムスタンプに希望の秒数を加えることで計算されます。


```js
context = new AudioContext();
osc = context.createOscillator();
osc.connect(context.destination);

/\* 発振器の開始時刻と停止時刻を設定する。 \*/

osc.start(context.currentTime + 2);
osc.stop(context.currentTime + 3);
```

仕様書
---

| Specification |
| --- |
| Web Audio API # dom-audioscheduledsourcenode-start |

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

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

関連情報
----

* ウェブオーディオ API の使用
* `stop()`
* `AudioScheduledSourceNode`
* `AudioBufferSourceNode`
* `ConstantSourceNode`
* `OscillatorNode`
AudioScheduledSourceNode: ended イベント
====================================

`ended` は `AudioScheduledSourceNode` インターフェイスのイベントで、ソースノードの再生が停止したときに発生します。

このイベントは、`AudioScheduledSourceNode`の再生が停止したときに発生します。理由は、所定の停止時刻に達したか、音声の全時間が再生されたか、またはバッファーの全体が再生されたかのいずれかです。

このイベントはキャンセル不可で、バブリングしません。

構文
--

このイベント名を `addEventListener()` 等のメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。


```js
addEventListener("ended", (event) => { })

onended = (event) => { }
```

イベント型
-----

一般的な `Event` です。

例
-

この単純な例では、 `ended` イベントに対するイベントリスナーを設定し、ノードの再生が停止したときにユーザーインターフェースに［Start］ボタンを表示できるようにしています。


```js
node.addEventListener("ended", () => {
  document.getElementById("startButton").disabled = false;
});
```


また、 `onended` プロパティを使用してイベントハンドラーを設定することもできます。


```js
node.onended = () => {
  document.getElementById("startButton").disabled = false;
};
```


ended イベントの使用例は、 audio-buffer の例 (GitHub) を参照してください。

仕様
--

| Specification |
| --- |
| Web Audio API # dom-audioscheduledsourcenode-onended |

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

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

関連イベント
------

* audioprocess
* complete
関連情報
----

* `HTMLAudioElement`
* `HTMLVideoElement`
* `<audio>`
* `<video>`
* HTMLMediaElement の `ended` イベント
* MediaStreamTrack の `ended` イベント