Question

我正在寻找类似document.getElementsByClassName()的方法，但仅针对属性，这也意味着document.getElementsByAttributeValue("class", "testclass")与document.getElementsByClassName("testclass")具有相同的输出。

这不是那么容易，因为你不能只添加这样的功能

document.getElementsByAttributeValue = function(){....};

因为它也必须适用于document.getElementById("foo").getElementsByAttributeValue(...)。

毋庸置疑，我不想要一个JQuery解决方案，因为不需要为一个函数提供一个巨型库。

Answer 1

我创建的函数和实现如下所示：

Node.prototype.getElementsByAttributeValue = function(attribute, value){
    var dom = this.all || this.getElementsByTagName("*");
    var match = new Array();
    for (var i in dom) {
        if ((typeof dom[i]) === "object"){
            if (dom[i].getAttribute(attribute) === value){
                match.push(dom[i]);
            }
        }
    }
    return match;
};

我希望函数能够在每个html元素和html文档中工作，所以我将函数添加到所有html子类的父类Node类中。

JavaScript objects有一个很好的可视化。

使用this.all || this.getElementsByTagName("*")我获取了调用该函数的对象中的所有html元素。然后我循环遍历了我拍摄的所有元素并检查它们是否具有正确的属性值，如果有，我将它们推入match数组

Answer 2

您可以使用 JQuery 轻松获取特定类的所有元素，如下所示：

$('[class~="d1"]')

这将选择包含d1

类的元素

检查 Demo

更多信息：阅读 JQuery selector

HTML通过属性值JavaScript函数获取元素

2 个答案: