recursal/MDN huggingface dataset:
AudioTrackList: change イベント
===========================

`change` イベントは、音声トラックが有効または無効になったとき（トラックの `enabled` プロパティを変更したときなど）に発生します。

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

構文
--

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


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

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

イベント型
-----

一般的な `Event` です。

例
-

`addEventListener()` を使用する場合:


```js
const videoElement = document.querySelector("video");
videoElement.audioTracks.addEventListener("change", (event) => {
  console.log(`'${event.type}' イベント発生`);
});

// `enabled` の値を変更すると `change` イベントを引き起こします
const toggleTrackButton = document.querySelector(".toggle-track");
toggleTrackButton.addEventListener("click", () => {
  const track = videoElement.audioTracks[0];
  track.enabled = !track.enabled;
});
```


`onchange` イベントハンドラープロパティを使用する場合:


```js
const videoElement = document.querySelector("video");
videoElement.audioTracks.onchange = (event) => {
  console.log(`'${event.type}' イベント発生`);
};

// `enabled` の値を変更すると `change` イベントを引き起こします
const toggleTrackButton = document.querySelector(".toggle-track");
toggleTrackButton.addEventListener("click", () => {
  const track = videoElement.audioTracks[0];
  track.enabled = !track.enabled;
});
```

仕様書
---

| Specification |
| --- |
| HTML Standard # event-media-change |
| HTML Standard # handler-tracklist-onchange |

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

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

関連情報
----

* 関連イベント: `addtrack`, `removetrack`
* `VideoTrackList` を対象としたこのイベント: `change`
* メディアキャプチャおよびストリーム API
* WebRTC API
MediaSession.setPositionState()
===============================

`MediaSession` の **`setPositionState()`** メソッドは、進行中のメディアに関する詳細を提供するあらゆる種類のインターフェイスにおいて、ユーザー端末で表示するために、現在の文書のメディア再生位置と速度を更新するために使用します。これは、コードでブラウザーが直接対応していない種類のメディアのプレーヤーを実装する場合に、特に有用です。

このメソッドを `navigator` オブジェクトの `mediaSession` オブジェクトで呼び出してください。

構文
--


```js
setPositionState()
setPositionState(stateDict)
```

### 引数

`stateDict` 省略可

文書の進行中のメディアの再生位置と再生速度に関する更新情報を提供するオブジェクトです。このオブジェクトが空の場合、既存の再生状態情報はクリアされます。このオブジェクトは、以下の引数を格納した辞書です。

`duration`

浮動小数点数の値で、現在のメディアの全体の再生時間を秒単位で示します。これは常に正の値であるべきであり、正の無限大 (`Infinity`) は、ライブストリームのような、終わりを定義しないメディアを示します。

`playbackRate`

浮動小数点数の値で、メディアの再生速度を、通常の再生速度との関連で示す値です。従って、1 の値は通常の速度で再生していることを示し、2 の値は倍速で再生していることを示し、以下同様となります。負の値は、メディアが逆再生されていることを示します。-1 は、通常の速度で逆再生されていることを示し、-2 は、倍速で逆再生されていることを示します、といった具合です。

`position`

浮動小数点数の値で、最後に報告されたメディアの再生位置を秒単位で示します。これは常に正の値でなければなりません。


### 返値

なし (`undefined`)。

### 例外

`TypeError`

このエラーは、さまざまな状況で発生する可能性があります。

* 指定したオブジェクトの `duration` が見つからないか、負の値、または `null` である。
* その `position` が見つからないか null であるか、または `duration` よりも大きいか負の値である。
* `playbackRate` がゼロである。

例
-

以下は、現在の `MediaSession` トラックの位置状態を更新する関数です。


```js
function updatePositionState() {
  navigator.mediaSession.setPositionState({
    duration: audioEl.duration,
    playbackRate: audioEl.playbackRate,
    position: audioEl.currentTime,
  });
}
```


この関数は、`メディアセッションメタデータ`を更新するときや、下記のようなアクションのコールバック内で使用することができます。


```js
navigator.mediaSession.setActionHandler("seekbackward", (details) => {
  // our time to skip
  const skipTime = details.seekOffset || 10;

  // set our position
  audioEl.currentTime = Math.max(audioEl.currentTime - skipTime, 0);
  updatePositionState();
});
```

仕様書
---

| Specification |
| --- |
| Media Session # dom-mediasession-setpositionstate |

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

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

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

