选择所有具有“ data-”属性的元素,而无需使用jQuery

2020/10/10 13:01 · javascript ·  · 0评论

仅使用JavaScript,选择具有特定data-属性(假设data-foo)的所有DOM元素的最有效方法是什么元素可以是不同的标签元素。

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

您可以使用querySelectorAll

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

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

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

只会得到值为1的那些。

试试→这里

    <!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>
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/zh-CN/docs/Web/HTML/Global_attributes/data-*
https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Howto/Use_data_attributes

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

是一个有趣的解决方案:它使用浏览器CSS引擎向与选择器匹配的元素添加一个哑属性,然后评估计算出的样式以找到匹配的元素:

它确实动态创建了样式规则,然后扫描了整个文档(使用经过精心设计且特定于IE的但非常快速的document.all),并为每个元素获取了计算出的样式。然后,我们在结果对象上查找foo属性,并检查它是否评估为“ bar”。对于每个匹配的元素,我们添加一个数组。

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(有很多问题),但是这是一个非常灵活的函数,可以递归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(document.body, {"1": 1}); 为了速度,还是 recurseDOM(document.body);

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

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

本文地址:http://javascript.askforanswer.com/xuanzesuoyoujuyou-data-shuxingdeyuansuerwuxushiyongjquery.html
文章标签: ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!