一个关于setAttribute的脚本错误

在页面上发现一个脚本错误,通过Chrome的Debug发现问题出现在一个js方法

function switchToTab(obj) {
    for (var i = 0; i < obj.parentNode.childNodes.length; i++) {
        obj.parentNode.childNodes[i].setAttribute("class", "");
        obj.parentNode.childNodes[i].setAttribute("className", "");
    }
    obj.setAttribute("class", "selected");
    obj.setAttribute("className", "selected");
}

注:setAttribute("className", value);是为了兼容IE,因为使用IE内核的浏览器不认识"class",要用"className"替代。

对setAttribute的了解可以参考这篇文章:http://www.cnblogs.com/seili/archive/2010/10/18/1854004.html

调试会报如下错误:Uncaught TypeError: Object #<Text> has no method 'setAttribute'

#<Text>是什么东东?在Chrome的控制台(Console)输入 obj.parentNode.childNodes 会发现每个子标签之间有一个#Text,这是因为你用原生的DOM API,是会选择到页面上的空白文本节点,空白文本节点不是标签,没有setAttribute方法。碰到这样的情况,还是用jQuery吧。

function switchToTab(obj) {
    $(obj).parent().children().each(function () {
        $(this).removeClass("selected");
    });
    $(obj).addClass("selected");
}

这样就解决问题了。

原文地址:https://www.cnblogs.com/young2012/p/2802871.html