From 05b2650717b84d199f6ebd5df8a8f9d1e3b23f3f Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Tue, 23 Feb 2021 15:56:25 +0100 Subject: sync: move --- .../web/api/element/nextelementsibling/index.html | 113 +++++++++++++++ .../api/element/previouselementsibling/index.html | 160 +++++++++++++++++++++ 2 files changed, 273 insertions(+) create mode 100644 files/es/web/api/element/nextelementsibling/index.html create mode 100644 files/es/web/api/element/previouselementsibling/index.html (limited to 'files/es/web/api/element') diff --git a/files/es/web/api/element/nextelementsibling/index.html b/files/es/web/api/element/nextelementsibling/index.html new file mode 100644 index 0000000000..68395bc2b3 --- /dev/null +++ b/files/es/web/api/element/nextelementsibling/index.html @@ -0,0 +1,113 @@ +--- +title: NonDocumentTypeChildNode.nextElementSibling +slug: Web/API/NonDocumentTypeChildNode/nextElementSibling +tags: + - API + - DOM + - NonDocumentTypeChildNode + - Propiedad +translation_of: Web/API/NonDocumentTypeChildNode/nextElementSibling +--- +
{{APIRef("DOM")}}
+ +

La propiedad de sólo lectura NonDocumentTypeChildNode.nextElementSibling devuelve el elemento inmediatamente posterior al especificado, dentro de la lista de elementos hijos de su padre, o bien null si el elemento especificado es el último en dicha lista.

+ +

Sintaxis

+ +
var nextNode = elementNodeReference.nextElementSibling;
+ +

Ejemplo

+ +
<div id="div-01">Here is div-01</div>
+<div id="div-02">Here is div-02</div>
+
+<script type="text/javascript">
+  var el = document.getElementById('div-01').nextElementSibling;
+  console.log('Siblings of div-01:');
+  while (el) {
+    console.log(el.nodeName);
+    el = el.nextElementSibling;
+  }
+</script>
+
+ +

Este ejemplo muestra en la consola lo siguiente cuando se carga:

+ +
Siblings of div-01:
+DIV
+SCRIPT
+ +

Polyfill para Internet Explorer 8

+ +

Esta propiedad no está soportada con anterioridad a IE9, así que el siguiente fragmento de código puede utilizarse para añadir el soporte a IE8:

+ +
// Source: https://github.com/Alhadis/Snippets/blob/master/js/polyfills/IE8-child-elements.js
+if(!("nextElementSibling" in document.documentElement)){
+    Object.defineProperty(Element.prototype, "nextElementSibling", {
+        get: function(){
+            var e = this.nextSibling;
+            while(e && 1 !== e.nodeType)
+                e = e.nextSibling;
+            return e;
+        }
+    });
+}
+ +

Polyfill para Internet Explorer 9+ y Safari

+ +
// Source: https://github.com/jserz/js_piece/blob/master/DOM/NonDocumentTypeChildNode/nextElementSibling/nextElementSibling.md
+(function (arr) {
+  arr.forEach(function (item) {
+    if (item.hasOwnProperty('nextElementSibling')) {
+      return;
+    }
+    Object.defineProperty(item, 'nextElementSibling', {
+      configurable: true,
+      enumerable: true,
+      get: function () {
+        var el = this;
+        while (el = el.nextSibling) {
+          if (el.nodeType === 1) {
+              return el;
+          }
+        }
+        return null;
+      },
+      set: undefined
+    });
+  });
+})([Element.prototype, CharacterData.prototype]);
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoObservaciones
{{SpecName('DOM WHATWG', '#dom-nondocumenttypechildnode-nextelementsibling', 'ChildNodenextElementSibling')}}{{Spec2('DOM WHATWG')}}Se dividió la interfaz ElementTraversal en {{domxref("ChildNode")}}, {{domxref("ParentNode")}}, y {{domxref("NonDocumentTypeChildNode")}}. Este método queda ahora definido en la primera.
+ Los interfaces {{domxref("Element")}} y {{domxref("CharacterData")}} implementaron la nueva interfaz.
{{SpecName('Element Traversal', '#attribute-nextElementSibling', 'ElementTraversal.nextElementSibling')}}{{Spec2('Element Traversal')}}Añadió su definición inicial a la interfaz pura ElementTraversal y su uso en {{domxref("Element")}}.
+ +

