一個案例搞明白DOM property 和 attribute的區別

property 和 attribute 兩個意思都是屬性的,看網上的說明,都跟繞口令一樣

參考

 中文的, https://blog.csdn.net/rudy_zhou/article/details/104058741

英文的 https://stackoverflow.com/questions/6003819/what-is-the-difference-between-properties-and-attributes-in-html#answer-6004028

直接看兩張圖就清楚了

因為jQuery v1.6.1發佈,開始討論兩者的區別的,直接用Juery打印下

<input type='text' id='test' value='123' />
<script>   
$(document).ready(function(){
var test=$('#test');
console.log(test)
});
</script>

 來看下<input type='text' id='test' value='123' />里的type屬性

 1.attribute屬性,Dom節點下有個單獨的attributes屬性(此attributes屬於property ),attributes下面有type屬性(是attribute),對應值為text

2.property屬性

总结

attribute是dom節點property的attributes下面的值,通過setAttribute/attr修改屬性,發現兩者存在映射關係,不過超過input的type值的範圍時,type(property)屬性會變成text,而type(attribute)變化成修改的值