「node.getAttribute('someAttribute')」獲取的是「attribute」，而「node.someAttribute」獲取的是元素的「property」，二者並不相同。 參考 properties-and-attributes-in-html

在大多數情況下「property」和「attribute」是同步的，如場景1。

場景1：

<input id="username" type="text">
<script>
var userInput = document.querySelector('#username');
console.log( userInput.id );                  //"username"
console.log( userInput.getAttribute('id') );  //"username"
</script>
 

這裡 userInput.id 和 userInput.getAttribute('id') 獲取的值相等。

當然我們關注的是例外，如場景2、3、4.

場景2：

<input id="username" type="text" sex="male" age=26>
<script>
var userInput = document.querySelector('#username');
console.log( userInput.sex );                  // undefined
console.log( userInput.getAttribute('sex') );  // "male"
console.log( userInput.getAttribute('SEX') );  // "male"
console.log( userInput.getAttribute('age'));   // "26"
</script>
 

從上面的例子可以得出如下結論：

• 「node.property」的方式不能獲取自定義屬性，「node.getAttribute()」的方式可以獲取自定義屬性
• 「node. getAttribute()」獲取自定義屬性忽略屬性的大小寫
• 「node.getAttribute()」獲取自定義屬性得到的值的型別總是字串

場景3：

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

對於上面的例子，HTML中只要出現了disabled 屬性，不管值是什麼，對於 DOM property結果都是true， 而對於 attribute 獲取的則是把 HTML 裡對應屬性的值拿到轉換成字串。

input 標籤的 checked 也有類似的特性。

場景4：

<a href="/" id="logo"></a>
<script>
var a = document.querySelector('logo')
console.log( a.getAttribute('href') )      // "/"
console.log( a.href )                      // "http://jirengu.com"
</script>

對於 a 連結的 href， 使用 a.getAttribute('href') 就是從 HTML 裡獲取對應屬性的值轉化成字串，而 a.href 則獲取有意義的真實地址。

場景5：

<input id="username" type="text" sex="male" age=28 value="飢人谷">
<script>
var userInput = document.querySelector('#username');
userInput.value = "若愚";
console.log( userInput.value );                  // "若愚"
console.log( userInput.getAttribute('value'));   // "飢人谷"
userInput.setAttribute('value', 'hunger'); 
console.log( userInput.value );                  // "若愚"
console.log( userInput.getAttribute('value'));   // "hunger"
console.log( document.body.innerHTML ) ;  // <input id="username" type="text" sex="male" age=28 value="hunger">
</script>

對於input 的 value， 改變 property 不會同步到 atttribute 上，改變 attribute也不會同步到 value上， attribute對應 HTML， property 對應 DOM。

那到底用哪一種呢？

如果你只是想獲取非自定義的屬性，比如 id、name、src、href 、checked... 用 property 的方式比較符合日常習慣，如果需要獲取自定義屬性那隻能使用 getAttribute。當然具體用哪一種你只要瞭解二者的區別，大膽選用吧~

參考都是精華不容錯過：

1. - javascript - getAttribute() versus Element object properties?
2. - Attributes and custom properties
3. - Properties and Attributes in HTML