10-数据属性

18.9　数据属性

HTML5引入了数据属性，它允许在HTML元素中加入任意数据，该数据并不是由浏览器产生的，不过它却可以给元素添加一些信息，从而让元素很容易被JavaScript读取和修改。下面给HTML中添加一个button，这个button的行为会最终绑定到 highlightParas 函数，以及 remoteParaHighlight 函数：

<button data-action="highlight" data-containing="unique">
    Highlight paragraphs containing "unique"
</button>
<button data-action="removeHighlights">
    Remove highlights
</button>

将数据属性命名为action和contains（当然也可以给它们起别的名字），然后就可以通过 document.querySelectorAll 来查找所有包含 "highlight" 这个action的元素：

const highlightActions = document.querySelectorAll('[data-action=
"highlight"]');

这里引入了一个新的CSS选择器类型。到目前为止，我们已经见过可以匹配指定标签、class和ID的选择器。方括号则允许根据属性来匹配元素，本例中就使用了一个指定的数据属性。

因为只有一个button，所以这里可以使用 querySelector 来代替 querySelectorAll ，不过 querySelectorAll 允许同一个页面上的多个元素触发同一个action（这很常见：想想在同一个页面中，通过菜单栏、链接或者工具栏共同触发的action有哪些）。如果认真观察 highlightActions 其中的一个元素，会发现它有一个 dataset 属性：

highlightActions[0].dataset;
// DOMStringMap { containing: "unique", action: "highlight" }

在DOM API中，数据是以字符串形式存储的（这个功能隐藏在 `DOMStringMap` 类中），也就是说不能存储对象。jQuery扩展了数据属性的功能，它通过提供接口从而允许用对象来存储数据属性，第19章将详细介绍它。

也可以通过JavaScript添加或修改数据属性。比如，如果想要高亮包含单词“giraffe”的段落，同时指明匹配时要大小写敏感，就可以这么做：

highlightActions[0].dataset.containing = "giraffe";
highlightActions[0].dataset.caseSensitive = "true";