元素节点attr和prop区别

html元素节点的attribute&property

元素节点的attrbute和property大家可能都是用过，但是也是容易被大家忽略它俩到底区别在哪里。
想当初在使用jquery时,$(‘ele’).attr(),$(‘’ele).prop(),这两个方法我也是没有深入研究，再后来使用angular的时候有看到attribute和property的区别，今天我好好总结一下。

attribute和property如何使用

// 这样一个input节点
<input id="inp" type="text" value="val" />
// 首先，使用attribute来操作
var nEle = document.getElementById('inp');
nEle.setAttribute('class', 'wrap');
nEle.getAttribute('class');
// 使用property来操作
nEle.index = 1;
nEle.type = 'text';

其实，attribute是在这个元素节点上设置属性，而property是在这个元素节点的dom对象上设置属性。

// 想看看元素节点的attribute属性
nEle.attributes
// 想看看元素节点的property属性
console.dir(nEle);
// 打印出来的内容可以看到attributes也在其中

attribute和property实际区别

<input id="inp" type="text" value="val" />
// 还是这个元素节点
// 页面加载时如果使用getAttribute('value')是可以获取'val'值的，当然，nEle.value也可以获取到
   'val'。
// 但是，如果现在你在input框中，把'val'改成'val123'
// 你再使用getAttribute('value')方式获取到的还是'val',而使用nEle.value可以获取到最新值'val123'
// 从这样一个简单的操作，可以理解为，attribute时html元素上的，而property是html元素对象上的。

其实，两者区别还有很多，这里不一一列举，一个小例子知道其区别就可以了。