La propiedad nextElementSibling se utiliza para devolver el siguiente elemento inmediato del elemento especificado, en el mismo nivel de árbol o nulo si el elemento especificado es el último de la lista. Es una propiedad de sólo lectura.
Se diferencia de la propiedad nextSibling en que nextSibling devuelve el siguiente Node hermano como un Node de elemento, un Node de texto o un Node de comentario, mientras que nextElementSibling devuelve el siguiente Node hermano como un Node de elemento (es decir, ignora los Nodes de texto y comentario).
Sintaxis:
node.nextElementSibling
Valor de retorno: esta propiedad devuelve el siguiente hermano del elemento especificado o nulo si el elemento actual no tiene ningún hermano siguiente.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>
DOM nextSibling Property
</title>
</head>
<body style="text-align: center">
<h2 style="color:green;">
DOM nextElementSibling Property
</h2>
<h4 id="h42">Web Languages:</h4>
<select size="4">
<option>HTML</option>
<option id="Select">CSS</option>
<option>JAVA SCRIPT
</option>
<option>XML</option>
</select>
<br>
<br>
<button onclick="geek()">Next of CSS</button>
<br>
<br>
<p id="p" style="margin:auto; width: 40%"></p>
<script>
function geek() {
var a =
document.getElementById("Select").nextElementSibling;
document.getElementById("p").innerHTML = a.text;
document.getElementById("p").style.color = "white";
document.getElementById("p").style.background = "green";
}
</script>
</body>
</html>
Salida:
Antes de hacer clic en el botón: 
Después de hacer clic en el botón: 
Nota: No coloque espacios en blanco entre dos elementos hermanos, de lo contrario el resultado será «indefinido».
Navegadores compatibles: los navegadores compatibles con la propiedad nextElementSibling se enumeran a continuación:
- Google Chrome 2.0
- Internet Explorer 9.0
- Firefox 3.5
- Ópera 10.0
- Apple Safari 4.0
Publicación traducida automáticamente
Artículo escrito por Vishal Chaudhary 2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA