不使用jQuery选择所有带有“data-xxx”属性的元素

仅使用纯JavaScript，选择所有具有特定data-属性(比如data-foo)的DOM元素的最有效方法是什么?

元素可能不同，例如:

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

当前回答

虽然不像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

2011-08-16 22:24:38

其他回答

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

会得到所有带有该属性的元素。

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

只会得到值为1的。

2011-08-16 20:30:14

试一下→这里

    <!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>

2011-08-16 20:46:35

你可以使用querySelectorAll:

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

2011-08-16 20:29:20

原生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>

2022-10-26 22:53:55

这里有一个有趣的解决方案:它使用浏览器的CSS引擎为匹配选择器的元素添加一个虚拟属性，然后计算计算的样式来找到匹配的元素:

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

2011-08-16 20:53:06

不使用jQuery选择所有带有“data-xxx”属性的元素

推荐文章

最新文章

标签