跨浏览器,javascript getAttribute()方法？

Question

试图确定一个体面的,跨浏览器的方法来获取javascript属性？假设javascript库使用(jQuery/Mootools/etc.)不是一个选项.

我已经尝试了以下内容,但是当IE尝试使用"else"方法时,我经常得到"属性"为null或者不是对象错误.有人可以帮忙吗？

<script type="text/javascript">
//...
    getAttr: function(ele, attr) {
      if (typeof ele.attributes[attr] == 'undefined'){
        return ele.getAttribute(attr);
      } else {
        return ele.attributes[attr].nodeValue;
      }
    },
//...
</script>


<div>
 <a href="http://www.yo.com#foo">Link</a>
</div>

使用上面的html,在每个浏览器中,我如何getAttr(ele,'href')？(假设选择ele节点不是问题)

Answer 1

对于绝大多数情况,您可以简单地使用内置getAttribute函数.

例如

ele.getAttribute(attr)

根据QuirksMode,这应该适用于所有主流浏览器(包括IE> = 6),但有一个小例外:

在IE5-7中,访问该style属性会给出一个对象,并且访问该onclick属性会给出一个围绕实际内容的匿名函数.

Answer 2

关于你的问题的更新,你可以试试这个.

它可能getAttribute()有点过分,但如果和点符号没有返回结果,它会遍历attributes对象以尝试找到匹配项.

示例: http ://jsfiddle.net/4ZwNs/

var funcs = {
    getAttr: function(ele, attr) {
        var result = (ele.getAttribute && ele.getAttribute(attr)) || null;
        if( !result ) {
            var attrs = ele.attributes;
            var length = attrs.length;
            for(var i = 0; i < length; i++)
                if(attrs[i].nodeName === attr)
                    result = attrs[i].nodeValue;
        }
        return result;
    }
};

var result = funcs.getAttr(el, 'hash');

但是,由您来做一些跨浏览器测试.:O)

使用时ele.attributes,您需要通过索引访问它们,如:

ele.attributes[0].nodeName;   // "id" (for example)
ele.attributes[0].nodeValue;  // "my_id" (for example)

试图通过attributes属性名称似乎其返回值typeof是object,所以你else尽管代码运行,甚至ele.attributes[attr]不给你你想要的值.

Answer 3

如果存在这些属性,您将尝试在建立之前访问ele的属性.试试这种证据链:

if (ele.attributes && ele.attributes[attr] && typeof ele.attributes[attr] == 'undefined')

等等