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