1.attribute

（attribute是HTML标签上的特性，它的值只能够是字符串；）

1
Attribute是HTML上设置的属性，在HTML中显式地设置，Attribute就是dom节点自带的属性，例如html中常用的id、class、title、align等。关于这个属性一共有三个相关的方法：setAttribute、getAttribute、removeAttribute；

三种方法的使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<body>
    <input type="text" id="inpu" class="input" value="123">
    <button onclick="myfunc()">转变</button>
</body>
<script>
    var input = document.getElementById('inpu');
    console.log(input.attributes)
    function myfunc() {
    
        input.setAttribute('type', "button");
        
        console.log(input.getAttribute('class'));//input
        
        input.removeAttribute("id");
    }
</script>

2.Property

(Property是这个DOM元素作为对象，其附加的内容，例如childNodes、firstChild)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<body>
    <input type="text" id="txt" a='a'>
    <button onclick="myfunc()">点击</button>
</body>
<script>
    var input = document.getElementById('txt');
    function myfunc() {
        console.log(input.type);
        console.log(input.id);
        console.log(input.title);//""
        console.log(input.a);//undefined
    }
</script>

我们在html页面的input元素中设置了a属性，但是在property中却是访问不到的；相反我们没有在html页面中设置的title，访问它却没有反映undefined！
这是怎么回事？
因为所有的HTML元素都由HTMLElement类型表示，HTMLElement类型直接继承自Element并添加了一些属性，每个HTML元素都有下面的这5个标准特性：id，title，lang，dir，className（在DOM中以property方式操作这几个特性会同步到html标签中）

3.二者区别

1.用点操作符改变value值，并不会更新attribute的value值；而相反用attribute更新value值，却会反映到property上
1
2
3
4
5
6
7
8
var input = document.getElementById('txt');
   function myfunc() {
      input.setAttribute('value','test');//test
      console.log(input.value);

      input.value ="change";
      console.log(input.getAttribute('value'))//test
   }
2.DOM元素一些默认常见的attribute节点都有与之对应的property属性，比较特殊的是一些值为Boolean类型的property，如一些表单元素。对于这些特殊的attribute节点，只要存在该节点，对应的property的值就为true
1
2
3
4
5
6
7
8
9
10
11
<body>
    <input type="radio" checked='checked' id="txt" a='a'>
    <button onclick="myfunc()">点击</button>
</body>
<script>
    var input = document.getElementById('txt');
    function myfunc() {
       console.log(input.getAttribute('checked'))//'checked'
       console.log(input.checked)//true
    }
</script>
3.两者对于href的获取也有不同之处，attribute取到的是实际设置的值（相对路径），而property取得的是绝对路径：

4、总结

Attribute属性在html上设置，会反应在html代码上，两者同步；
Property属性则可以看做是DOM对象的键值对，用点操作符对它们进行操作。

实际编程中，基本上的DOM操作都是使用property的点操作符。

只有两种情况不得不使用attribute：

  • 1.自定义HTML Attribute，因为它不能同步到DOM property上
  • 2.访问内置的HTML标签的Attribute，这些attribute不能从property上同步过来，比如input标签的value值（可以用来检验input值是否变化）