首先来看一下他们的概念：
特性(Attribute):是DOM元素在文档中作为html标签拥有的属性；
属性(Property):是DOM元素在js中作为对象拥有的属性；
首先来了解一下DOM的五个标准特性（id、title、lang、dir、class）
对于标准特性来说，Attribute和Property是同步的，是会自动更新的，
对于自定义的特性来说，他们是不同步的（自定义的特性不会自动
添加到property）
HTML5规范对自定义特性做了增强，只要自定义特性以"data-attrName"
的形式写入到html标签中，在DOM属性中就可以通过element.dataset.attrName
的形式来访问自定义特性
特性/属性的数据绑定：
对于value和class来说，数据绑定是单方向的（Attribute==》property）
对于id、dir、title来说数据绑定是双向的（Attribute==》property、property
==》Attribute）
每一个元素都有一个或多个特性，用途是给出相应元素或其内容的
附加信息。通过DOM元素直接操作特性的方法有：
.getAttribute（attrName）
.setAttribute（attrname，value）
.removeAttribute（attrName）
操作属性则直接用"."操作符
举个栗子：
<div class="juzhong"> <p id="p1" class="c1" title="t1" dir="ltr" jj="gg"> 这是一段文字</p></div>
首先用const aa=document.querySelector("p");来获取一个元素的引用
然后你就可以来操作相应的属性：
获取：aa..id
修改：aa.id="p2"（此时相应的特性也会随之改变）
此处声明：特性class对应的属性名为className；属性Property可以赋任何类型的值
，而特性Attribute只能赋值字符串！
原文地址：https://www.cnblogs.com/muhuck/p/10859056.html