为什么不(如何）document.getElementsByClassName(“*”）

why not (how to) document.getElementsByClassName("*")?

本文关键字：document 如何 为什么不 getElementsByClassName      更新时间：2023-09-26

我们可以得到所有的dom

document.getElementsByTagName("*")

为什么我们不能使用 

document.getElementsByClassName("*")

获取设置了class属性的所有标签？

和类似的使用 

document.getElementById("*")

获取设置了id属性的标签？

尽管这些功能不是很必要，并且可能没有需求，但我希望有人告诉我如何实现相同的功能。谢谢。

答案是因为getElementsByClassName()和getElementById()不接受通配符。 它们不是为了做到这一点而规范或编写的，因此您不能以这种方式使用它们。

此外，getElementById()只返回单个 DOM 元素，而不是元素数组，因此它永远不会以这种方式工作。

如果你想获取所有带有类名的元素或所有带有 id 的元素，你可以这样做：

function getAllElementsWithAttribute(attr) {
    var results = [];
    var all = document.getElementsByTagName("*");
    for (var i = 0, len = all.length; i < len; i++) {
        if (all[i][attr]) {
            results.push(all[i]);
        }
    }
    return(results);
}

然后，您可以使用以下内容获取具有类名的所有元素：

var items = getAllElementsWithAttribute("className");

或者，使用以下 ID 获取所有元素：

var items = getAllElementsWithAttribute("id");

getElementsByClassName()并非在所有浏览器上实现，尤其是Internet Explorer。但是，您可以使用各种JavaScript库（例如jQuery）以跨浏览器的方式实现此功能。没有任何默认函数采用通配符*来获取所有值。虽然你可以再次使用jquery来做到这一点，$('[id]')如这篇SO帖子所示：jquery只获取所有带有ID的html元素

正如

@jfriend00之前在回答中建议的那样，该功能在javascript的浏览器实现中并不原生存在。同样，答案还包含一种使用纯javascript的方法。

或者，你必须使用框架，而不是坐在javascript之上，并给你更好的选择器。

因此，考虑到一个这样的框架，jQuery，你可以：

选择所有带有class的元素：

$('[class]')

选择所有带有id的元素：

$('[id]')

这是 getElementByClass 的快速链接 - http://www.actiononline.biz/web/code/how-to-getelementsbyclass-in-javascript-the-code/- 您可以通过将 if 语句修改为

if (allHTMLTags[i].className!="") {

要获取所有带有 id 的元素，只需获取所有元素并丢弃那些没有 id 的元素。

相关文章：