Javascript 用于读取HTML5自定义数据属性的本机JS

我了解到HTML5包括一种使用数据前缀在元素上设置自定义属性的方法。然而，对于如何在javascript代码块期间读取属性，我有点困惑。我想这是我对DOMStringMap工作原理的解释

有人可以简化如何读取以下示例html的属性吗

<span data-complex-key="howtoRead" data-id="anId">inner</span>

另一件让我好奇的事情是，CSS选择器似乎遵循与我在DOM中编写的模式相同的EXACT模式，那么为什么从javascript读取时不是这样呢

例如，这将匹配

 span[data-complex-key="howtoRead"] { color:green }

---

感谢您的帮助，我们仍然对HTML5画布、视频和本地数据存储越来越感兴趣：）

在vanilla JS中，假设

spanEl

是对DOM节点的引用

spanEl.dataset.complexKey

当您的数据属性包含hypens（

-

）时，将使用

camelCase

表示法（请参阅），并且

正如你已经注意到的那样，它会工作得很好。另外，在jQuery中，您可以使用

$(spanEl).data("complex-key")

//使用jQuery，您可以尝试以下方法

 $('span').data('complex-key')  // Will give you **howtoRead**

    $('span').data('id')  // Will give you **anId**

---

在Chrome中，它似乎以一种不那么简单的方式映射数据键：

console.log(spanEl.dataset);​​​​​​​​​​​​​​
//shows:
//DOMStringMap
//  complexKey: "howtoRead"
//  id: "anId"

它将“复杂密钥”转换为“复杂密钥”

虽然不是完全直接的，但这种行为在HTML5规范中定义如下：

---

在不使用任何库的情况下，您的第一个和最后一个方法是正确的。但是，带减号的键转换为驼峰大小写，因此复杂键变为复杂键：

spanEl.dataset['id']
spanEl.dataset['complexKey']
spanEl.getAttribute('data-complex-key')

---

然而，只有最后一个在IE中工作到9。（我不知道10。）在这种情况下，数据属性只不过是具有命名约定的普通属性。

在属性键中不应该使用破折号，顺便说一句，最好在这里选择camelCased complexKey。请注意，在JavaScript

dataset['foo']

中，与

dataset.foo

相同，只要

foo

是有效标识符。

 $('span').data('complex-key')  // Will give you **howtoRead**

    $('span').data('id')  // Will give you **anId**

console.log(spanEl.dataset);​​​​​​​​​​​​​​
//shows:
//DOMStringMap
//  complexKey: "howtoRead"
//  id: "anId"

spanEl.dataset['id']
spanEl.dataset['complexKey']
spanEl.getAttribute('data-complex-key')