DOM系列：Attribute和Property

太过爱你忘了你带给我的痛 2022-03-16 01:52 262阅读 0赞

原文出处：[https://www.w3cplus.com/javascript/dom-attributes-and-properties.html][https_www.w3cplus.com_javascript_dom-attributes-and-properties.html]

这两天一直在看DOM元素的`attribute`和`property`，简单让人晕。从直译上，我一开始都理解为“**属性**”，而且对于我这样的新手，将两者混淆在一起，傻傻的分不清楚。后来经过大大们的指点，知道两者是不同的东西，但两者之间又有紧密的联系。为了能更清晰的整明白两者的关系与不同，所以把自己理解和搜集的资料理了一下，希望对新手有所帮助。

## Attribute和property形象上的描述 ##

文章开头也说了，自己对`attribute`和`property`两者理不清楚，在搜集两者差异的时候，看到了[Web技术研究所][Web]站长对两者的描述，简值是绝了，让初学者一看就易于理解，下面这部分内容直接复制过来了。

`attribute`和`property`都被翻译成“**属性**”，但是它们有着本质上的区别。拿生活中的示例来说，或许对于像我这样的新手更易于理解。

“桌子上有个苹果”。`attribute`仅仅是描述了这个“**有苹果**”的事实，而`property`则是直指那个**桌子上的苹果**。这里的苹果是一个实体，用`attribute`来描述只能说明这个事件的事实。它无法准确的描述出**具体哪个苹果在桌子上**。再举个示例 —— “**我爸是李刚**”。`attribute`仅仅是描述了“**李刚**”这个名字，而`property`则是直接代表“**李刚**”这个人（一个实体）。叫“李刚”这个名字的人很多，所以`attribute`无法确切表示。而`property`则是直指**实体**的，可以准确描述事物。但也不是说`attribute`就绝对无法准确表示事物，只是`attribute`只能用文字描述，所以它要精确描述一个东西的代价是比`property`高了许多。比如描述“**李刚**”可以用他的身份证号码之类的，可是说不定人家的身份证还是伪造的，所以还需要更多的文字描述才能准确的说明一个东西。

那么既然`property`比`attribute`好，为什么还需要`attribute`呢？就说“**我爸是李刚**”这件事吧，过了这么多年了也许很多人都忘了。`property`是保存在记忆（比如计算机的内存`memory`）中的，虽然一开始很准确，但是无法长期保存。我们经常会把需要长期保存的东西用文字描述下来，这时就需要用到`attribute`。而且`attribute`和`property`并不冲突，我们经常会翻阅一些旧资料来补充我们渐淡的记忆。

这些就是它们本质上的区别，在程序中我们可以用另外的方式说明它。`attribute`是标记语言的概念（比如HTML语言），而标记语言本身就是一种文本，所以`attribute`这种文本描述的性质在标记语言中很容易使用。而`property`则是保存在内存中，而内存会随着程序运行结束被释放，因此变得无法长期储存。在JavaScript中，DOM对象通常都是多重继承的。同时继承了HTML和JavaScript的`Object`。`Object`是完完全全的内存对象，所以使用的是`property`，而HTML本身就是标记语言，所以使用的是`attribute`。当这两个东西被继承到同一个对象上的时候经常会让人混淆起来。由于一些`attribute`是很常用的，比如`id`、`class`等，所以DOM把它们映射到`property`上以方便使用。这样我们就会遇到一个对象同时具有`id`这个`attribute`和`property`（由于`class`是保留字，所以它被映射到`property`上时变成`className`）。

虽然被DOM这样一搞，初学者易于混淆`attribute`和`property`。但上面的比喻，估计有帮助初学者易于理解。但要更清晰的理解，还是有必要通过示例来阐述。接下来，我们回到我们的代码世界当中。

## attribute和property的定义 ##

其实上面的示例描述，对`attribute`和`property`已经定义的非常清晰。如果我们从生活中的示例回到JavaScript的世界中来。

`property`指的是DOM的`property`，是元素属性。DOM中的节点事实上是一个对象，因此，可以添加自定义属性以及方法。使用对象访问属性的方式，可以访问到DOM节点的每一个`property`的属性。比如下面这个`input`元素：

我们使用`.`符号来获取或者重置DOM节点的`property`。

![dom-attributes-properties-3.png][]

这个时候，我们回过来查看`input`元素，对应的一些属性已被重置了，结果如下图所示：

![dom-attributes-properties-4.png][]

从上面我们可以发现，对于自定义的`attribute`，如果通过`.`符号来获取，其值是`null`。同样的，自定义的`property`也不会出现在HTML的元素中，只会存在JavaScript中。另外，`property`的值可以是任何的数据类型，对大小写也敏感。

而`attribute`是指标签属性，也就是HTML元素指定的属性，比如上面`input`元素中的`id`、`class`之类的。在浏览器的控制台中，可以通过`attributes`获取元素中所有的`attribute`。可以通过`for`循环，将对应的`attribute`打印出来，比如：

for (let i = 0; i < $0.attributes.length; i++) {
        console.log($0.attributes[i])
    }

大家一看浏览器打印的结果就一目了然了：

![dom-attributes-properties-5.png][]

从上面的操作结果来看：

> **`attribute`是`property`的子集。**

但不幸的是，浏览器并不是这样理解的。不过至于为什么，我也说不清楚，就不在这阐述了，以免误人子弟。

而W3C规范规定`property`和`attribute`的含义却如下图所示：

![dom-attributes-properties-6.png][]

从上图中可以看出来其分为三个部分：

**Standard Attribute**：标准属性（也被称为固有属性），比如示例中的`id`、`name`、`class`等DTD、Scheme中定义的标签属性。它的特点是，可以通过点方式或`getAttribute`都可以访问和重置。比如下图所操作的结果：

![dom-attributes-properties-7.png][]

**Custom Property**：自定义属性，通过点方式访问、设置非DTD/Scheme中定义的标签属性。它的特点是仅能通过点方式操作属性。但在HTML的`attribute`中并无法显示出来，只能在JavaScript中显式。

![dom-attributes-properties-8.png][]

**Custom Attribute**：自定义特性（显式特性），直接在HTML标签元素或者通过`getAttribute`(或`setAttribute`)访问、重置的非DTD/Scheme中定义的标签属性。其特点是可以在HTML标签中显式声明自定义特性，比如示例中的`myAttr="my-attri"`。另外可以通过`getAttribute`获取在HTML标签中设置的特性，以及使用`setAttribute`重置该特性。

> 查阅的一些文档，获知从IE8开始各大浏览器在这方面就遵守W3C标准。

## attribute和property概念上的差异 ##

如果仅从`attribute`和`property`两单词上直译过来 —— **“属性”**。但为了更易于区分，更喜欢把`attribute`称为“**特性**”，`property`称为“**属性**”。回到JavaScript的DOM世界中来。先从他们的概念上来做一个简单的区分。

**`attribute`**是HTML标签上的某个属性，比如我们常见的`id`、`class`、`value`和`onclick`等属性，以及一些自定义的属性，比如大家熟悉的`data-*`，甚至像`myAttr`这样的自定义属性。比如：

在浏览器开发者工具中，通过`properties`可以查看到`attributes`具体的值，其对应的正好是HTML标签`input`中的`attributes`。

回过头来看**`properties`**，其主要是JavaScript获取DOM对象上的属性值。而且它是作为JavaScript的基本对象。这个节点包括很多`property`，比如`classList`、`className`之类的。比如下图：

![dom-attributes-properties-1.png][]

从上图中，我们可以看出来，一个JavaScript对象有很多`property`，该集合名字为`properties`，`properties`里面有其他`property`以及`attributes`。而`attributes`里面有很多`attribute`，比如上面示例中的`input`元素中的`id`、`class`之类的。

在JavaScript中,DOM的`property`可以通过`.`符号或`[]`来获取，比如：

![dom-attributes-properties-2.png][]

而DOM的`attributes`则可以通过`setAttribute`、`getAttribute`和`removeAttribute`来做相应的处理，这个后面我们会做一些相关的介绍。

## `attributes`和`properties`使用上的差异 ##

通过上面的介绍，估计大家对`attributes`和`properties`或多或少有所了解了。但在实际的使用上还是略有差异的。我们来看看一些使用场景的差异性。

同样拿上面的`input`举例。在具体操作之前，简单的回忆和总结一下：

在HTML标签元素上的`attribute`，不管是标准的还是自定义的，它都是`attributes`这个`Object`的子集，而`attributes`又是`properties`的子集。同时，HTML标签元素上的标准的`attribute`同时也是DOM的`property`，它们也是`properties`的子集。

为了从语义上对其有所差异性的区分，把`attribute`称为**HTML Attribute**，译为**特性**，把`property`称为**DOM Property**，译为**属性**。

在实际使用的时候，`property`通过`.`（或`[]`）来访问HTML标签元素上的标准的`attribute`，也可以通过其来重置其值；但对于自定义的`attribute`通过`.`符号获取的值是`undefined`，不过可以通过`.`来重置它，需要注意的是，虽然重置了，但并不会修改HTML标签中自定义的`attribute`值，它只会存在JavaScript中。

对于HTML标签元素中的`attribute`，不管是标准的，还是自定义的，都可以通过`getAttribute`来获取，通过`setAttribute`来重置，还可以使用`removeAttribute`来删除。

先来看通过`.`符号获取、重置标准与非标准的`attribute`。结果如下：

![dom-attributes-properties-9.png][]

我们再来看`getAttribute`、`setAttribute`和`removeAttribute`对HTML标签的标准（和非标准的）`attribute`的操作：

![dom-attributes-properties-10.png][]

通过`for`循环把操作过的`attributes`打印出来，看修改后的结果：

![dom-attributes-properties-11.png][]

上面的小示例再次验证了：

> **`property`和`attribute`对HTML标签的标准的`attribute`（比如，`name`、`id`、`class`）会相互影响；但`property`对于HTML标签的非标准的`attribute`做的相应修改，不会影响到HTML标签中的`attribute`，但会存在JavaScript的DOM中的`property`**。

上面的示例，看到的是`property`和`attribute`对HTML标签原有的标准和非标准的`attribute`进行的操作。接下来看另一个场景，新增标准和非标准的属性。先来看`property`增加属性：

![dom-attributes-properties-12.png][]

再来看看`attribute`增加属性。使用`attribute`给HTML标签增加属性，使用的是`setAttribute`方法。比如下图所示：

![dom-attributes-properties-13.png][]

使用`setAttribute`给HTML标签添加`attribute`，不管是标准的，还是非标准的都能添加到HTML的标签中。比如上面的操作，我们通过`for`循环操作之后，可以看到元素`input`的`attributes`中包含了哪些`attribute`以及其对应的值：

![dom-attributes-properties-14.png][]

虽然我们通过`.`符号或者`getAttribute`、`setAttribute`可以获取和重置HTML的`attribute`。而且`property`和`attribute`很多时候能做到一一对应，但有些属性还是无法相互影响的。比如`input`的`value`。接下来通过实际示例来阐述。

![dom-attributes-properties-15.png][]

上图的结果，我想更易于说明一切。但也还有另我的场景，比如说，用户在`input`中输入了新的值，`property`和`attribute`重新获取和重置的`value`将会是什么样的结果呢？我把整个过程录制下来了，大家可以看看其中的差异。

![dom-attributes-properties-16.gif][]

如果上图不好复原，咱们将上面的过程分步来看。

![dom-attributes-properties-17.png][]

从上图的结果来看，用户在`input`新输入值之后，`attribute`通过`getAttribute`重新获取的`value`值依旧是HTML标签元素中`attribute`的值，但`property`并不一样，通过`.`符号获取的值就是用户新输入的值。

再来看第二种情形：

![dom-attributes-properties-18.png][]

先用`property`重置`input`的`value`值，这个时候`property`的`.`符号重获的`value`值是`property`重置后的值，但`attribute`的`getAttribute`获取的还是HTML标签元素中`attribute`的值。接着用户在`input`中输入新的值，这个时候再次使用`property`获取`value`的值，从结果上可以看出来，获取到的是用户新输入后的值，但`attribute`还是依旧不变。

还有一种情况是，先用`attribute`的`setAttribute`来重置`input`的`value`值，比如下图所示：

![dom-attributes-properties-19.png][]

结果一目了然了，`property`和`attribute`获取的值都是`attribute`重置后的`value`值。但用户在`input`中输入新的值，`property`获取的是用户新输入的值，而`attribute`还是最初`setAttribute`设置的`value`值。

简单的小结一下：

> `attribute`的`value`值只在初始化的时候跟`property`一样，使用`getAttribute`获取的值是初始化的值，如果没有设置则是空，除非使用`setAttribute`手动去改变，但这个改变也不会影响到`property`的值。`property`的`value`值是`input`实时输入的值，但该值的改变同样也不会影响`attribute`的`value`值。

上面看到的只是其中的一部分，其实还有很多场景也会略有不同。比如`input`这样的表单元素中的`disabled`、`checked`等属性，以及元素的`hidden`属性。这里就不再罗列了，感兴趣的同学可以自己在浏览器的控制台中，像上面这样一个一个尝试一下，我想只要你尝试了一定会很清晰的明白。下面简单的罗列几个常见的不同之处：

对于有些标准的特性的操作，`element.getAttribute`和`element.property`获取的值存在差异性。比如`href`、`src`、`value`、`style`和`onclick`等:

*  `element.getAttribute`获取的是`href`的实际值，`element.property`获取的是完整的`url`
 *  `element.property`可以从`element.setAttribute`获得同步
 *  `element.getAttribute`不能从`element.property`获得同步
 *  `element.getAttribute`只能获得输入框的原始值，`element.property`可以获取输入框修改后的值
 *  对于`checkbox`时，未选中时，`element.getAttribute`返回的是`null`，`element.property`返回的是`false`；反之，选中时，`element.getAttribute`仍返回`null`，`element.property`返回的是`true`
 *  对于`style`标签，`element.getAttribute`返回的是`string`，而`element.property`返回的是`object`

除了有差异性之外，`attributes`和`properties`也有相同之处：

> 标准DOM的`properties`（DOM属性）与`attributes`（HTML Attribute，即标签特性）是同步的。公认的`attributes`会添加到DOM对象`property`上，比如`id`、`style`、`className`、`disabled`和`checked`等。这时候直接操作`property`（也就是`element.checked`）或者使用`element.getAttribute`（或`element.setAttribute`）效果是一致的。但是参数不一定相同，比如`element.className`和`element.getAttribute('class')`两者获取的元素的`class`。

## 总结 ##

如果你要是阅读到这里的，说明你有足够多的耐性。花了不少的时间，听我胡扯许久，但我还是希望上面的内容没有对你们造成误解，或者对你们有所帮助。最后再花一点时间稍微总结一下下。

`property`和`attributies`都是`properties`的子集，而每个`attribute`是`attributies`的子集。`attribute`指的是HTML的`Attribute`，可以理解为HTML的特性，它们可以自定义，可以在HTML标签元素上添加`attribute`或者使用`setAttribute`添加（这两者添加的方式不一样，但结果一样）。大多数情况之下，HTML标签添加的都是`attribute`属性，`property`则是使用`.`符号进行更改。通常来讲，更自以为是相互影响（但也有不一样的地方，比如`input`的`value`）。另外，当添加的是非标准的属性时，`property`和`attribute`是不互通的。除此之外，一些特殊属性则需要特殊对待。

在实际应用当中，大部分DOM操作都是使用`properties`来完成。但有些情形之下，使用`attributes`更为适合，比如：在自定义HTML的`attributes`，因为它并不同步到DOM的`property`。还有就是访问内置HTML的`attributes`（设置的初始值），`attribute`不能从`property`同步过来，典型的就是前面向大家展示的`input`的`value`。

著作权归作者所有。  
商业转载请联系作者获得授权,非商业转载请注明出处。  
原文: [https://www.w3cplus.com/javascript/dom-attributes-and-properties.html][https_www.w3cplus.com_javascript_dom-attributes-and-properties.html] © [w3cplus.com][]

[https_www.w3cplus.com_javascript_dom-attributes-and-properties.html]: https://www.w3cplus.com/javascript/dom-attributes-and-properties.html
[Web]: https://www.web-tinker.com/article/20115.html
[dom-attributes-properties-3.png]: /images/20220316/ecd4ce20669346819ff9ce84fe0ce2a0.png
[dom-attributes-properties-4.png]: /images/20220316/58f17e7145cc43cba1c1b880ef6a9800.png
[dom-attributes-properties-5.png]: /images/20220316/e0877c33f6b147d298ecd8aeb0ee9229.png
[dom-attributes-properties-6.png]: /images/20220316/06b61bf67a7a47e6a04bc69a256e6bbc.png
[dom-attributes-properties-7.png]: /images/20220316/23f37368d4bf4377b94509b0a9774fa6.png
[dom-attributes-properties-8.png]: /images/20220316/49e6b7b1e833475aa879c02b839c14fb.png
[dom-attributes-properties-1.png]: /images/20220316/4275a14404ee4e99b3ebe26826f72fde.png
[dom-attributes-properties-2.png]: /images/20220316/c4324e26cbb7475b87fd97aa2d079412.png
[dom-attributes-properties-9.png]: /images/20220316/39597cf5ad6d4573baf36269975dfc4e.png
[dom-attributes-properties-10.png]: /images/20220316/47e275c7ab8744c88fc0954d24eefac9.png
[dom-attributes-properties-11.png]: /images/20220316/960c96d911fc4faba47eb021a21a54fe.png
[dom-attributes-properties-12.png]: /images/20220316/12a49fb0697e4865a0e79a3e28030047.png
[dom-attributes-properties-13.png]: /images/20220316/a523b869c270457ab5920c02c9226507.png
[dom-attributes-properties-14.png]: /images/20220316/6e89e8656c9c4ad783f38f0f08d0d4cb.png
[dom-attributes-properties-15.png]: /images/20220316/b85d31d82d8b42019972a0c6eb4e21cc.png
[dom-attributes-properties-16.gif]: /images/20220316/8d3566ae04e848d59da0556c714d4bad.png
[dom-attributes-properties-17.png]: /images/20220316/f1f41acafdea481ab2ed0dc01b1b5b41.png
[dom-attributes-properties-18.png]: /images/20220316/bf493b4e403e485ba51e770eac401f13.png
[dom-attributes-properties-19.png]: /images/20220316/a2db31cc9a3846168b86fd73c1cb0c6c.png
[w3cplus.com]: https://www.w3cplus.com/