javascript - 数据事件的 JavaScript 选择器？

Question

有没有办法根据 data-event 属性选择元素？

这是我所拥有的：

<button data-event="5456293788" class="id-button-yes greenBtn list-buy-buttons">Buy now!</button>

寻找类似的东西：

document.getElementByDataEvent('5456293788')

可能的？

Answer 1

使用属性选择器

http://jsfiddle.net/QTNzf/

JS

document.querySelector('button[data-event="5456293788"]' );

CSS

button[data-devent="5456293788"] {
      background-color: #eee;
}

Answer 2

在 jQuery 中使用属性等于选择器：

$('[data-event="5456293788"]')

或与document.querySelectorAll：

document.querySelectorAll('[data-event="5456293788"]');

为了向后兼容，您必须遍历检查属性值的所有元素。在这种情况下，像 jQuery 这样的库确实有帮助。

向后兼容的原始 js：

function getElementsByAttr(attr, val) {
    var nodes,
        node,
        i,
        ret;
    val = '' + val;
    nodes = document.getElementsByTagName('*');
    ret = [];
    for (i = 0; i < nodes.length; i += 1) {
        node = nodes[i];
        if (node.getAttribute(attr) === val) {
            ret.push(node);
        }
    }
    return ret;
}
de = getElementsByAttr('data-event', '5456293788');

Answer 3

像这样的东西？

document.querySelector("button[data-event='5456293788']");

在JSFiddle中查看

它有相当广泛的浏览器支持（甚至 IE 8 也支持）

Answer 4

属性选择器确实浮现在脑海中，您不需要 jQuery 来使用它。
不过，它可能不适用于较旧的浏览器。

如果你真的想要，你可以getElementsByDataEvent向document对象添加一个（不确定是否所有浏览器都允许这样做）：

document.getElementsByDataEvent = function(dataEvent)
{
    return document.querySelectorAll('[data-event="'+dataEvent+'"]');
};

但正如您所看到的，这有点不必要，因为它只是返回querySelectorAll调用的返回值。更何况，如果querySelectorAll直接使用，还可以做这样的事情

document.querySelectorAll('a[data-event="foo"]');//only links will be retured
//or, with some other data-* thing, along the lines of:
document.querySelectorAll('[class="greenBtn"]');