以前經常把attr和prop搞混，由於它們在許多場景用法其實是一樣的，因此也沒有出現大的差錯。直到最近，寫項目被一個bug困擾很久，才意識到attr和prop的區別。
這裏整理一下異同點。
這裏我寫了一個簡單的demo設置了一些不同的屬性在div上
<style>
.hes{
height: 200px;
}
.left{
float: left;
}
</style>
</head>
<body>
<div id="no1" data-person="小明" data-id="testA" style="display: inline-block;border: 1px solid #ddd;" class="hes left">text</div>
</body>先對比class
這裏可以看到class 兩個屬性獲取的是完全一樣的。
接着對比 data-person和data-id
這裏我們就可以發現，prop在獲取元素自定義屬性的時候獲取不到了，但是attr能夠獲取到。
接下來對比style
很明顯attr只是獲取屬性等號後面的值，而prop則是深度全面的獲取style在這個標籤上的詳細信息，但是並不包括前置style表中通過.hes 和 .left 賦予的style屬性。
我們可以看到，雖然在前置style裏設置了
<style>
.hes{
height: 200px;
}
.left{
float: left;
}
</style>
當我們對比attr無法獲取的屬性時，我們用另一個例子來比較
<input id="check1" type="checkbox" checked>
<input id="check2" type="checkbox">
這裏就可以發現 在這 當標籤中沒有checked 屬性時attr 是獲取不到的，而當有checked屬性時 attr獲取的值是“checked”而非true，其實等同於checked="checked"獲取到的值。
而prop則是全部都按照true和false來判斷
經過上述這些，我們來個總結會發現
prop獲取到的是標籤的固有屬性，本身就有的屬性，並且獲取到的信息更深層次，例如：checked和style爲例。
attr獲取到的是標籤定義屬性（注意：固有屬性只要在標籤中寫了，也算是被定義可當做定義屬性），獲取到的值一般是等號後面所對應的值，更爲直觀。即使沒有等號，入checked這種情況，也默認爲checked="checked"