如何通过JavaScript获取类名

Question

我该如何通过没有给出id的JavaScript获得类名span。

喜欢： <span class="xyz"></span>

我想更改此的背景色span。

我该如何解决？请帮我。

tympanus.net/Tutorials/CSS3PageTransitions/index3.html#contact

Answer 1

您有以下选择：

1. 使用document.getElementsByClassName("xyz")。这将返回具有该类名的对象的 NodeList（如数组）。不幸的是，老版本的IE中不存在这个功能。
2. 使用document.getElementsByTagName("span")然后循环这些对象，测试.className属性以查看哪些对象具有所需的类。
3. 用于document.querySelectorAll(".xyz")获取具有该类名的所需对象。不幸的是，这个功能在旧版浏览器中不存在。
4. 获取一个可自动处理所有浏览器中所有 CSS3 选择器查询的库。如果您只想要一个选择器库，那么您可以使用 Sizzle。如果您想要一个更全面的库来操作 DOM，那么请使用 YUI3 或 jQuery（两者都内置了 Sizzle）。

截至 2011 年，我的建议是选项#4。除非这是一个非常小的项目，否则通过使用已经为跨浏览器使用而开发的 CSS3 选择器库，您的开发效率将大大提高。例如，在 Sizzle 中，您可以使用以下代码行获取带有您的类名的对象数组：

var list = Sizzle(".xyz");

在 jQuery 中，您可以使用以下代码行创建一个 jQuery 对象，其中包含具有该类的对象列表：

var list = $(".xyz");

而且，这两种方法都可以在 IE6 以来的所有浏览器中使用，而无需担心任何浏览器兼容性。

在更现代的时期（例如 2021 年），您可以使用内置的document.querySelectorAll()并查看相当丰富的 CSS3 选择器支持。

Answer 2

这样的事情应该起作用：

var spans = document.getElementsByTagName("span");
for (var i = 0; i < spans.length; i++) {
    if (spans[i].className == 'xyz') {
        spans[i].style.backgroundColor = '#000';
    }
}