1. 程式人生 > >button.disabled 和 button.getAttribute('disabled') 有什麼區別?

button.disabled 和 button.getAttribute('disabled') 有什麼區別?

 

「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