web前端 属性与特性

以Input举例

<input type="text" id="input" class="input" data="something">

特性

指标签与生俱来的属性
如 id,class,type等

标签特性与DOM对象程一一对应关系,相互影响

var oInput = document.getElementById("input");
console.log(oInput.id); //input
oInput.id = "change"; //<input id="change">
console.log(oInput.id); //change

属性

包含特性,以及作者自己添加的属性
如: data

标签属性(除特性)与DOM对象无对应关系

var oInput = document.getElementById("input");
console.log(oInput.data); //undefined
oInput.data = "nothing"; //<input data="something"> 不能影响标签
//获取自定义属性
oInput.getAttribute("data"); //something
//设置自定义属性
oInput.setAttribute("data","nothing"); //<input data="nothing">
oInput.getAttribute("data"); //nothing