setAttribute 和 对象设置属性的区别

HTML：

<div>
    <img>
</div>

JS:

window.onload = function() {
    var oImg = document.getElementsByTagName('img')[0];
    //通过点符号设置属性
    oImg.src = "图片链接";
    //通过setAttribute设置属性
    oImg.setAttribute('alt','图片')    
}

运行结果：

1.png

如果是标签自带的属性，通过以上两种方法设置 ，都是可已在HTML结构显示的
但是如果是自定义属性 ，通过点方法（对象）设置 是不会显示在HTML上的

js：

window.onload =function() {
    var oImg = document.getElementsByTagName('img')[0];
    //通过点符号设置属性
    oImg.ccc= "图片链接";
    //通过setAttribute设置属性
    oImg.setAttribute('sss','图片');
}

运行结果：

2.png

可以看出通过setAttribute设置的 不管是标签自带的属性还自定义属性都是可以显示在HTML结构上的 所以为HTML上设置属性一般用setAttribute()

还要就是通过点方法设置的自定义属性 是不能通过getAttribute()获取的

最后总结：设置属性时如果是自带属性时用点语法，自定义属性用setAttribute() 获取用getAttribute()