js高级程序设计中的特性和属性区分

参考：https://blog.51cto.com/jsw55667/1932634
其实attribute和property两个单词，翻译出来都是属性，但是《javascript高级程序设计》将它们翻译为特性和属性，以示区分。

定义：

• 元素特性attribute是指HTML元素标签的特性　id、class、title、a都是特性，其中a叫做自定义特性<div id=“id1” class=“class1” title=“title1” a=‘a1’></div>
• 对象属性property是指元素节点的属性　id、title、b都是属性，其中b叫做自定义属性<div id=“test”></div><script>test.id = ‘id2’;test.title = ‘title2’;test.b = ‘b2’;</script>

共有

• id、title等既是属性，也是特性。修改属性，其对应的特性会发生改变；修改特性，属性也会改变

• 【1】修改元素特性(以title为例)
  <div id=“test” title=‘123’>测试内容</div>
  <script>console.log(test.title);//123
  document.onclick = function(){
  test.setAttribute(‘title’,‘456’);
  console.log(test.title);//456 }
  </script>

• 【2】修改对象属性
  <div id=“test” title=‘123’>测试内容</div>
  <script>console.log(test.getAttribute(‘title’));//123
  document.onclick = function(){
  test.title = ‘456’;
  console.log(test.getAttribute(‘title’));//456 }

例外

• class和for这两个元素特性是例外，因为class和for是保留字，无法直接在对象属性中使用。所以在对象属性中，class变成了className，而for变成了htmlFor

• 【1】class
  <div id=“test” class=“class1”>测试内容</div>
  <script>
  console.log(test.getAttribute(‘class’));//‘class1’
  console.log(test.className);//‘class1’
  console.log(test.class);//undefined
  

• 【2】for
  <label id=“test” for=“input”></label>
  <script>console.log(test.getAttribute(‘for’));//‘input’
  console.log(test.htmlFor);//‘input’
  console.log(test.for);//undefined
  </script>

特殊

• style和onclick是两个特殊的特性，它们虽然有对应的属性名，但属性值与通过getAttribute()返回的值并不相同
• 【1】style　　
  通过getAttribute()访问时，返回的style特性值中包含的是CSS文本，而通过属性来访问它则会返回一个CSSStyleDeclaration对象
  <div id=“test” style=“height: 100px;width: 100px;”></div>
  <script>
  console.log(test.getAttribute(‘style’));//‘height: 100px;width: 100px;’//{0: “height”, 1: “width”, alignContent: “”, alignItems: “”, alignSelf: “”…}console.log(test.style);
  console.log(typeof test.style);//‘object’
  console.log(test.style.height);//‘100px’
  </script>
• 【2】onclick　　
  如果通过getAttribute()访问，会返回相应代码的字符串。而访问onclick属性时，会返回一个javascript函数　　
  [注意]其他事件处理程序也类似
  <div id=“test” onclick = “alert(1)”>测试内容</div>
  <script>
  console.log(test.getAttribute(‘onclick’));//'alert(1)"
  console.log(test.onclick);//‘function onclick(event) {alert(1)}’
  console.log(typeof test.onclick);//‘function’
  </script>　　
  [注意]如果通过对象属性设置onclick属性，则不会有对应的元素特性
  <div id=“test”>测试内容</div>
  <script>
  test.onclick = function(){
  alert(1);
  }
  console.log(test.getAttribute(‘onclick’));//null
  console.log(test.onclick);//‘function onclick(event) {alert(1)}’
  console.log(typeof test.onclick);//‘function’
  </script>