Select 不使用 jQuery 的所有具有“data-xxx”属性的元素

Question

仅使用纯 JavaScript，什么是 select 具有特定data-属性（假设data-foo ）的所有 DOM 元素的最有效方法。

元素可能不同，例如：

<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

document.querySelectorAll('data-foo')

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

如果您想获取具有某些特定值的数据属性的元素，例如

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

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

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

但是，如果我想将数据属性值与某个变量的值匹配，比如如果 data-foo 属性设置为 i，我想获取元素

var i=2;

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

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 4

试试看→这里

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

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

它确实动态地创建了一个样式规则 [...] 然后扫描整个文档（使用大量 decried 和 IE 特定但非常快的 document.all）并获取每个元素的计算样式。 然后，我们在生成的 object 上查找 foo 属性，并检查其计算结果是否为“bar”。 对于每个匹配的元素，我们添加到一个数组中。

Answer 6

本机 JavaScript 的querySelector和querySelectorAll方法可用于定位元素。 如果您的dataset值是变量，请使用模板字符串。

 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 data-type="term">Thing</dt> <dd data-type="details">The most generic type.</dd> </dl>

Answer 7

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 8

虽然不如querySelectorAll漂亮（有很多问题），但这里有一个非常灵活的 function 递归 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

Select 不使用 jQuery 的所有具有“data-xxx”属性的元素

问题描述

8 个解决方案

解决方案1
524 已采纳 2011-08-16 20:29:20

解决方案2
306 2011-08-16 20:30:14

解决方案3
15 2020-07-13 08:41:06

解决方案4
13 2011-08-16 20:46:35

解决方案5
1 2011-08-16 20:53:06

解决方案6
0 2022-10-26 22:53:55

解决方案7
-4 2011-08-16 20:29:40

解决方案8
-5

Select 不使用 jQuery 的所有具有“data-xxx”属性的元素

问题描述

8 个解决方案

解决方案1 524 已采纳 2011-08-16 20:29:20

解决方案2 306 2011-08-16 20:30:14

解决方案3 15 2020-07-13 08:41:06

解决方案4 13 2011-08-16 20:46:35

解决方案5 1 2011-08-16 20:53:06

解决方案6 0 2022-10-26 22:53:55

解决方案7 -4 2011-08-16 20:29:40

解决方案8 -5

解决方案1
524 已采纳 2011-08-16 20:29:20

解决方案2
306 2011-08-16 20:30:14

解决方案3
15 2020-07-13 08:41:06

解决方案4
13 2011-08-16 20:46:35

解决方案5
1 2011-08-16 20:53:06

解决方案6
0 2022-10-26 22:53:55

解决方案7
-4 2011-08-16 20:29:40

解决方案8
-5