参考地址《JS中attribute和property的区别》
总述
attribute通常翻译为个性，property通常翻译为属性，两者是不同的货色。
attribute是HTML标签上的个性，它的值只可能是字符串。property是DOM中的属性，是javascript里的对象。
介绍
attribute是dom节点自带的属性，例如html标签中罕用的id、title、name、class等。
property是这个dom节点做为DOM对象所带的属性，比方firstChild、className等。
举例来说，对于上面的代码：
<div id="aaa" title="张三" title1="hehe" class="zzz"></div><script> let obj_div = document.getElementById('aaa') console.log(obj)</script>局部截图：
能够看到div标签的id、class(在property中显示为className，因为class是js的关键字)、title这些attribute都能够在property中找到，然而title1却没有呈现。
这是因为，每一个dom对象都会有它默认的根本attribute(比方标签中的id、class、title)，在创立的时候，它也只会创立这些根本attribute，对于自定义attribute(比方标签中的title1)，是不会放到dom对象中的。
那么，这个title1跑哪儿去了呢？仔细观察，能够看到有个property，名为attributes，开展：
能够看到title1就在这个attributes对象中。
由此，能够得出结论：
所有在标签中定义的根本attribute，都能够在property中找到。
所有在标签中定义的attribute，都能够在名为attributes的property中找到。
取值和赋值
attribute的取值和赋值
用getAttribute()进行取值
obj_div.getAttribute('id')obj_div.getAttribute('title')obj_div.getAttribute('class')obj_div.getAttribute('title1')任何attribute都可通过此办法进行取值，无论是根本attribute还是自定义attribute。
用setAttribute()进行赋值
obj_div.setAttribute('title', '李四')obj_div.setAttribute('class', 'ttt')obj_div.setAttribute('title1', 'hahahaha')任何attribute都可通过此办法进行赋值，如果是根本attribute，还会更新关联的property值。
应用setAttribute()办法接管的这两个参数都必须是字符串类型。
property的取值和赋值
用“.”进行取值
const title = obj_div.titleconst className = obj_div.classNameconst childNodes = obj_div.childNodesconst attributes = obj_div.attributes用“.”进行赋值
obj_div.title = '李四'obj_div.className = 'ttt'obj_div.AAA = trueobj_div.BBB = [1, 2, 'HEHE']对property能够赋任何类型的值，对attribute只能赋字符串类型的值。
两者的关联关系
做个乏味的试验，比方有上面这样的代码：
<input type="text" id="aaa" value="1" class="red">1. 批改id
通过attribute批改
<input type="text" id="aaa" value="1" class="red"><script> let obj_input = document.getElementById('aaa') obj_input.setAttribute('id', 'bbb') console.log(obj_input.id) // 输入 -> bbb console.log(obj_input.getAttribute('id')) // 输入 -> bbb </script>通过property批改
<input type="text" id="aaa" value="1" class="red"><script> let obj_input = document.getElementById('aaa') obj_input.id = 'bbb' console.log(obj_input.id) // 输入 -> bbb console.log(obj_input.getAttribute('id')) // 输入 -> bbb </script>论断：批改id时，两者会同步。
2. 批改type
通过attribute批改
<input type="text" id="aaa" value="1" class="red"><script> let obj_input = document.getElementById('aaa') obj_input.setAttribute('type', 'checkbox') console.log(obj_input.type) // 输入 -> checkbox console.log(obj_input.getAttribute('type')) // 输入 -> checkbox </script>通过property批改
<input type="text" id="aaa" value="1" class="red"><script> let obj_input = document.getElementById('aaa') obj_input.type = 'checkbox' console.log(obj_input.type) // 输入 -> checkbox console.log(obj_input.getAttribute('type')) // 输入 -> checkbox </script>论断：批改type时，两者会同步。
3. 批改class
通过attribute批改
<input type="text" id="aaa" value="1" class="red"><script> let obj_input = document.getElementById('aaa') obj_input.setAttribute('class', 'blue') console.log(obj_input.className) // 输入 -> blue console.log(obj_input.getAttribute('class')) // 输入 -> blue </script>通过property批改
<input type="text" id="aaa" value="1" class="red"><script> let obj_input = document.getElementById('aaa') obj_input.className = 'blue' console.log(obj_input.className) // 输入 -> blue console.log(obj_input.getAttribute('class')) // 输入 -> blue </script>论断：批改class时，两者会同步。
4. 要害看这块儿，批改value
通过attribute批改
<input type="text" id="aaa" value="1" class="red"><script> let obj_input = document.getElementById('aaa') obj_input.setAttribute('value', '2') console.log(obj_input.value) // 输入 -> 2 console.log(obj_input.getAttribute('value')) // 输入 -> 2 </script>通过property批改
<input type="text" id="aaa" value="1" class="red"><script> let obj_input = document.getElementById('aaa') obj_input.value = 2 console.log(obj_input.value) // 输入 -> 2 console.log(obj_input.getAttribute('value')) // 输入 -> 1 </script>论断：批改value时，两者不会同步。通过attribute形式进行赋值时，数据会同步到property，然而通过property形式进行赋值时，数据没有同步到attribute。
关联的论断
通过attribute形式进行赋值时，数据肯定会同步到property，然而通过property形式进行赋值时，数据不肯定会同步到attribute。
---完---