JavaScript: effettuare una selezione di elementi

In questo articolo vedremo come effettuare una selezione di elementi con JavaScript.

Partiamo dalla seguente struttura HTML:

<ul id="selection">
    <li>A</li>
    <li>B</li>
    <li>C</li>
</ul>
<div>
    <button type="button" id="select">Select</button>
</div>

Come primo step dobbiamo abilitare la selezione sugli elementi utilizzando un evento click ed una classe CSS.

const selectable = document.querySelectorAll('#selection li');

selectable.forEach(item => {

    item.addEventListener('click', () => {
        item.classList.toggle('selected');
    }, false);
});

A questo punto possiamo raggruppare gli elementi selezionati in un unico array.

const selectBtn = document.querySelector('#select');

selectBtn.addEventListener('click', e => {

    e.preventDefault();

    const selectedItems = [];
    
    document.querySelectorAll('#selection .selected').forEach(item => {
        selectedItems.push(item);
    });
}, false);