I need value from a named node map

Question

I am going through an html structure to get a value I need. It appears to be a "NamedNodeMap" and I have gotten as far as this call:

ui.handle.attributes.getNamedItem("data-value")

which when printed in chromes console shows this:

data-value="12:00 AM"
    ->"12:00 AM"

I need to get the "12:00 AM" as a value, string, anything will work. I just dont know how to get it. .value on the end of my call does not work, i also tried .text and many other things.

Heres what the ui object looks like before i expand handle and attributes:

and then after:

html markup:

Answer 1

.attributes appears to be a "NamedNodeMap" and I have gotten as far as calling .attributes.getNamedItem("data-value")

.attributes is a NamedNodeMap of Attribute nodes, which is a pretty deprecated interface. If you really want to use this, the .value, .nodeValue and .textContent properties of the attribute node should yield the text value you're after:

ui.handle.attributes.getNamedItem("data-value").value // "12:00 AM"

However, the standard approach would be to just use the getAttribute method of your element:

ui.handle.getAttribute("data-value") // "12:00 AM"

With HTML5, there is even the .dataset DOMStringMap specifically designed to access data attributes:

ui.handle.dataset["value"] // "12:00 AM"

Answer 2

As you're using jQuery, there's a very simple way to get data-* attributes:

$('element').data('key');

So in your case, you'd need to find the ID of the element you are targeting and call:

$('#ID').data('value');

If ui.handle is a jquery object that represents a single node the you can do:

ui.handle.data('value');

Or if it's a javascript DOM node, then you'll need to wrap it in a $ call:

$(ui.handle).data('value');

Answer 3

Element.attributes returns a NamedNodeMap of attributes of that HTMLElement which is mildly a JavaScript Map. Hence supposing

<span id="mySpan" name="test" message="test2"></span>

you can create an object from the NamedNodeMap like below:

const el = document.querySelector('#mySpan')
const attrs = Object.fromEntries(Array.from(el.attributes).map(item => [item.name, item.value]))

and then access an individual attribute by the dot notation for object properties:

console.log(attrs.name) // "test"
console.log(attrs.messsage) // "test2"