检索HTML属性值"DOM 0方式"

Question

jQuery有一个attr()方法可以检索给定HTML属性的值.例如:

var foo = document.getElementById("foo");
$(foo).attr("id");

但是,在性能方面,这不是最佳的,因为必须创建jQuery对象才能调用该attr()方法.这表现得更好:foo.id.

所以,理想情况下我们希望避免使用attr().但是,我们可以这样做(对于任何属性)？我相信foo.id并且foo.value是"安全的"(跨浏览器),但我记得有问题foo.href.

以下是我希望能够"直接"检索的各种属性的列表:

对于任何元素:foo.id,foo.name
用于锚定:foo.href,foo.target,foo.rel
对于图像,对象,内置页框:foo.src,foo.width,foo.height
对于表单元素:foo.checked,foo.selected,foo.disabled,foo.readonly,foo.type,foo.value,foo.action

所以问题是:上述表达式是否跨浏览器？我可以安全地使用它们吗？

检查此问题的文章的链接也很不错.

编辑(基于答案):粗体表达式使用不安全!

Answer 1

jQuery的attr()方法被误导性地命名,记录错误并且隐藏了一个非常重要的区别:属性和属性之间的差异,许多Web开发人员似乎很难理解,特别是那些介绍JavaScript的人来自jQuery.

如果你不再阅读,那就把它拿掉:你几乎不需要使用属性.使用相应的属性几乎总是更好.实际上,这是jQuery的attr()方法在1.6版之前通常用来做的事情.

使用属性并避免getAttribute()和setAttribute()处理HTML DOM时的原因:

• IE的实施被打破了.在较新版本和更新版本的怪癖模式中,属性直接映射到属性,这与DOM标准相反.这样做的一个结果是onclick在IE中彻底破坏了事件处理程序属性(等).始终将属性用于事件处理程序.这样做的另一个结果是,在这些模式和版本中的IE要求您使用getAttribute("className")而不是getAttribute("class")检索class属性.
• 通过跨浏览器(大多数)一致地实现属性
• 某些属性和属性之间的关系并不像您想象的那样.某些属性(尤其value是<input>元素的属性)不会与具有相同名称的属性绑定:一旦输入的值(通过用户或脚本)发生更改,获取或设置value属性将无效.而是,该value属性与属性同步defaultValue.
• 属性通常更方便.例如,考虑布尔属性,例如checked:这在DOM中表示为布尔checked属性,而混淆则指出如何使用属性设置复选框的选中性.是removeAttribute("checked")吗？setAttribute("checked", "")？setAttribute("checked", false)？一切都错了,因为该checked属性实际上映射到defaultChecked属性.

在某些情况下,可能需要使用属性.例如,元素的href属性<a>始终报告完全限定的URL,同时getAttribute("href")将href逐字返回HTML 属性中指定的字符串.当然,除了在IE中.jQuery attr()确实尝试规范化这种不一致性.

有关此主题的更多信息:http://reference.sitepoint.com/javascript/Element/setAttribute,以及来自MSDN的信息:http://msdn.microsoft.com/en-us/library/dd347148%28v=vs 0.85%29.aspx

最后,我强烈建议尽可能直接使用DOM属性,而不是使用jQuery的attr()方法,但是有一些特殊情况(例如href)它需要知道它处理.在您提到的属性中,所有这些属性都可以完全安全地使用跨浏览器,但以下情况除外:

• foo.href和foo.src(如同上面提到的类似问题).
• foo.type只能在<input>元素添加到DOM之前设置它.
• foo.selected(其中foo是一个<option>元素)显然在旧版本的Safari中有一个错误,如另一个答案所述.