`MediaSession` の **`setCameraActive()`** メソッドは、 ユーザーエージェントに対して、ユーザーのカメラがアクティブであると考えられるかどうかを示すために使用します。

このメソッドは `navigator` オブジェクトの `mediaSession` オブジェクトに対して呼び出してください。

なお、カメラの状態は `MediaSession` 自体では追跡されず、別個の追跡が必要です。

構文
--


```js
setCameraActive(active)
```

### 引数

`active`

カメラがアクティブとみなされるかどうかを示す論理値です。

### 返値

なし (`undefined`)。

例
-

下記は、現在の `MediaSession` のカメラアクティブ状態を更新し、`setActionHandler()` でカメラ状態を変更するリクエストを待ち受けする例です。


```js
let cameraActive = false;

navigator.mediaSession.setCameraActive(cameraActive);

navigator.mediaSession.setActionHandler("togglecamera", () => {
  cameraActive = !cameraActive;
  navigator.mediaSession.setCameraActive(cameraActive);
});
```

仕様書
---

| Specification |
| --- |
| Media Session # dom-mediasession-setcameraactive |

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

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

**`playbackState`** は `MediaSession` インターフェイスのプロパティで、現在のメディアセッションが再生中か一時停止中かを示します。

値
-

 文字列で、メディアセッションの現在の再生状態を示します。
 値は以下のいずれかです。

`none`

閲覧コンテキストが現在の再生状態を把握していない、または再生状態がこの時点で利用できない。

`paused`

ブラウザーのメディアセッションは現在、一時停止中である。再生は再開することができる。

`playing`

ブラウザーのメディアセッションは、現在メディアを再生中で、一時停止することができる。

例
-

次の例では、再生と一時停止のための 2 つの関数を設定し、関連するアクションハンドラーのコールバックとして使用しています。各関数は `playbackState` プロパティを利用して、音声が再生されているか一時停止されているかを示します。


```js
const actionHandlers = [
  // play
  [
    "play",
    async () => {
      // play our audio
      await audioEl.play();
      // set playback state
      navigator.mediaSession.playbackState = "playing";
      // update our status element
      updateStatus(allMeta[index], "Action: play | Track is playing…");
    },
  ],
  [
    "pause",
    () => {
      // pause out audio
      audioEl.pause();
      // set playback state
      navigator.mediaSession.playbackState = "paused";
      // update our status element
      updateStatus(allMeta[index], "Action: pause | Track has been paused…");
    },
  ],
];

for (const [action, handler] of actionHandlers) {
  try {
    navigator.mediaSession.setActionHandler(action, handler);
  } catch (error) {
    console.log(`The media session action "${action}" is not supported yet.`);
  }
}
```

仕様書
---

| Specification |
| --- |
| Media Session # dom-mediasession-playbackstate |

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

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

**`metadata`** は `MediaSession` インターフェイスのプロパティで、メタデータは `MediaMetadata` オブジェクトを含んでおり、再生中のメディアに関する記述的な情報を提供します。また、メタデータが設定されていない場合は `null` が入ります。このメタデータは、ブラウザーから端末に提供され、端末が提供する標準メディアコントロールユーザーインターフェイスで表示されます。

値
-

現在再生中のメディアに関する情報を格納した `MediaMetadata` のインスタンスです。

例
-

次の例では、互換性を調べ、関連するメタデータを持つ新しいメディアセッションを作成します。


```js
if ("mediaSession" in navigator) {
  navigator.mediaSession.metadata = new MediaMetadata({
    title: "Unforgettable",
    artist: "Nat King Cole",
    album: "The Ultimate Collection (Remastered)",
    artwork: [
      {
        src: "https://dummyimage.com/96x96",
        sizes: "96x96",
        type: "image/png",
      },
      {
        src: "https://dummyimage.com/128x128",
        sizes: "128x128",
        type: "image/png",
      },
      {
        src: "https://dummyimage.com/192x192",
        sizes: "192x192",
        type: "image/png",
      },
      {
        src: "https://dummyimage.com/256x256",
        sizes: "256x256",
        type: "image/png",
      },
      {
        src: "https://dummyimage.com/384x384",
        sizes: "384x384",
        type: "image/png",
      },
      {
        src: "https://dummyimage.com/512x512",
        sizes: "512x512",
        type: "image/png",
      },
    ],
  });
}
```

仕様書
---

| Specification |
| --- |
| Media Session # dom-mediasession-metadata |

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

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

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

