JavaScript中.、[]与setAttribute()在设置属性上的区别

.和[]

javaScript.和[]既可以对所有js对象设置属性，但是对于DOM对象它设置的属性有些特殊。对于元素DOM标准属性，实现属性值的设置/更改;对于元素DOM非标准属性，仅在js中有效，在(标准浏览器中)HTML中无效。

setAttribute()

设置指定元素上的某个属性值。如果属性已经存在，则更新该值;否则，使用指定的名称和值添加一个新的属性。

要获取某个属性当前的值，可使用 getAttribute();要删除某个属性，可使用 removeAttribute();要获取该自定义属性的属性值，可以使用getAttribute();

语法：

element.setAttribute(name,value)

属性说明：

name——表示属性名称的字符串。

value——属性的值/新值。

（.）、（[]）、（getAttribute()）的区别

<!DOCTYPE html>
<html>

<head>
    <title></title>
    <meta charset="UTF-8">
</head>
<style>
</style>
<script>
    window.onload = function () {
        var oImage=document.getElementById('image');
        var simg='weimob';
        console.log(oImage.alt);//=>'微盟百度品专大图'
        console.log(oImage['alt']);//=>'微盟百度品专大图'
        console.log(oImage.getAttribute('alt'));//=>'微盟百度品专大图'  
             
    }
</script>
<body>
    <div id='div1'>
          <img id='image'   class='image' src='./images/1.jpg' alt='微盟百度品专大图'  width='500' height='auto'/>
    </div>
</body>
</html>

在元素的DOM对象的class属性上需要注意，由于class是JavaScript中的保留字，采用(.)和([])获取/设置class属性值时，需要变为className，而采用getAttribute()/setAttribute()则需要直接写class的字符串。

示例

var oImage=document.getElementById('image');
var simg='weimob';
console.log(oImage.className);//=>'image'  
console.log(oImage['className']);//=>'image'  
console.log(oImage.getAttribute('class'));//=>'image'

来源：https://www.cnblogs.com/f6056/p/11320557.html

标签

微盟