files/fr/web/api/performanceelementtiming/id/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

---
title: PerformanceElementTiming.id
slug: Web/API/PerformanceElementTiming/id
tags:
  - API
  - Property
  - Propriété
  - Reference
  - id
  - PerformanceElementTiming
translation_of: Web/API/PerformanceElementTiming/id
---
<div>{{SeeCompatTable}}{{Non-Standard_Header}}{{APIRef("Element Timing API")}}</div>

<p>La propriété en lecture seule <strong><code>id</code></strong> de l'interface <a href="/fr/docs/Web/API/PerformanceElementTiming"><code>PerformanceElementTiming</code></a> renvoie l'<a href="/fr/docs/Web/HTML/Global_attributes#attr-id"><code>id</code></a> de l'élément associé.</p>

<h2 id="Syntax">Syntaxe</h2>

<pre class="brush:js">var <var>id</var> = <var>PerformanceElementTiming</var>.id;</pre>

<h3>Valeur</h3>
<p>Une chaîne de caractères <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a>.</p>

<h2 id="Examples">Exemples</h2>

<p>Dans cet exemple, l'appel à <code>entry.id</code> entraînera l'affichage dans la console du code <code>myImage</code>, qui est l'<a href="/fr/docs/Web/HTML/Global_attributes#attr-id"><code>id</code></a> de l'élément image.</p>

<pre class="brush:html">&lt;img src="image.jpg" alt="une belle image" elementtiming="big-image" id="myImage"&gt;</pre>

<pre class="brush:js">const observer = new PerformanceObserver((list) => {
let entries = list.getEntries().forEach(function (entry) {
    if (entry.identifier === "big-image") {
      console.log(entry.id);
    }
  });
});
observer.observe({ entryTypes: ["element"] });</pre>

<div class="note">
  <p><strong>Note :</strong> Cet exemple utilise l'interface <a href="/fr/docs/Web/API/PerformanceObserver"><code>PerformanceObserver</code></a> pour créer une liste d'événements de mesure des performances. Dans notre cas, nous observons l'élément <a href="/fr/docs/Web/API/PerformanceEntry/entryType"><code>entryType</code></a> <code>element</code> afin d'utiliser l'interface <code>PerformanceElementTiming</code>.</p>
</div>

<h2 id="Specifications">Spécifications</h2>

<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">Spécification</th>
      <th scope="col">Statut</th>
      <th scope="col">Commentaire</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>{{SpecName('Element Timing API','#dom-performanceelementtiming-id','PerformanceElementTiming.id')}}</td>
      <td>{{Spec2('Element Timing API')}}</td>
      <td>Définition initiale.</td>
    </tr>
  </tbody>
</table>

<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>

<p>{{Compat("api.PerformanceElementTiming.id")}}</p>