另一種說法：有些例如id怎憋、class和title等常用的attribute已經(jīng)被作為property附加在了DOM對象上又碌，也可以取值和賦值，但是自定義的attribute或者自定義的property绊袋，兩者就沒有關(guān)系了

<div id="div1">demo</div>

<script>
    var div = document.getElementById('div1')
    console.log(div.getAttribute('id'))  // div1
    div.id = div2
    console.log(div.getAttribute('id'))  // div2
</script>

上面代碼div的 id attribute可以用 div.id 取到赠橙，通過property更改id后，用getAttribute獲取的id是更新后的id愤炸。

<div class="container"></div>

<script>
    var ct = document.querySelector('.container')

    ct.setAttribute("num", 1)
    ct.num  // undefined

    ct.sum = "2"
    ct.getAttribute("sum")  //null
</script>

對于自定義的attribute和自定義的property，兩者沒有關(guān)系并不能相互取值和影響

區(qū)別：

1. 去上面的例子掉奄，對一些常見的屬性來說规个，attribute和property共享數(shù)據(jù)凤薛，而且attribute更改了會對property造成影響，反之亦然诞仓。但是兩者的自定義屬性是獨(dú)立數(shù)據(jù)缤苫，即使屬性名字一樣，也互不影響墅拭。但是活玲，IE 67沒有作區(qū)分，依然共享自定義屬性數(shù)據(jù)谍婉。

<input id="test" type="checkbox" checked="checked" sex="male" age="20">
<script>
    var ipt = document.querySelector('#test')
    ipt.getAttribute("sex") // "male"
    ipt.getAttribute("SEX") // "male"
    ipt.sex // undefined
    ipt.getAttribute("age") // "20"
</script>

這里也說明：
1)在HTML里自定義的屬性舒憾，node.property 的方式不能獲取，node.getAttribute() 的方式可以
2)node.getAttribute() 獲取自定義屬性忽略屬性的大小寫
3)node.getAttribute() 獲取自定義屬性得到的值的類型總是字符串

2. 并不是所有的attribute與對應(yīng)的property名字都一致穗熬，比如attribute的class屬性镀迂，使用property操作的時(shí)候應(yīng)該是className。 ct.className // container
3. 對于值是true/false的property唤蔗，類似于input的checked attribute等探遵，attribute取得值是HTML文檔字面量值，property是取得計(jì)算結(jié)果妓柜，property改變并不影響attribute字面量箱季，但attribute改變會影響property計(jì)算。

<input id="test" type="checkbox">
<script>
    var ipt = document.querySelector('#test')

    ipt.checked  // false

    ipt.setAttribute('checked', 'checked')
    ipt.getAttribute('checked')  // null
    ipt.checked  // true

    ipt.checked = false
    ipt.getAttribute('checked') // checked
    ipt.checked  // false
</script>

對于button來說棍掐，下面的例子藏雏，HTML中只要出現(xiàn)了disabled 屬性，不管值是什么塌衰，對于 DOM property結(jié)果都是true诉稍， 而對于 attribute 獲取的則是把 HTML 里對應(yīng)屬性的值拿到轉(zhuǎn)換成字符串。

<button id="btn" disabled>點(diǎn)我</button>
<script>
var btn = document.querySelector('#btn');
console.log( btn.disabled );                  // true
console.log( btn.getAttribute('disabled') );  // ""
</script>
<button id="btn" disabled=false>點(diǎn)我</button>
<script>
var btn = document.querySelector('#btn');
console.log( btn.disabled );                  // true
console.log( btn.getAttribute('disabled') );  // "false"
</script>

4. 對于一些和路徑相關(guān)的屬性最疆，兩者取得值也不盡相同杯巨，同樣是attribute取得是字面量，就是從 HTML 里獲取對應(yīng)屬性的值轉(zhuǎn)化成字符串努酸，而property取得是計(jì)算后的完整路徑服爷，獲取有意義的真實(shí)地址。

<a id="test2" href="#">test2</a>
<script>
    var a = document.getElementById('test2')
    console.log(a.getAttribute('href'))  // "#"
    console.log(a.href)  // "file:///C:/Users/.../demo.html#"
</script>

5. 對于input 的 value获诈， 改變 property 不會同步到 atttribute 上仍源，改變 attribute也不會同步到 value上， attribute對應(yīng) HTML舔涎， property 對應(yīng) DOM笼踩。

<input id="test" type="text" sex="male" age="20" value="這是一個textInput">
<script>
    var ipt = document.querySelector('#test')
    ipt.value = "this is a textInput"
    console.log(ipt.value)   // "this is a textInput"
    console.log(ipt.getAttribute('value'))   // "這是一個textInput"

    ipt.setAttribute('value', 'It is textInput')
    console.log(ipt.value)   // "this is a textInput"
    console.log(ipt.getAttribute('value'))   // "It is textInput"
    console.log( document.body.innerHTML )   // <input id="test" type="text" sex="male" age="20" value="It is textInput">
</script>

如果你只是想獲取非自定義的屬性，比如 id亡嫌、name嚎于、src掘而、href 、checked... 用 property 的方式比較符合日常習(xí)慣于购，如果需要獲取自定義屬性那只能使用 getAttribute袍睡。

attr( )和prop( )區(qū)別

在一些特殊的情況下，attributes和properties的區(qū)別非常大肋僧。在jQuery1.6之前斑胜，.attr()方法在獲取一些attributes的時(shí)候使用了property值，這樣會導(dǎo)致一些不一致的行為嫌吠。在jQuery1.6中止潘，.prop()方法提供了一中明確的獲取property值得方式，這樣.attr()方法僅返回attributes居兆。

比如覆山，selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, 和defaultSelected應(yīng)該使用.prop()方法獲取/設(shè)置值。 在jQuery1.6之前這些不屬于attribute的property需要用.attr()方法獲取泥栖。這幾個并沒有相應(yīng)的attibute簇宽，只有property。

然而關(guān)于checked 屬性需要記住的最重要的一點(diǎn)是：它和checked property并不是一致的吧享。實(shí)際上這個attribute和defaultChecked property一致魏割，而且只應(yīng)該用來設(shè)置checkbox的初始值。checked attribute并不隨著checkedbox的狀態(tài)而改變钢颂，但是checked property卻跟著變钞它。因此瀏覽器兼容的判斷checkebox是否被選中應(yīng)該使用property

if ( elem.checked )
if ( $( elem ).prop( "checked" ) )
if ( $( elem ).is( ":checked" ) )

這對其它一些類似于selected、value這樣的動態(tài)attribute也適用殊鞭。

在IE9之前版本中遭垛，如果property沒有在DOM元素被移除之前刪除，使用.prop()方法設(shè)置DOM元素property（簡單類型除外：number操灿、string锯仪、boolean）的值會導(dǎo)致內(nèi)存泄露。為了安全的設(shè)置DOM對象的值趾盐，避免內(nèi)存泄露庶喜，可以使用.data()方法。

附上使用場景如下：

使用場景

參考：
若愚：button.disabled 和 button.getAttribute('disabled') 有什么區(qū)別救鲤？
謙行：jQuery的attr與prop