var matches = new Array();

var allDom = document.getElementsByTagName("*");
for(var i =0; i < allDom.length; i++){
    var d = allDom[i];
    if(d["data-foo"] !== undefined) {
         matches.push(d);
    }
}

不知道是谁给了我-1，但这就是证据。

http://jsfiddle.net/D798K/2/

原生JavaScript的querySelector和querySelectorAll方法可以用来定位元素。如果数据集值是变量，请使用模板字符串。

var str = “term”; var term = document.querySelectorAll（'[data-type=${str}]'）; console.log（term[0].textContent）; var details = document.querySelector（'[data-type=“details”]'）; console.log（details.textContent）; <dl> <dt 数据类型=“term”>事物</dt> <dd 数据类型=“详细信息”>最通用的类型。</dd> </dl>

document.querySelectorAll('[data-foo]')

获取具有data-foo属性的所有元素的列表

如果你想要获取具有特定值的data属性的元素

<div data-foo="1"></div>
<div data-foo="2"></div>

我想把div的data-foo设为2

document.querySelector('[data-foo="2"]')

但问题来了……如果我想匹配数据attirubte值与一些变量的值怎么办?例如，如果我想获取data-foo属性设置为I的元素

var i=2;

因此，您可以使用模板字面量动态地选择具有特定数据元素的元素

document.querySelector(`[data-foo="${i}"]`)

注意，即使你没有在字符串中写value它也会被转换成字符串，就像我写的那样

<div data-foo=1></div>

然后在Chrome开发工具中检查元素，元素将如下所示

<div data-foo="1"></div>

你也可以在控制台写下面的代码来交叉验证

console.log(typeof document.querySelector(`[data-foo="${i}"]`).dataset('dataFoo'))

为什么我写了“dataFoo”，虽然属性是data-foo的原因数据集属性被转换为骆驼case属性

我已参考以下连结:

MDN:数据- * MDN:使用数据属性

你可以使用querySelectorAll:

document.querySelectorAll('[data-foo]');

var matches = new Array();

var allDom = document.getElementsByTagName("*");
for(var i =0; i < allDom.length; i++){
    var d = allDom[i];
    if(d["data-foo"] !== undefined) {
         matches.push(d);
    }
}

不知道是谁给了我-1，但这就是证据。

http://jsfiddle.net/D798K/2/

虽然不像querySelectorAll那样漂亮(querySelectorAll有一大堆问题)，但这里有一个非常灵活的递归DOM函数，可以在大多数浏览器(旧的和新的)中工作。只要浏览器支持您的条件(即:数据属性)，您应该能够检索元素。

对于好奇的人来说:不要在jsPerf上测试这个与QSA的对比。像Opera 11这样的浏览器会缓存查询并扭曲结果。

代码:

function recurseDOM(start, whitelist)
{
    /*
    *    @start:        Node    -    Specifies point of entry for recursion
    *    @whitelist:    Object  -    Specifies permitted nodeTypes to collect
    */

    var i = 0, 
    startIsNode = !!start && !!start.nodeType, 
    startHasChildNodes = !!start.childNodes && !!start.childNodes.length,
    nodes, node, nodeHasChildNodes;
    if(startIsNode && startHasChildNodes)
    {       
        nodes = start.childNodes;
        for(i;i<nodes.length;i++)
        {
            node = nodes[i];
            nodeHasChildNodes = !!node.childNodes && !!node.childNodes.length;
            if(!whitelist || whitelist[node.nodeType])
            {
                //condition here
                if(!!node.dataset && !!node.dataset.foo)
                {
                    //handle results here
                }
                if(nodeHasChildNodes)
                {
                    recurseDOM(node, whitelist);
                }
            }
            node = null;
            nodeHasChildNodes = null;
        }
    }
}

然后，您可以使用以下命令启动它:

recurseDOM(文档。Body， {"1": 1});为了速度，或者只是递归(document.body);

您的规范示例:http://jsbin.com/unajot/1/edit

不同规格的示例:http://jsbin.com/unajot/2/edit