files/fr/web/api/parentnode/lastelementchild/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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161

---
title: ParentNode.lastElementChild
slug: Web/API/ParentNode/lastElementChild
tags:
  - API
  - DOM
  - Noeuds
  - Propriétés
  - parent
translation_of: Web/API/ParentNode/lastElementChild
---
<p>{{ APIRef("DOM") }}</p>

<p>La propriété en lecture seule <code><strong>ParentNode.lastElementChild</strong></code>  renvoie  le dernier enfant de l'objet {{domxref("Element")}} ou <code>null</code> s'il n'y a pas d'élément enfant.</p>

<div class="note">
<p>Cette propriiété a été définie initialement dans la pure interface {{domxref("ElementTraversal")}}. Comme cette interface contenait deux différents jeux de propriétés, l'un visant les  {{domxref("Node")}} (<em>noeuds</em>) qui ont des enfants, l'autre les enfants, ils ont été déplacés dans deux interfaces pures, {{domxref("ParentNode")}} et {{domxref("ChildNode")}}. Dans ce cas, <code>childElementCount</code> a été rattaché à {{domxref("ParentNode")}}. C'est un changement assez technique qui ne devrait pas affecter la compatibilité.</p>
</div>

<h2 id="Syntax_and_values" name="Syntax_and_values">Syntaxe</h2>

<pre class="syntaxbox">var <em>element</em> = node.lastElementChild; </pre>

<h2 id="Example" name="Example">Exemple</h2>

<pre class="brush: html">&lt;ul id="foo"&gt;
  &lt;li&gt;First  (1)&lt;/li&gt;
  &lt;li&gt;Second (2)&lt;/li&gt;
  &lt;li&gt;Third  (3)&lt;/li&gt;
&lt;/ul&gt;

&lt;script&gt;
var foo = document.getElementById('foo');
// produit : Third  (3)
console.log(foo.lastElementChild.textContent);
&lt;/script&gt;
</pre>

<h2 id="Polyfill_for_IE8_IE9_and_Safari">Polyfill for IE8, IE9 and Safari</h2>

<pre class="brush: js">// Remplace le prototype "lastElementChild" natif.
// Ajout de Document &amp; DocumentFragment pris en charge pour IE9 &amp; Safari.
// Renvoie un tableau (array) à la place de HTMLCollection.
;(function(constructor) {
    if (constructor &amp;&amp;
        constructor.prototype &amp;&amp;
        constructor.prototype.lastElementChild == null) {
        Object.defineProperty(constructor.prototype, 'lastElementChild', {
            get: function() {
                var node, nodes = this.childNodes, i = nodes.length - 1;
                while (node = nodes[i--]) {
                    if (node.nodeType === 1) {
                        return node;
                    }
                }
                return null;
            }
        });
    }
})(window.Node || window.Element);
</pre>

<h2 id="Spécification">Spécification</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Spécification</th>
   <th scope="col">Statut</th>
   <th scope="col">Commentaire</th>
  </tr>
  <tr>
   <td>{{SpecName('DOM WHATWG', '#dom-parentnode-lastelementchild', 'ParentNode.lastElementChild')}}</td>
   <td>{{Spec2('DOM WHATWG')}}</td>
   <td>Divise l'interface <code>ElementTraversal</code> en {{domxref("ChildNode")}} et <code>ParentNode</code>. La propriété est maintenant définie sur cette dernière.<br>
    Les {{domxref("Document")}} et {{domxref("DocumentFragment")}} implémentent la nouvelle interface.</td>
  </tr>
  <tr>
   <td>{{SpecName('Element Traversal', '#attribute-lastElementChild', 'ElementTraversal.lastElementChild')}}</td>
   <td>{{Spec2('Element Traversal')}}</td>
   <td>Ajout de sa définition initiale à la pure interface <code>ElementTraversal</code> et de son utilisation sur {{domxref("Element")}}.</td>
  </tr>
 </tbody>
</table>

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

<p>{{ CompatibilityTable() }}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Fonctionnalité</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Basic support (on {{domxref("Element")}})</td>
   <td>1.0</td>
   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
   <td>9.0</td>
   <td>10.0</td>
   <td>4.0</td>
  </tr>
  <tr>
   <td>Support on {{domxref("Document")}} and {{domxref("DocumentFragment")}} {{experimental_inline}}</td>
   <td>29.0</td>
   <td>{{CompatGeckoDesktop("25.0")}}</td>
   <td>{{CompatNo}}</td>
   <td>16.0</td>
   <td>{{CompatNo}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Fonctionnalité</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support (on {{domxref("Element")}})</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{CompatGeckoMobile("1.9.1")}}</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
  </tr>
  <tr>
   <td>Support on {{domxref("Document")}} and {{domxref("DocumentFragment")}} {{experimental_inline}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoMobile("25.0")}}</td>
   <td>{{CompatNo}}</td>
   <td>16.0</td>
   <td>{{CompatNo}}</td>
  </tr>
 </tbody>
</table>
</div>

<p> </p>

<h2 id="Voir_aussi">Voir aussi</h2>

<ul>
 <li>Les interfaces pures {{domxref("ParentNode")}} et {{domxref("ChildNode")}}.</li>
 <li>
  <div class="syntaxbox">Types d'objets implémentant cette interface pure : {{domxref("Document")}}, {{domxref("Element")}} et {{domxref("DocumentFragment")}}.</div>
 </li>
</ul>