`MediaSession` の **`setMicrophoneActive()`** メソッドは、ユーザーエージェントに対して、ユーザーのマイクが現在ミュートされていると見なされるかどうかを示すために使用します。

このメソッドは `navigator` オブジェクトの `mediaSession` オブジェクトに対して呼び出してください。

なお、マイクの状態は `MediaSession` 自体では追跡されず、別個の追跡が必要です。

構文
--


```js
setMicrophoneActive(active)
```

### 引数

`active`

マイクをミュートとみなすかどうかを示す論理値です。

### 返値

なし (`undefined`)。

例
-

下記の例は、現在の`MediaSession`のマイクミュート状態を更新し、`setActionHandler()`でミュート状態を変更するリクエストを待ち受けするものです。


```js
let microphoneActive = false;

navigator.mediaSession.setMicrophoneActive(microphoneActive);

navigator.mediaSession.setActionHandler("togglemicrophone", () => {
  microphoneActive = !microphoneActive;
  navigator.mediaSession.setMicrophoneActive(microphoneActive);
});
```

仕様書
---

| Specification |
| --- |
| Media Session # dom-mediasession-setmicrophoneactive |

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

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

**`style`** は `CSSFontFaceRule` インターフェイスの読み取り専用プロパティで、この `@font-face` アットルールからスタイル情報を返します。これは `CSSStyleDeclaration` オブジェクトの形です。

値
-

`CSSStyleDeclaration` です。

例
-

この例では、 `@font-face` ページに例として挙げられている CSS を使用しています。最初に返される `CSSRule` は `CSSFontFaceRule` となります。 `style` プロパティは `CSSStyleDeclaration` を返し、`fontFamily`, `fontWeight`, `src` プロパティにはルールの情報が現れます。


```css
@font-face {
  font-family: MyHelvetica;
  src: local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"),
    url(MgOpenModernaBold.ttf);
  font-weight: bold;
}
```



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

仕様書
---

| Specification |
| --- |
| CSS Fonts Module Level 4 # dom-cssfontfacerule-style |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
DragEvent: DragEvent() コンストラクター
===============================

このコンストラクターは、合成した `DragEvent` オブジェクトを作成するために使用します。

このインターフェイスにはコンストラクターがありますが、有用な `DataTransfer` オブジェクトは、ドラッグ＆ドロップの際にブラウザーが調整する処理とセキュリティモデルを持っているので、スクリプトから作成することはできません。

このインターフェイスは、 `MouseEvent` および `Event` のプロパティを継承しています。

構文
--


```js
new DragEvent(type)
new DragEvent(type, dragEventInit)
```

### 引数

`type`

イベント名を表す文字列です（DragEvent のイベントの種類を参照）。

`dragEventInit` 省略可

`DragEventInit` 辞書で、以下のフィールドがあります。

* `"dataTransfer"`: オプションで既定値は `"null"` です。型は `DataTransfer` です。

`DragEventInit` 辞書は MouseEventInit 辞書から継承しています。

仕様書
---

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

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

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

**`DragEvent.dataTransfer`** プロパティは、ドラッグ操作のデータを（`DataTransfer` オブジェクトとして）保持します。

このプロパティは 読取専用  です。

値
-

`DataTransfer` オブジェクトで、ドラッグイベントのデータが入ります。

例
-

この例では、 `dragend` イベントハンドラーの中でドラッグ＆ドロップデータへアクセスする方法を説明します。


