JavaScript の 内容属性（HTML属性attribute）和 DOM 属性（property）

[博文]内容属性（HTML属性）和 DOM 属性

标签： 博文 JavaScript

---

---

粗略解读（与jQuery作对比）

• 内容属性（HTML属性） : attribute

• DOM 属性（Element属性） : property

• jQuery 中的：attr() 对应原生JS中的 setAttribute() / getAttribute;

• jQuery 中的：prop() 对应原生JS中 DOM对象.property;

---

在IE中

• 在更早版本的 Windows Internet Explorer 中，内容属性在 JavaScript 对象上表示为文档对象模型 (DOM) expando。

  即： HTML属性attr === DOM属性prop

• 从 Windows Internet Explorer 9¹ 开始，内容属性再也不链接到 DOM expando，这提升了 Internet Explorer 和其余浏览器之间的可互操做性。

  即IE10+中： HTML属性attr !== DOM属性prop

---

解读

• “内容属性-attr”在是 HTML 源中指定的属性，例如，<element attribute1="value" attribute2="value">。许多内容属性都做为 HTML 的一部分进行预约义；HTML 还支持其余用户定义的内容属性。

• “dom属性-prop”是从 JavaScript 中的对象检索的值，可经过 . 运算符得到值， 例如 document.all["myelement"].domExpando。JavaScript 还支持其余用户定义的属性。

---

约定

由于IE9+ 经过 var divExpando = div.myAttr; 的方法得到 内容属性（HTML属性）会致使 获得一个未定义的值，因此咱们约定使用代码：

var divExpando = div.getAttribute("myAttr"); // 获得有价值的HTML属性

---

---

1. 在 IE8 和之前版本中（包括 IE8 标准模式和 IE9 中的之前模式），仍然存在 myAttr 内容属性 表示存在 myAttr DOM expando ：var divExpando = div.myAttr; // divExpando 任然会获得有价值的定义 ↩