Pobranie elementu ze strony

Witam, podpowie ktoś za pomocą czego mogę pobrać zawartości "data-rollid" czyli np 725408?

<div id="past">
<div data-rollid="725408" class="ball ball-1">1</div>
<div data-rollid="725409" class="ball ball-1">6</div>
<div data-rollid="725410" class="ball ball-8">12</div>
<div data-rollid="725411" class="ball ball-1">6</div>
<div data-rollid="725412" class="ball ball-8">11</div>
<div data-rollid="725413" class="ball ball-1">7</div>
<div data-rollid="725414" class="ball ball-8">9</div>
<div data-rollid="725415" class="ball ball-1">5</div>
<div data-rollid="725416" class="ball ball-1">7</div>
<div data-rollid="725417" class="ball ball-1">2</div>
</div>

Tak możesz wyciągnąć tablicę wszystkich id:

const rolls = document.getElementById('past').children;
const ids = [...rolls].map(roll => roll.dataset.rollid);

console.log(ids);

Możesz mi to opisać metode map(). jak stosować? i nie lepiej each()?

Zależy co chcesz osiągnąć, nie opisałeś co właściwie chcesz zrobić.

.map() wykonuje transformacje jednej tablicy w drugą - bierze każdy element tablicy początkowej, przetwarza go zgodnie z przekazaną funkcją i zapisuje do tablicy wynikowej.

Co do [...rolls] - tu się trochę dzieje - gdyby lista elementów DOM była zwykła tablicą to wystarczyłoby samo rolls, ale niestety nie jest to prawdziwa tablica i nie ma metody map() więc trzeba ją na taką przerobić - do tego słuzy ta konstrukcja. Operator ... rozbija listę elementów DOM na poszczególne elementy i osadza je w zwykłej tablicy [].

<div class="previous-numbers-wrap">
<span class="badge red">4</span>
<span class="badge black">12</span>
<span class="badge red">4</span>
<span class="badge black">9</span>
<span class="badge green">0</span>
<span class="badge red">2</span>
<span class="badge green">0</span>
<span class="badge red">5</span>
<span class="badge black">9</span>
<span class="badge black">14</span>

Jak pobrać wartości z tego po klasie ?