Access the dataset property for each span with the dx-mention class. Use querySelectorAll to pick up the span elements, and then iterate over them.

dataset will return an object. However, because of the way hyphenated attributes are treated you need to target mentionValue rather than mention-value.

const spans = document.querySelectorAll('.dx-mention');

spans.forEach(span => {
  console.log(span.dataset);
  console.log(span.dataset.mentionValue);
});

<p>
  <span class="dx-mention" spellcheck="false" data-marker="@" data-mention-value="AgnesGan" data-id="AgnesGan">
<span contenteditable="false">
<span>@</span>AgnesGan</span>
  </span>
  <span class="dx-mention" spellcheck="false" data-marker="@" data-mention-value="AK" data-id="AK">
<span contenteditable="false">
<span>@</span>AK</span>
  </span>
</p>

You could do it like this:

$('.dx-mention').map(function() {
  return $(this).attr("data-mention-value")
}).get()

This will return both spans that is selected by the class, and get their data value.

Demo

var string = `<p><span class="dx-mention" spellcheck="false" data-marker="@" data-mention-value="AgnesGan" data-id="AgnesGan"><span contenteditable="false"><span>@</span>AgnesGan</span>
  </span> <span class="dx-mention" spellcheck="false" data-marker="@" data-mention-value="AK" data-id="AK"><span contenteditable="false"><span>@</span>AK</span>
  </span>
</p>`

var log = $('.dx-mention', string).map(function() {
  return $(this).attr("data-mention-value")
}).get()
console.log(log)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

You can use the following statement

document.querySelector('span.dx-mention').getAttribute('data-mention-value')

if you have multiple "span" elements you can use querySelectorAll and loop the nodes returned by the method.