我需要来自命名节点映射的值答案

【问题标题】：I need value from a named node map我需要来自命名节点映射的值
【发布时间】：2015-06-15 16:22:15
【问题描述】：

我正在通过一个 html 结构来获取我需要的值。它似乎是一个“NamedNodeMap”，我已经得到了这个电话：

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

在 chromes 控制台中打印时会显示：

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

我需要将“12:00 AM”作为值，字符串，任何东西都可以。我只是不知道如何得到它。通话结束时的 .value 不起作用，我还尝试了 .text 和许多其他东西。

这是我展开句柄和属性之前 ui 对象的样子：

然后：

html 标记：

【问题讨论】：

【解决方案1】：

.attributes 似乎是一个“NamedNodeMap”，我已经调用了.attributes.getNamedItem("data-value")

.attributes 是Attribute nodes 的NamedNodeMap，这是一个相当过时的接口。如果你真的想使用它，属性节点的.value、.nodeValue 和.textContent 属性应该会产生你想要的文本值：

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

但是，标准方法是只使用元素的 getAttribute method：

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

使用 HTML5，甚至还有专门设计用于访问数据属性的 .dataset DOMStringMap：

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

【讨论】：

@connormoore：那么这就是您的属性的当前值。你还期待什么？
我会说如果 jquery 和 javascript 选项都给你一个字符串'03:00AM'并且你期望看到'12:00AM'那么在我们进入这个阶段之前出现了问题- 即元素上的data-value 属性设置错误
@connormoore：看来您（或插件或其他东西）正在更改值。你必须在正确的时间得到它。
看上面的图片你可以看到我要获取的值是在对象下、句柄下、属性下、数据值下，并被视为节点值、文本内容和值。这些实际上是一个接一个的 console.log 调用。
@connormoore：是的，但在那之后你不是expanding the logged object（“在数据值属性下的句柄下”）。从您记录它到您检查对象的时间之间的值发生了变化。

【解决方案2】：

当您使用 jQuery 时，有一个 very simple way 来获取 data-* 属性：

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

因此，在您的情况下，您需要找到目标元素的 ID 并调用：

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

如果ui.handle 是代表单个节点的 jquery 对象，您可以这样做：

ui.handle.data('value');

或者如果它是一个 javascript DOM 节点，那么你需要将它包装在一个 $ 调用中：

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

【讨论】：

【解决方案3】：

Element.attributes 返回该 HTMLElement 属性的 NamedNodeMap，它是一个 JavaScript Map。因此假设

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

您可以从 NamedNodeMap 中创建一个对象，如下所示：

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

然后通过点符号访问对象属性的单个属性：

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

【讨论】：