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ón Estado Observaciones
DOM
La definición de 'ChildNodenextElementSibling' en esta especificación.
Living Standard Se dividió la interfaz ElementTraversal en ChildNode, ParentNode, y NonDocumentTypeChildNode. Este método queda ahora definido en la primera.
Los interfaces Element y CharacterData implementaron la nueva interfaz.
Element Traversal Specification
La definición de 'ElementTraversal.nextElementSibling' en esta especificación.
Obsolete Añadió su definición inicial a la interfaz pura ElementTraversal y su uso en Element.

Compatibilidad con navegadores

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome para AndroidEdge MobileFirefox para AndroidOpera para AndroidSafari en iOSSamsung Internet
nextElementSiblingChrome Soporte completo 4Edge Soporte completo SiFirefox Soporte completo 3.5IE Soporte parcial 9
Notas
Soporte parcial 9
Notas
Notas Only implemented for Element, not for CharacterData. See polyfill.
Opera Soporte completo 10Safari Soporte completo 4WebView Android Soporte completo SiChrome Android Soporte completo SiEdge Mobile Soporte completo SiFirefox Android Soporte completo 4Opera Android Soporte completo 10.1Safari iOS Soporte completo SiSamsung Internet Android ?

Leyenda

Soporte completo  
Soporte completo
Soporte parcial  
Soporte parcial
Compatibilidad desconocida  
Compatibilidad desconocida
Ver notas de implementación.
Ver notas de implementación.

Ver también

Etiquetas y colaboradores del documento

Colaboradores en esta página: mdnwebdocs-bot, AlePerez92, Grijander81
Última actualización por: mdnwebdocs-bot,