getElementsByClassName - 可以在2012年安全使用吗?

时间:2012-07-15 23:46:57

标签: javascript dom

JavaScript的getElementById可以使用,我知道。但getElementsByClassName怎么样?浏览器如何支持它?

通过Google,我发现了各种自制解决方案,例如this

正如你所看到的,这篇文章现在已经四年了,这就是我要问的原因。或者,如果它可用,我应该只使用jQuery吗?

3 个答案:

答案 0 :(得分:4)

只需使用document.querySelectorAll(".classname")

即可

IE 8支持它:http://www.caniuse.com/#search=queryselectorall


我写了一个垫片:

if (typeof document.getElementsByClassName !== 'function') {
    HTMLElement.prototype.getElementsByClassName = function (classname) {
        return this.querySelectorAll('.' + classname);
    };
}

http://jsfiddle.net/P3P5e/1/

(在Chrome 21和Opera 12.50中经过测试和工作[如果需要],但在Firefox 14中没有。我无法判断它是否适用于IE,因为我没有IE。)

答案 1 :(得分:4)

首先,你必须准确确定你需要支持哪个版本的IE:IE6,IE7,IE8?在不知情的情况下,我们无法提供最好的选项。如果您只需要IE9及更高版本(在某些模式下也是IE8),那么您可以使用document.querySelectorAll(".classname")document.getElementsByClassName("classname")

如果你需要其他版本的IE,你就不能走那条路。 getElementsByClassName()的垫片少于30行代码,可用于在旧版本的IE中为它提供支持,但在那时,我强烈建议您只选择一个选择器库所有跨浏览器支持。听起来你已经熟悉了有这样一个库的jQuery。如果你不想/需要jQuery的其余部分,你可以只获得一个选择器库。 jQuery在内部使用Sizzle,它本身就是可用的并且相当不错。还有其他人。

这是一个很好的资源,因此您可以自己查找浏览器兼容性:http://caniuse.com/getelementsbyclassname

答案 2 :(得分:0)