Question

仅使用JavaScript，选择具有特定data-属性的所有DOM元素的最有效方法是什么（比方说data-foo）。元素可以是不同的标记元素。

<p data-foo="0"></p><br/><h6 data-foo="1"></h6>

Answer 1

您可以使用querySelectorAll：

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

Answer 2

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

将为您提供具有该属性的所有元素。

document.querySelectorAll("[data-foo='1']")

只能获得值为1的那些。

Answer 3

Try it → here

    <!DOCTYPE html>
    <html>
        <head></head>
        <body>
            <p data-foo="0"></p>
            <h6 data-foo="1"></h6>
            <script>
                var a = document.querySelectorAll('[data-foo]');

                for (var i in a) if (a.hasOwnProperty(i)) {
                    alert(a[i].getAttribute('data-foo'));
                }
            </script>
        </body>
    </html>

Answer 4

document.querySelectorAll('data-foo')

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

如果要获取具有data属性的元素，该属性具有某些特定值，例如

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

我想将data-foo设置为“ 2”的div

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

但是，如果我想将数据attirubte值与某个变量的值进行匹配，就像我想在data-foo属性设置为i的情况下获取元素，该怎么办？

var i=2;

因此您可以使用模板文字来动态选择具有特定数据元素的元素

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

请注意，即使您没有在字符串中写入值，它也会像我写的那样转换为字符串

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

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

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

您还可以通过在控制台中编写以下代码来交叉验证

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

为什么我写了“ dataFoo”，尽管该属性是data-foo，原因是数据集属性被转换为camelCase属性

我在下面引用了链接

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/data-* https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes

这是我对stackoverflow的第一个答案，请让我知道如何改善答案的写作方式。

Answer 5

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/

Answer 6

Here是一个有趣的解决方案：它使用浏览器CSS引擎向与选择器匹配的元素添加虚拟属性，然后计算计算出的样式以查找匹配的元素：

它动态创建样式规则[...]然后扫描整个文档（使用非常谴责和IE特定但非常快的document.all）并得到了每个元素的计算样式。然后我们寻找foo 结果对象的属性，并检查它是否为 “酒吧”。对于匹配的每个元素，我们添加一个数组。

Answer 7

虽然没有querySelectorAll那么漂亮（它有一连串的问题），但这是一个非常灵活的函数，可以递归DOM并且应该在大多数浏览器（旧的和新的）中工作。只要浏览器支持您的条件（即：数据属性），您就应该能够检索元素。

对于好奇：不要在jsPerf上对QSA和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(document.body, {"1": 1});表示速度，或只是recurseDOM(document.body);

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

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

选择具有“data-”属性的所有元素，而不使用jQuery

7 个答案: