前端谈：AttributeVSProperty第一个问题：什么是attribute&whatisproperty？属性是我们在html代码中经常看到的键值对，例如：上面代码中的input节点有三个属性：id:the-inputtype:textvalue:Name:property是属性对应的DOM节点的对象属性（Object字段），例如：HTMLInputElement.id==='the-input'HTMLInputElement.type==='text'HTMLInputElement.value==='Name:'第二个问题：从上面的例子看，attribute和property好像是一样的，那么它们有什么区别呢？我们再看一段代码：//页面加载后，我们在这个input中输入“Jack”注意这个为type代码段中的属性，我们给的值是错字，不属于输入支持的类型。我们来看看上面输入节点的属性和属性。//属性仍然保持原始值input.getAttribute('id')//the-inputinput.getAttribute('type')//typoinput.getAttribute('value')//Name://属性是一个不同的故事input。id//the-inputinput.type//textinput.value//Jack可以看到在属性中，该值仍然是html代码中的值。在属性中，type自动更正为text，value随着用户更改输入，它也更改为Jack。这就是attribute和Property的区别：attribute在html代码中会一直保持初始值，而Property可能会发生变化。其实我们从这两个词的名字出发也能看出一些端倪：attribute在语义上更倾向于不可变，property在语义上更倾向于生命周期中的可变。Attribute或Property可以自定义吗？先说结论：attribute可以是property不可以，我们可以尝试在html中自定义属性：然后我们尝试获取自定义属性：.getAttribute('customAttr')//客户属性值输入。customAttr//undefined可以看出，我们可以成功获取到自定义属性，但是获取不到property。其实不难理解，DOM节点在初始化的时候会将html规范定义的属性赋值给property，而自定义的属性不属于这个氛围，自然生成的DOM节点也不有这个属性。一些补充需要注意的是，有一些特殊的属性，它们对应的Property名称会发生??变化，比如：for(attr)=>htmlFor(prop)class(attr)=>className(prop)（如果我们追查到DOM的源码，我们应该可以列一个表：哪些属性名会对应哪些属性，有兴趣的可以试试）关于attribute和这两个属性的区别，stackoverflow上有一些有趣的讨论：https：//stackoverflow.com/a/6...有些人认为属性的值代表defaultValue，而DOM节点的属性是另外一回事。例如：check(attr)对应defaultChecked(prop)，value(attr)对应defaultValue(prop)。关于我们在attribute中取值的限制（比如inputtype的有效值），可以参考这个链接：https://www.w3.org/TR/html5/i...想了解更多关于D3.js和数据可视化？这是我关于D3.js和数据可视化的github地址。欢迎star&forkD3-blog如果您觉得本文不错，不妨点击下方链接关注一下：）github主页知乎专栏掘金想直接联系我？邮箱：ssthouse@163.com微信：
