HTML中Attribute和JavaScript中property区别

Attribute是HTML标签中定义的属性

<div id="div" class="class" lang="ds" dir="ltr" title="title" userDefi="userDefi"></div>

例如上面定义的id，class,lang,dir,title,userDefi都是Attribute，都可以通过ele.getAttribute('id')这样获取其值。

Property是JavaScript为元素对象定义的属性

 var ele = document.getElementById('div');
    ele.anotherProp = 'anotherP';

例如上面为ele定义的anotherProp.

共同拥有的属性

虽然Attribute和Property定义的属性分别在不同层面上，但是有以下几个属性是共享的：

id
class
lang
dir
title

<div id="div" class="class" lang="ds" dir="ltr" title="title" userDefi="userDefi"></div>

    var ele = document.getElementById('div');
    ele.anotherProp = 'anotherP';
    ele.id = 'anotherId';
    console.log(ele.getAttribute('id'));//div
    console.log(ele.getAttribute('class'));//class
    console.log(ele.getAttribute('lang'));//ds
    console.log(ele.getAttribute('dir'));//ltr
    console.log(ele.getAttribute('title'));//title
    console.log('==============')
    console.log(ele.id);//div
    console.log(ele.className);//class
    console.log(ele.lang);//ds
    console.log(ele.dir);//ltr
    console.log(ele.title);//title
    console.log('==============')
    console.log(ele.anotherProp);//anotherP
    console.log(ele.getAttribute('anotherProp'));//null
    console.log(ele.getAttribute('userDefi'));//userDefi
    console.log(ele.userDefi);//undefined

    ele.id = 'anotherId';
    页面HTML标签同步显示id为anotherId

在页面改变input框的输入值并不会影响input的value值

<input type="text" value="start" id="input">
<input type="button" value="changevalue" id="btn">
 btn.onclick = function () {
     input.value = 123;
     console.log(input.value);/123
     console.log(input.getAttribute('value'));//start
 };