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: NonDocumentTypeChildNode.previousElementSibling
slug: Web/API/Element/previousElementSibling
translation_of: Web/API/NonDocumentTypeChildNode/previousElementSibling
original_slug: Web/API/NonDocumentTypeChildNode/previousElementSibling
---
<div>
<div>{{APIRef("DOM")}}</div>
</div>
<p>La propiedad de sólo lectura <code><strong>NonDocumentTypeChildNode.previousElementSibling</strong></code> retorna el {{domxref("Element")}} predecesor inmediato al especificado dentro de la lista de hijos de su padre, o bien <code>null</code> si el elemento especificado es el primero de dicha lista.</p>
<h2 id="Syntax" name="Syntax">Sintaxis</h2>
<pre class="syntaxbox"><var>prevNode</var> = elementNodeReference.previousElementSibling;
</pre>
<h2 id="Example" name="Example">Ejemplo</h2>
<pre class="brush: html"><div id="div-01">Aquí está div-01</div>
<div id="div-02">Aquí está div-02</div>
<li>Esto es un elemento de lista</li>
<li>Esto es otro elemento de lista</li>
<div id="div-03">Aquí esta div-03</div>
<script>
var el = document.getElementById('div-03').previousElementSibling;
document.write('<p>Hermanos de div-03</p><ol>');
while (el) {
document.write('<li>' + el.nodeName + '</li>');
el = el.previousElementSibling;
}
document.write('</ol>');
</script>
</pre>
<p>Este ejemplo muestra lo siguiente en la página cuando carga:</p>
<pre>Hermanos de div-03
1. LI
2. LI
3. DIV
4. DIV
</pre>
<h2 id="Polyfill_para_Internet_Explorer_8">Polyfill para Internet Explorer 8</h2>
<p>Esta propiedad no está soportada con anterioridad a IE9, así que puede utilizarse el siguiente fragmento para añadri el soporte a IE8:</p>
<pre class="brush: js">// Source: https://github.com/Alhadis/Snippets/blob/master/js/polyfills/IE8-child-elements.js
if(!("previousElementSibling" in document.documentElement)){
Object.defineProperty(Element.prototype, "previousElementSibling", {
get: function(){
var e = this.previousSibling;
while(e && 1 !== e.nodeType)
e = e.previousSibling;
return e;
}
});
}</pre>
<h2 id="Specification" name="Specification">Especificaciones</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Especificación</th>
<th scope="col">Estado</th>
<th scope="col">Observaciones</th>
</tr>
<tr>
<td>{{SpecName('DOM WHATWG', '#dom-nondocumenttypechildnode-previouselementsibling', 'NonDocumentTypeChildNode.previousElementSibling')}}</td>
<td>{{Spec2('DOM WHATWG')}}</td>
<td>Dividió el interfaz <code>ElementTraversal</code> en {{domxref("ChildNode")}}, {{domxref("ParentNode")}}, y {{domxref("NonDocumentTypeChildNode")}}. Este método queda ahora definida en el primero.<br>
Los interfaces {{domxref("Element")}} y {{domxref("CharacterData")}} implementaron la nueva interfaz.</td>
</tr>
<tr>
<td>{{SpecName('Element Traversal', '#attribute-previousElementSibling', 'ElementTraversal.previousElementSibling')}}</td>
<td>{{Spec2('Element Traversal')}}</td>
<td>Añadida su definición inicial al interfaz puro <code>ElementTraversal</code> y lo usa en {{domxref("Element")}}.</td>
</tr>
</tbody>
</table>
<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
<div>{{CompatibilityTable}}</div>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Prestación</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>Soporte básico (en {{domxref("Element")}})</td>
<td>4</td>
<td>{{CompatGeckoDesktop("1.9.1")}}</td>
<td>9</td>
<td>9.8</td>
<td>4</td>
</tr>
<tr>
<td>Soporte en {{domxref("CharacterData")}}</td>
<td>29.0</td>
<td>{{CompatGeckoDesktop("25")}} [1]</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>Prestación</th>
<th>Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Soporte básico (en {{domxref("Element")}})</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatGeckoMobile("1.9.1")}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>9.8</td>
<td>{{CompatVersionUnknown}}</td>
</tr>
<tr>
<td>Soporte en {{domxref("CharacterData")}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatGeckoMobile("25")}}</td>
<td>{{CompatNo}}</td>
<td>16.0</td>
<td>{{CompatNo}}</td>
</tr>
</tbody>
</table>
</div>
<p>[1] Firefox 25 también añadía esta propiedad a {{domxref("DocumentType")}}, y fue eliminada en Firefox 28 debido a problemas de compatibildad.</p>
<h2 id="Ver_también">Ver también</h2>
<ul>
<li>El interfaz puro {{domxref("NonDocumentTypeChildNode")}}.</li>
<li>
<div class="syntaxbox">Tipos de objetos que implementan este interfaz puro: {{domxref("CharacterData")}}, y {{domxref("Element")}}.</div>
</li>
</ul>
|
