node.getAttribute('someAttribute')和node.someAttribute的區別

「node.getAttribute(‘someAttribute’)」獲取的是「attribute」,而「node.someAttribute」獲取的是元素的「property」,二者並不相同。

在大多數情況下「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:

<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="aa">
<script>
var userInput = document.querySelector('#username');
userInput.value = "bb";
console.log( userInput.value );                  // "bb"
console.log( userInput.getAttribute('value'));   // "aa"
userInput.setAttribute('value', 'cc'); 
console.log( userInput.value );                  // "bb"
console.log( userInput.getAttribute('value'));   // "cc"
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。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章