对象扩展后 IE8 中的奇怪 setAttribute 行为

Question

我有以下代码用于创建各种微型图书馆（类似于 JQuery，但只有我需要的东西）。

window.$ = function(selector, context, undefined) 
{
    var getSelectorTest = function(selector, context, undefined)
    {
        var el;
        var selector_key = selector.slice(0, 1),
            matches = {
                '#': 'getElementById',
                '.': 'getElementsByClassName',
                '@': 'getElementsByName',
                '=': 'getElementsByTagName',
                '*': 'querySelectorAll'
            }[selector_key],
            selector_value = selector.slice(1);

        //add fallback for getElementsByClassName is not supported e.g. IE8
        if(matches === 'getElementsByClassName' && !document.getElementsByClassName)
        {
            matches = 'querySelectorAll';
            selector_value = selector;
        }

        // now pass the selector without the key/first character
        el = (((context === undefined) ? document: context)[matches](selector_value));
        return el;
    };

    var elem = getSelectorTest(selector, context, undefined);

    //Extend elem before returning it
    elem.attr = function(name, value) {
    if(value)
    {
        this.setAttribute(name, value);
        return this;
    }
    else
    {
        return this.getAttribute(name);
    }   

    return elem;
};

然后当我运行下面的代码：

<script>
    domReady(function(){ //https://github.com/cms/domready
        var el_1 = $('#container-1');
        el_1.attr("data-test", "random_value");
    });
</script>

我在使用 IE8 时得到以下信息：

<div id="container-1" attr="function(name, value) {
            if(value)
                {
                    this.setAttribute(name, value);
                    return this;
                }
                else
                {
                    return this.getAttribute(name);
                }

        }" data-test="random_value">

当然，当我使用 Chrome 和 Firefox 时情况并非如此（我得到了预期的输出，即 <div id="container-1" data-test="random_value">）。我该如何解决这个问题？

注意：我正在使用 IE8 开发人员工具 (F12) 的 'HTML' 选项卡来验证这一点。

Answer 1

与其将 attr() 函数附加到所选元素（IE8 显然将其解释为在元素本身上设置属性），不如将其附加到 Element 的原型对象。

Element.prototype.attr = function(name,value){ ...

对象扩展后 IE8 中的奇怪 setAttribute 行为

Strange setAttribute behavior in IE8 after Object extend

javascript

internet-explorer-8