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

痛定思痛。 2022-02-23 01:08 259阅读 0赞

# \[博文\]内容属性（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 91 开始，内容属性不再连接到 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 任然会得到有价值的定义` ↩