当前位置: 首页 > 面试题库 >

javascript document.getElementsByClassName与IE的兼容性

微生毅
2023-03-14
问题内容

检索具有特定类的元素数组的最佳方法是什么?

我会使用document.getElementsByClassName,但IE不支持它。

function getElementsByClassName(node, classname) {
    var a = [];
    var re = new RegExp('(^| )'+classname+'( |$)');
    var els = node.getElementsByTagName("*");
    for(var i=0,j=els.length; i<j; i++)
        if(re.test(els[i].className))a.push(els[i]);
    return a;
}
var tabs = document.getElementsByClassName(document.body,'tab');

…但是IE仍然说:

对象不支持此属性或方法

有什么想法,更好的方法,错误修复?

我不希望使用任何涉及jQuery或其他“笨拙的javascript”的解决方案。

我知道了!

正如@joe提到的,该函数不是的方法document

因此,工作代码如下所示:

function getElementsByClassName(node, classname) {
    var a = [];
    var re = new RegExp('(^| )'+classname+'( |$)');
    var els = node.getElementsByTagName("*");
    for(var i=0,j=els.length; i<j; i++)
        if(re.test(els[i].className))a.push(els[i]);
    return a;
}
var tabs = getElementsByClassName(document.body,'tab');

…此外, 如果您只需要IE8 +支持, 那么它将起作用:

if(!document.getElementsByClassName) {
    document.getElementsByClassName = function(className) {
        return this.querySelectorAll("." + className);
    };
    Element.prototype.getElementsByClassName = document.getElementsByClassName;
}

像平常一样使用它:

var tabs = document.getElementsByClassName('tab');

问题答案:

这不是记录方法:

function getElementsByClassName(node, classname) {
    var a = [];
    var re = new RegExp('(^| )'+classname+'( |$)');
    var els = node.getElementsByTagName("*");
    for(var i=0,j=els.length; i<j; i++)
        if(re.test(els[i].className))a.push(els[i]);
    return a;
}

tabs = getElementsByClassName(document.body,'tab');  // no document


 类似资料:
  • 问题内容: 我正在使用来自AJAX发布请求的回调来导航到新页面,但是在Internet Explorer上不起作用。我的代码如下: 这在FF / Safari / Chrome上正常运行,但是当我在IE上对其进行测试时,它不起作用。是否有更好的方法重定向到新页面?我正在使用,因为如果我不使用回调,则数据不会加载到Chrome / Safari上,因为在请求完成之前页面只会更改。 问题答案: 是括号

  • 问题内容: 其实这句话是什么意思? 一些示例用于分隔IE的版本,而某些示例则用于; 哪个是对的? 该命令具有一定的重要性,我希望知道这一点。 编辑 :我正在使用 问题答案: 如果您支持IE(对于Internet Explorer 8及更高版本),请执行以下操作: 强制浏览器呈现为该特定版本的标准。IE7及更低版本不支持此功能。 如果用分号分隔,它将设置不同版本的兼容性级别。例如: 将IE7和IE8

  • 对于响应式布局,有一点需要注意,就是IE8 及以下的版本不支持媒体查询,这意味着它们只会呈现媒体查询以外的样式,即基准样式。并且,它们也不支持HTML5 的 header、main、aside、footer 等新元素。 对于IE8及更早的版本,可以什么都不做,让网站显示最基本的版本,或者为它们单独创建一个样式表,让它们显示网站最宽的版本。 当然,大多数人还是倾向于让页面具有响应式的效果。这也好办,

  • 概览 本章描述了IE在处理自定义的HTML属性和标签时的一些独特之处。如果你要让你的AngularJS应用兼容IE8和IE8以下的版本的话,你需要仔阅读本章。 简易版 要让你的AngularJS应用在IE中正常运行你必须: 确保JSON字符串能被正常解析(IE7需要),你可以使用JSON2或者JSON3来实现。 你不能使用自定义的元素标签,如<ng:view>(你只能使用属性的形式,如<div n

  • 本文向大家介绍placeholder如何在兼容IE?相关面试题,主要包含被问及placeholder如何在兼容IE?时的应答技巧和注意事项,需要的朋友参考一下 $(function(){ // 兼容IE9下的placeholder function placeholderSupport() { return 'placeholder' in document.createElement('inpu

  • 本文向大家介绍Html5的placeholder属性(IE兼容)实现代码,包括了Html5的placeholder属性(IE兼容)实现代码的使用技巧和注意事项,需要的朋友参考一下 HTML5对Web Form做了许多增强,比如input新增的type类型、Form Validation等。 Placeholder是HTML5新增的另一个属性,当input或者textarea设置了该属性后,该值的内