```js
function processData(d) {
  // データを処理...
}

dragTarget.addEventListener(
  "dragend",
  (ev) => {
    // ドラッグ＆ドロップのデータ処理を呼び出す
    if (ev.dataTransfer !== null) processData(ev.dataTransfer);
  },
  false,
);
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-dragevent-datatransfer-dev |

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

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

**`HTMLLabelElement.form`** は読み取り専用のプロパティで、このラベルに関連付けられたコントロールが所属するフォームを表す `HTMLFormElement` オブジェクトを返します。関連付けられたコントロールがないか、そのコントロールがフォーム内にない場合は null を返します。

このプロパティは `HTMLLabelElement.control.form` のショートカットです。

値
-

`HTMLFormElement` で、このラベルの `control` が関連付けられたフォームを表します。もし `control` が `null` （すなわちラベルがコントロールと関連付けられていない）であるか、コントロールがフォームの一部でない場合、このプロパティは `null` を返します。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-label-form-dev |

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

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

関連情報
----

* `HTMLLabelElement`
* `HTMLElement`
* `<label>`
* HTML フォームガイド
HTMLLabelElement: control プロパティ
===============================

**`HTMLLabelElement.control`** は読み取り専用プロパティで、この `<label>` 要素に関連付けられているコントロールへの参照（`HTMLElement` 型のオブジェクトまたはその派生物のうちの 1 つ）を返します。ラベルがコントロールと関連付けられていない場合は `null` を返します。

値
-

`HTMLElement` の派生オブジェクトで、この `<label>` が関連付けられているコントロールを表します。ラベルが孤立している場合は `null` になります。

**メモ:** このプロパティに値があり、 `HTMLLabelElement.htmlFor` に値がある場合、 `HTMLLabelElement.htmlFor` プロパティは必ず同じコントロールを参照します。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-label-control-dev |

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

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

関連情報
----

* `HTMLLabelElement`
* `HTMLElement`
* `<label>`
* HTML フォームガイド
HTMLLabelElement: htmlFor プロパティ
===============================

**`HTMLLabelElement.htmlFor`** プロパティは `for` コンテンツプロパティの値を反映します。つまり、このスクリプトでアクセス可能なプロパティは、ラベルに関連付けられたコントロール要素の ID である `for` コンテンツプロパティの値を設定したり読み取ったりするために使用されます。

値
-

文字列で、このコントロールに関連する要素の ID 文字列が入ります。

**メモ:** このプロパティに値がある場合 `HTMLLabelElement.control` プロパティも同じコントロールになります。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-label-htmlfor |

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

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

関連情報
----

* `HTMLLabelElement`
* `HTMLLabelElement.control`
* `HTMLElement`
* `<label>`
* HTML フォームガイド
AbstractRange: collapsed プロパティ
==============================

**`collapsed`** は `AbstractRange` インターフェイスの読み取り専用プロパティで、範囲の開始位置と終了位置が同じであれば `true` を返します。

値
-

論理値で、範囲が折りたたまれている場合に `true` となります。折りたたまれた範囲とは、開始位置と終了位置が同じで、 0 文字の長さの範囲です。

例
-


```js
let isCollapsed = range.collapsed;
```

仕様書
---

| Specification |
| --- |
| DOM Standard # ref-for-dom-range-collapsed① |

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

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

**`startContainer`** は `AbstractRange` インターフェイスの読み取り専用プロパティで、範囲の先頭の `Node` を返します。

値
-

範囲の開始位置が内部にある `Node` です。

例
-


```js
let startNode = range.startContainer;
```

仕様書
---

| Specification |
| --- |
| DOM Standard # ref-for-dom-range-startcontainer① |

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

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

**`startOffset`** は `AbstractRange` インターフェイスの読み取り専用プロパティで、開始ノードにおける範囲の開始位置のオフセットを返します。

値
-

範囲の最初の文字が位置を `startContainer` が示す `Node` 内の文字数で示す整数値です。

例
-


```js
let startOffset = range.startOffset;
```

仕様書
---

| Specification |
| --- |
| DOM Standard # ref-for-dom-range-startoffset① |

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

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

**`endOffset`** は `AbstractRange` インターフェイスの読み取り専用プロパティで、範囲の終了位置の最後のノードの中のオフセットを返します。

値
-

範囲の最後の文字が位置する `endContainer` が示す `Node` 内の文字数を示す整数値です。

例
-


```js
let endOffset = range.endOffset;
```

仕様書
---

| Specification |
| --- |
| DOM Standard # ref-for-dom-range-endoffset① |

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

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

**`endContainer`** は `AbstractRange` インターフェイスの読み取り専用プロパティで、範囲の末尾がある `Node` を返します。

値
-

範囲の最後の文字を含む `Node` です。

例
-


```js
let endNode = range.endContainer;
```

仕様書
---

| Specification |
| --- |
| DOM Standard # ref-for-dom-range-endcontainer① |

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

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

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

**`renderTime`** は `PerformanceElementTiming` インターフェイスの読み取り専用プロパティで、関連付けられた要素の描画時刻を返します。

値
-

その要素の描画時間を表す `DOMHighResTimeStamp` です。

画像の場合、これは**画像の描画タイムスタンプ**になります。これは画像が完全に読み込まれた後に発生する次のペイントとして定義されます。Timing-allow-origin ヘッダーによって定義されています。タイミング許可チェックが失敗した場合、これは `0` を返します。

テキストノードの場合、これは **テキスト描画タイムスタンプ** になります。これは、要素にテキストが描画されるようになったタイミングを定義します。

例
-

### `renderTime` のログ出力

この例では、`elementtiming` 属性を追加して `<image>` 要素を監視しています。 `PerformanceObserver` は `"element"` 型のパフォーマンス項目をすべて取得するために登録され、オブザーバー作成前のデータにアクセスするために `buffered` フラグを用います。 `entry.renderTime` を呼び出すと、画像要素のレンダリング時刻を返します。


```html
<img
 src="image.jpg"
 alt="a nice image"
 elementtiming="big-image"
 id="myImage" />
