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。