javascript - 纯 Javascript 中的跨浏览器属性选择

Question

当我出于某种原因无法访问 JQuery 时，我通常使用 element.hasAttribute 或 element.getAttribute 手动执行属性选择。

但是，这里似乎有些复杂，因为较旧的浏览器 (IE <= 8) 不支持 hasAttribute。所以如果你想检查一个元素是否有某个属性，你需要使用getAttribute并检查返回值。

if ((element.hasAttribute && element.hasAttribute("foo"))
    || (element.getAttribute("foo") != null))
{
  ....
}

这让我觉得您还不如完全忘记使用 hasAttribute，而是始终使用 getAttribute。问题是我找不到关于 getAttribute 的返回值 的一致文档。实际上，如果该属性不存在，它会在大多数浏览器上返回 null - 但它也可能返回 empty string ，因为根据 DOM 3 规范，这是它应该做的。

不幸的是，返回一个空字符串让我们无法区分:

<div data-my-attribute = ""></div>

和

<div></div>

因此，在实践中 - 似乎最便携的做法是首先检查浏览器是否支持 hasAttribute，如果不支持，则使用 getAttribute - 从 IE 6 开始-8 实现 getAttribute，以便在属性不存在时返回 null(而不是空字符串)。

这真的是最好的方法吗？或者是否有更好的方法用纯 Javascript 编写跨浏览器属性检测？

Answer 1

以下在 IE6-10(在 IETester 中测试过)、Firefox、Chrome 和 Safari 中运行良好:

function hasAttrib(element, attributeName) {
  return (typeof element.attributes[attributeName] != 'undefined');
}

这是 jsfiddle及其独立的result page (用于在旧版浏览器中进行测试)。