javascript - 为什么不（如何）document.getElementsByClassName("*")？

Question

我们可以得到所有的dom

document.getElementsByTagName("*")

为什么我们不能使用

document.getElementsByClassName("*")

获取具有class属性集的所有标签？

同样使用

document.getElementById("*")

获取带有id属性集的标签？

虽然这些功能不是很有必要，也可能没有需求，但我希望有人告诉我如何实现。谢谢。

Answer 1

答案是因为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");

Answer 2

正如@jfriend00 在之前的答案中所建议的那样，该功能在浏览器的 javascript 实现中本机不存在。同样，答案还包含一种使用纯 JavaScript 的方法。

或者，您必须使用框架而不是位于 javascript 之上并为您提供更好的选择器。

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

选择所有带有 a 的元素class：

$('[class]')

选择所有带有 的元素id：

$('[id]')

Answer 3

getElementsByClassName()并非在所有浏览器上都实现，尤其是 Internet Explorer。但是，您可以使用各种 javascript 库，例如jQuery，以跨浏览器的方式实现此功能。没有一个默认函数使用通配符*来获取所有值。尽管您可以再次使用 jquery 来执行此操作$('[id]')，如此 SO 帖子中所示：jquery get only all html elements with ids

Answer 4

这是 getElementByClass 的快速链接 - http://www.actiononline.biz/web/code/how-to-getelementsbyclass-in-javascript-the-code/ - 您可以修改代码以返回所有非空白元素通过将 if 语句修改为

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

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