```



```js
const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    if (entry.identifier === "big-image") {
      console.log(entry.renderTime);
    }
  });
});
observer.observe({ type: "element", buffered: true });
```

### オリジンを跨いだ画像の描画時刻

セキュリティ上の理由から、リソースがオリジン間リクエストである場合、 `renderTime` プロパティの値は `0` です。オリジン間のレンダリング時刻情報を公開するには、`Timing-Allow-Origin` HTTP レスポンスヘッダーを設定する必要があります。HTTP レスポンスヘッダーを設定する必要があります。

例えば、`https://developer.mozilla.org` で `renderTime` が見られるようにするには、オリジン間リソースは次のように送信します。


```http
Timing-Allow-Origin: https://developer.mozilla.org
```


別の方法として、 `startTime` を使用することもできます。この場合、項目の `renderTime` の値が `0` でなければその値を返し、そうでなければこの項目の `loadTime` の値を返します。ただし、指標をより正確なものにするために、 `Timing-Allow-Origin` ヘッダーを設定することをお勧めします。

`startTime` を使用した場合、`renderTime` が使用されたかどうかを調べることで、不正確さにフラグを立てることができます。


```js
const isRenderTime = entry.renderTime ? true : false;
```

仕様書
---

| Specification |
| --- |
| Element Timing API # ref-for-dom-performanceelementtiming-rendertime① |

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

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

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

**`loadTime`** は `PerformanceElementTiming` インターフェイスの読み取り専用プロパティで、テキストに対しては常に `0` を返します。画像については画像リソースが読み込まれてから要素に装着されるまでの時間を返します。

値
-

`DOMHighResTimeStamp` で、この要素の `loadTime` です。テキストに対しては `0` です。

例
-

### `loadTime` をログ出力

この例では `<img>` 要素に `elementtiming` 属性を追加して監視しています。 `PerformanceObserver` は `"element"` 型のパフォーマンス項目をすべて取得するために登録されます。オブザーバーが作成される前のデータにアクセスするには `buffered` フラグを使用します。 `entry.loadTime` を呼び出すと、画像要素の読み込み時間を返します。


```html
<img
 src="image.jpg"
 alt="a nice image"
 elementtiming="big-image"
 id="myImage" />
```



```js
const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    if (entry.identifier === "big-image") {
      console.log(entry.loadTime);
    }
  });
});
observer.observe({ type: "element", buffered: true });
```

仕様書
---

| Specification |
| --- |
| Element Timing API # ref-for-dom-performanceelementtiming-loadtime① |

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

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

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

**`toJSON()`** は `PerformanceElementTiming` インターフェイスのメソッドで、シリアライザーです。 `PerformanceElementTiming` オブジェクトの JSON 表現を返します。

構文
--


```js
toJSON()
```

### 引数

なし。

### 返値

`JSON` オブジェクトです。これは、 `PerformanceElementTiming` オブジェクトをシリアライズしたものです。

JSON には `element` プロパティが格納されませんが、これが `Element` 型の一種であり、`toJSON()` 操作を提供していないからです。しかし、要素の `id` は提供されます。

例
-

### toJSON メソッドの使用

この例では、`entry.toJSON()` を呼び出すと、画像要素の情報を含む `PerformanceElementTiming` オブジェクトの JSON 表現が返されます。


```html
<img
 src="image.jpg"
 alt="a nice image"
 elementtiming="big-image"
 id="myImage" />
```



```js
const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    if (entry.identifier === "big-image") {
      console.log(entry.toJSON());
    }
  });
});
observer.observe({ type: "element", buffered: true });
```


This would log a JSON object like so:


