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

发布于 2024-11-29 15:39:46 字数 220 浏览 0 评论 0原文

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

这些元素可能不同，例如：

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

原文

Using only pure JavaScript, what is the most efficient way to select all DOM elements that have a certain data- attribute (let's say data-foo).

The elements may be different, for example:

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

醉梦枕江山 2024-12-06 15:39:46

您可以使用 querySelectorAll：

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

You can use querySelectorAll:

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

回复收藏 0 原文

淡莣 2024-12-06 15:39:46

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

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

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

只会得到值为 1 的值。

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

will get you all elements with that attribute.

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

will only get you ones with a value of 1.

回复收藏 0 原文

旧竹 2024-12-06 15:39:46

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"]')

但这里出现了扭曲... 如果我想将 data 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 原因数据集属性被转换为驼峰式属性

我在下面引用了链接：

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

to get list of all elements having attribute data-foo

If you want to get element with data attribute which is having some specific value e.g

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

and I want to get div with data-foo set to "2"

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

But here comes the twist ... what if I want to match the data attirubte value with some variable's value? For example, if I want to get the elements where data-foo attribute is set to i

var i=2;

so you can dynamically select the element having specific data element using template literals

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

Note even if you don't write value in string it gets converted to string like if I write

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

and then inspect the element in Chrome developer tool the element will be shown as below

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

You can also cross verify by writing below code in console

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

why I have written 'dataFoo' though the attribute is data-foo reason dataset properties are converted to camelCase properties

I have referred below links:

回复收藏 0 原文

耶耶耶 2024-12-06 15:39:46

尝试一下 → 此处

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

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>

回复收藏 0 原文

夜血缘 2024-12-06 15:39:46

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

Native JavaScript's querySelector and querySelectorAll methods can be used to target the element(s). Use a template string if your dataset value is a variable.

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>

回复收藏 0 原文

想你只要分分秒秒 2024-12-06 15:39:46

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

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

回复收藏 0 原文

剪不断理还乱 2024-12-06 15:39:46

虽然不如 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); code>

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

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

While not as pretty as querySelectorAll (which has a litany of issues), here's a very flexible function that recurses the DOM and should work in most browsers (old and new). As long as the browser supports your condition (ie: data attributes), you should be able to retrieve the element.

To the curious: Don't bother testing this vs. QSA on jsPerf. Browsers like Opera 11 will cache the query and skew the results.

Code:

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;
        }
    }
}

You can then initiate it with the following:

recurseDOM(document.body, {"1": 1}); for speed, or just recurseDOM(document.body);

Example with your specification: http://jsbin.com/unajot/1/edit

Example with differing specification: http://jsbin.com/unajot/2/edit

回复收藏 0 原文

迷途知返 2024-12-06 15:39:46

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/

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);
    }
}

Not sure who dinged me with a -1, but here's the proof.

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

回复收藏 0 原文

~没有更多了~