使用.添加属性和使用setattribute的区别

< div  id= "ht" >HTML5</div>

<span id="html4">HTML4</span>

var sp = document.getElementsByTagName("span")[0];
sp.id = "html5";
console.dir(sp);
var ht = document.getElementById("ht");
ht.index = 123;//ht = {index:123,attributes:...},不会显示在标签上
console.dir(ht);
alert(ht.index);
//此种方式添加到 ht = {attributes:{0:data-index}
//添加到 attributes中
//此种方式还会显示在标签中
ht.setAttribute("data-index","Hello");
console.dir(ht);

下面是控制台截图，可以发现.id添加的属性“html5”并没有显示在元素标签内，setattribute添加的 date-index显示在元素标签内了，而且在使用setattribute添加的属性的setattributes中有添加的属性





//特殊的几个属性 id,src是元素的固有属性,
//id属性可以在对象中或者对象的attributes中存在
//id属性和attributes中的id是关联的，修改一个会改变另一个
//既可以使用点也可以使用setAttribute设置
//src可以有两种方法设置,setAttribute("src","1.jpg");
// ele.src = "1.jpg"

var sp = document.getElementsByTagName("span")[0];
sp.id = "html5";
console.dir(sp);
var ht = document.getElementById("ht");
ht.index = 123;//ht = {index:123,attributes:...},不会显示在标签上
console.dir(ht);
alert(ht.index);
//此种方式添加到 ht = {attributes:{0:data-index}
//添加到 attributes中
//此种方式还会显示在标签中
ht.setAttribute("data-index","Hello");
console.dir(ht);//

下面是控制台截图，可以发现.id添加的属性“html5”并没有显示在元素标签内，setattribute添加的 date-index显示在元素标签内了，而且在使用setattribute添加的属性的setattributes中有添加的属性





//特殊的几个属性 id,src是元素的固有属性,
//id属性可以在对象中或者对象的attributes中存在
//id属性和attributes中的id是关联的，修改一个会改变另一个
//既可以使用点也可以使用setAttribute设置
//src可以有两种方法设置,setAttribute("src","1.jpg");
// ele.src = "1.jpg"