在前端开发中，通常使用CSS选择器来选取DOM元素，但是有时候需要根据特定的标识符来选择元素，这时候就可以使用"数据"属性来实现。
"数据"属性
"数据"属性是HTML5中提供的一种新的自定义属性，它的名字以"data-"开头，后面跟着任意字符串。通过为元素添加"data-"属性，我们可以把任意数据附加到元素上，而不会影响到页面的结构或样式。
例如，我们可以给一个按钮元素添加一个"data-color"属性，来表示该按钮对应的颜色：
<button data-color="blue">Blue Button</button>
这个"data-color"属性将不会影响按钮的外观或行为，但是我们可以通过JavaScript代码来获取和修改它。
选择所有"data"属性的元素
要选择所有具有"data-"属性的元素，可以使用以下代码：
var elements = document.querySelectorAll('[data-]');这里使用了CSS选择器中的属性选择器"[attribute]"，其中的属性名为"data-"，表示选择所有具有"data-"属性的元素。通过这个方法，我们可以获取文档中所有的"data-"属性元素的集合。
根据"data"属性值选择元素
如果我们想要根据"data-"属性的值来选择元素，可以使用以下代码：
var elements = document.querySelectorAll('[data-color="blue"]');这里的属性选择器"[attribute=value]"表示选择所有"data-color"属性值为"blue"的元素。通过这个方法，我们可以获取文档中所有"data-color"属性值为"blue"的元素的集合。
例子
下面是一个完整的例子，演示如何使用"data-"属性来选择元素：
-- -------------------- ---- ------- --------- ----- ------ ------ -------------- -------- ---- ---- ----------------- -------- -------- - ----------- ----- ---------- ---- ----------------- ---- ------------- ----- --- ------- - -------------------- ----- --------- ------ --- ------ - -------------------- ---- --------- ------ --- -------- - -------------------- ------ --------- ------ --- --------- ------- ------ ----------- -------- ---- ---- -------------- -------- ----------------- ----------------- --------------- -------- ---------------- --------------- --------------- -------- ------------------ ------------------- --------------- --------- ---- --- --- -------- ---- ------- --------- ----- ------------ - ------------------------------------- ---------------------------- ---- --- --- -------- ---- ------------ --------- ----- ------ ------ ----- ------------ - ------------------------------------------------- ---------------------------- ---------- ------- -------
在这个例子中，我们创建了三个按钮元素，并为它们分别添加了"data-color"属性和"class"属性。然后，我们使用JavaScript代码来选择所有"data-"属性的元素和所有"data-color"属性值为"blue"的元素，并将它们输出到控制台。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/11416
