var borderTds = document.getElementsByClassName('leftborder');
在Internet Explorer 6、7和8中,我收到了一个错误消息:
对象不支持此方法
我该如何在这些浏览器中通过它们的类选择元素?
我希望不使用JQuery。
var borderTds = document.getElementsByClassName('leftborder');
在Internet Explorer 6、7和8中,我收到了一个错误消息:
对象不支持此方法
我该如何在这些浏览器中通过它们的类选择元素?
我希望不使用JQuery。
如果您想在IE6、Netscape 6+、Firefox和Opera 7+中使用,请将以下脚本复制到您的页面中:
document.getElementsByClassName = function(cl) {
var retnode = [];
var elem = this.getElementsByTagName('*');
for (var i = 0; i < elem.length; i++) {
if((' ' + elem[i].className + ' ').indexOf(' ' + cl + ' ') > -1) retnode.push(elem[i]);
}
return retnode;
};
\b
可能会导致包含 -
的类出现问题。最好添加空格:if((' ' + elem[i].className + ' ').indexOf(' ' + cl + ' ') > -1)...
。这是 jQuery 使用的方法。 - Felix Kling这个解决方案可能会有所帮助。这是一个纯 JavaScript 实现的自定义 getElementsByClassName
函数,可在 IE 中使用。
本脚本的基本原理是逐一探测所有可能的选项并选择最佳可用选项。这些选项包括:
document.getElementsByClassName
函数。document.evaluate
函数,它允许评估 XPath 查询。当然,第一个选项在性能方面是最好的,但后面两个选项应该在任何地方都可用,包括 IE 6。
此页面上也提供了使用示例:
getElementsByClassName("col", "div", document.getElementById("container"));
所以这个函数允许三个参数:class(必需),标签名称(可选,如果没有指定则搜索所有标签),根元素(可选,默认为文档)。
更新。博客文章中链接的解决方案托管在即将在2016年1月关闭的Google Code上。然而,作者已经在GitHub上提供了它。感谢flodin在评论中指出这一点。
Internet Explorer 8及更早版本不支持getElementsByClassName()
。如果您只需要针对IE8的解决方案,它支持querySelectorAll()
,您可以使用其中之一。对于旧版IE,您必须提供自己的实现,并且对于一些其他支持它的古老浏览器,您也可以使用evaluate()
来运行XPath表达式。
这段代码提供了一个document.getElementsByClassName
方法,如果它不存在,则使用我所描述的方法:
if (!document.getElementsByClassName) {
document.getElementsByClassName = function(search) {
var d = document, elements, pattern, i, results = [];
if (d.querySelectorAll) { // IE8
return d.querySelectorAll("." + search);
}
if (d.evaluate) { // IE6, IE7
pattern = ".//*[contains(concat(' ', @class, ' '), ' " + search + " ')]";
elements = d.evaluate(pattern, d, null, 0, null);
while ((i = elements.iterateNext())) {
results.push(i);
}
} else {
elements = d.getElementsByTagName("*");
pattern = new RegExp("(^|\\s)" + search + "(\\s|$)");
for (i = 0; i < elements.length; i++) {
if ( pattern.test(elements[i].className) ) {
results.push(elements[i]);
}
}
}
return results;
}
}
在IE6中不存在该方法。如果您想通过类名选择元素而又不想使用库,您只需循环遍历页面上的所有元素,并检查它们的className
属性中是否包含该类名。
function getElementsByClassName(className) {
var found = [];
var elements = document.getElementsByTagName("*");
for (var i = 0; i < elements.length; i++) {
var names = elements[i].className.split(' ');
for (var j = 0; j < names.length; j++) {
if (names[j] == className) found.push(elements[i]);
}
}
return found;
}
jQuery
之外的替代方案是直接使用Sizzle选择器引擎。但是如果你只需要按类选择,那么我会写一个替代方案。 - user113716