Compatibilidad con navegadores

+ +

{{Compat("api.NonDocumentTypeChildNode.nextElementSibling")}}

+ +

Ver también

+ + diff --git a/files/es/web/api/element/previouselementsibling/index.html b/files/es/web/api/element/previouselementsibling/index.html new file mode 100644 index 0000000000..13867e8fe4 --- /dev/null +++ b/files/es/web/api/element/previouselementsibling/index.html @@ -0,0 +1,160 @@ +--- +title: NonDocumentTypeChildNode.previousElementSibling +slug: Web/API/NonDocumentTypeChildNode/previousElementSibling +translation_of: Web/API/NonDocumentTypeChildNode/previousElementSibling +--- +
+
{{APIRef("DOM")}}
+
+ +

La propiedad de sólo lectura NonDocumentTypeChildNode.previousElementSibling retorna el {{domxref("Element")}} predecesor inmediato al especificado dentro de la lista de hijos de su padre, o bien null si el elemento especificado es el primero de dicha lista.

+ +

Sintaxis

+ +
prevNode = elementNodeReference.previousElementSibling;
+
+ +

Ejemplo

+ +
<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>
+
+ +

Este ejemplo muestra lo siguiente en la página cuando carga:

+ +
Hermanos de div-03
+
+   1. LI
+   2. LI
+   3. DIV
+   4. DIV
+
+ +

Polyfill para Internet Explorer 8

+ +

Esta propiedad no está soportada con anterioridad a IE9, así que puede utilizarse el siguiente fragmento para añadri el soporte a IE8:

+ +
// 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;
+        }
+    });
+}
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoObservaciones
{{SpecName('DOM WHATWG', '#dom-nondocumenttypechildnode-previouselementsibling', 'NonDocumentTypeChildNode.previousElementSibling')}}{{Spec2('DOM WHATWG')}}Dividió el interfaz ElementTraversal en {{domxref("ChildNode")}}, {{domxref("ParentNode")}}, y {{domxref("NonDocumentTypeChildNode")}}. Este método queda ahora definida en el primero.
+ Los interfaces {{domxref("Element")}} y {{domxref("CharacterData")}} implementaron la nueva interfaz.
{{SpecName('Element Traversal', '#attribute-previousElementSibling', 'ElementTraversal.previousElementSibling')}}{{Spec2('Element Traversal')}}Añadida su definición inicial al interfaz puro ElementTraversal y lo usa en {{domxref("Element")}}.
+ +

Compatibilidad con navegadores

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
PrestaciónChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico (en {{domxref("Element")}})4{{CompatGeckoDesktop("1.9.1")}}99.84
Soporte en {{domxref("CharacterData")}}29.0{{CompatGeckoDesktop("25")}} [1]{{CompatNo}}16.0{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
PrestaciónAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico (en {{domxref("Element")}}){{CompatVersionUnknown}}{{CompatGeckoMobile("1.9.1")}}{{CompatVersionUnknown}}9.8{{CompatVersionUnknown}}
Soporte en {{domxref("CharacterData")}}{{CompatVersionUnknown}}{{CompatGeckoMobile("25")}}{{CompatNo}}16.0{{CompatNo}}
+
+ +

[1] Firefox 25 también añadía esta propiedad a {{domxref("DocumentType")}}, y fue eliminada en Firefox 28 debido a problemas de compatibildad.

+ +

Ver también

+ + -- cgit v1.2.3-54-g00ecf