```json
{
  "name": "image-paint",
  "entryType": "element",
  "startTime": 670894.1000000238,
  "duration": 0,
  "renderTime": 0,
  "loadTime": 670894.1000000238,
  "intersectionRect": {
    "x": 299,
    "y": 76,
    "width": 135,
    "height": 155,
    "top": 76,
    "right": 434,
    "bottom": 231,
    "left": 299
  },
  "identifier": "big-image",
  "naturalWidth": 135,
  "naturalHeight": 155,
  "id": "myImage",
  "url": "https://en.wikipedia.org/static/images/project-logos/enwiki.png"
}
```


JSON 文字列を取得するには、 `JSON.stringify(entry)` を直接使用することができます。これが `toJSON()` を自動的に呼び出します。

仕様書
---

| Specification |
| --- |
| Element Timing API # dom-performanceelementtiming-tojson |

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

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

関連情報
----

* `JSON`
PerformanceElementTiming: intersectionRect プロパティ
================================================

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

**`intersectionRect`** は `PerformanceElementTiming` インターフェイスの読み取り専用プロパティで、ビューポート内の要素の矩形を返します。

値
-

`DOMRectReadOnly` で、ビューポートにおけるこの要素の矩形を表します。

表示画像の場合、これはビューポート内の画像の表示矩形です。テキストの場合、これはビューポート内のノードの表示矩形です。これは、要素に属するすべてのテキストノードを結合したものを格納する最小の長方形です。

例
-

### `intersectionRect` の出力

この例では、 `elementtiming` 属性を追加して `<img>` 要素を監視しています。 `PerformanceObserver` は `"element"` 型のパフォーマンス項目をすべて取得するために登録され、オブザーバー作成前のデータにアクセスするために `buffered` フラグを用います。 `entry.intersectionRect` を呼び出すと、画像の表示矩形を持つ `DOMRectReadOnly` オブジェクトが返されます。


```html
<img
 src="image.jpg"
 alt="a nice image"
 elementtiming="big-image"
 id="myImage" />
```



```js
const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    if (entry.identifier === "big-image") {
      console.log(entry.intersectionRect);
    }
  });
});
observer.observe({ type: "element", buffered: true });
```

仕様書
---

| Specification |
| --- |
| Element Timing API # ref-for-dom-performanceelementtiming-intersectionrect |

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

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

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

**`identifier`** は `PerformanceElementTiming` インターフェイスの読み取り専用のプロパティで、その要素の `elementtiming` 属性の値を返します。

値
-

文字列です。

例
-

### `identifier` の使用

この例では、`elementtiming` 属性を追加して `<img>` 要素を監視しています。 `PerformanceObserver` は `"要素"` 型のパフォーマンス項目をすべて取得するために登録され、オブザーバー作成前のデータにアクセスするために `buffered` フラグを用います。`elementtiming` の値は `big-image` です。したがって `entry.identifier` を呼び出すと文字列 `big-image` を返します。


```html
<img
 src="image.jpg"
 alt="a nice image"
 elementtiming="big-image"
 id="myImage" />
```



```js
const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    if (entry.identifier === "big-image") {
      console.log(entry.naturalWidth);
    }
  });
});
observer.observe({ type: "element", buffered: true });
```

仕様書
---

| Specification |
| --- |
| Element Timing API # ref-for-dom-performanceelementtiming-identifier |

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

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

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

**`naturalHeight`** は `PerformanceElementTiming` インターフェイスの読み取り専用プロパティで、画像要素の内在的な高さを返します。

値
-

符号なし 32 ビット整数 (unsigned long) です。 これが画像に適用されている場合は画像の内在的な高さを表し、テキストの場合は `0` となります。

例
-

### `naturalHeight` のログ出力

この例では、`elementtiming` 属性を追加して `<image>` 要素を監視しています。 `PerformanceObserver` は `"element"` 型のパフォーマンス項目をすべて取得するために登録され、オブザーバー作成前のデータにアクセスするために `buffered` フラグを使用しています。画像ファイルの幅は 1000px、高さは 750px あります。 `entry.naturalHeight` を呼び出すと、ピクセル単位の内在的な高さである `750` を返します。


```html
<img
 src="image.jpg"
 alt="a nice image"
 elementtiming="big-image"
 id="myImage" />
```



```js
const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    if (entry.identifier === "big-image") {
      console.log(entry.naturalHeight);
    }
  });
});
observer.observe({ type: "element", buffered: true });
```

仕様書
---

| Specification |
| --- |
| Element Timing API # ref-for-dom-performanceelementtiming-naturalheight |

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

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