JavaScript: selezionare tutti gli elementi successivi ad un dato elemento

In JavaScript possiamo selezionare tutti gli elementi DOM successivi ad un dato elemento.

Nel DOM la proprietà che ci permette di accedere al nodo elemento successivo a quello di partenza è nextElementSibling. Ovviamente l'elemento successivo deve esistere.

Implementiamo quindi la seguente funzione utilizzando un ciclo while:

'use strict';

const nextAll = element => {
	const siblings = [];
	while (element.nextElementSibling) {
		element = element.nextElementSibling;
		if (element !== null) {
			siblings.push(element);
		}
	}
	return siblings;
};

Consideriamo la seguente struttura:

<ul id="list">
	<li class="current">...</li>
	<li>...</li>
	<li>...</li>
</ul>

Volendo selezionare le voci di lista successive alla prima scriveremo:

const firstItem = document.querySelector('#list li.current');
const nexts = nextAll(firstItem);

Noterete che la nostra funzione è abbastanza semplice da usare.