Property和Attribute区别测试

区别总结

  总得来说，Property是Dom相关属性对象，Attribute是HTML标签属性。如下面这个标签。

<div class="init_class" id="init_id" whatever="any">text</div>

Property中包含id，innerHtml等属性，还有className属性与html标签的class形成映射对应。
Attribute中只包括html标签即div标签中的属性，class、id和whatever（自定义属性）

对于Attribute中的某些属性在Property中时由对应值的，如常见项：

Attribute属性	Property属性
id	id
class	className

还有一些具有特定属性的标签，如input的value，img的src等
注意src属性采用相对路径时attribute值与property值会有不同

属性映射值改变

<div class="init" id="init_div"></div>
<input type="text" value="init" id="init_input">
<img src="init" alt="init_alt">
<script>
  const div = document.getElementById('init_div'),
  		input = document.getElementById('init_input'),
  		img = document.getElementsByTagName('img')[0]
  //class测试
  console.log(div.className,div.getAttribute('class'))	//init	init
  div.className = 'change'
  console.log(div.id,div.getAttribute('class'))	//change	change
  div.setAttribute('class','init')
  console.log(div.className,div.getAttribute('class'))	//init	init
  //value测试
  console.log(input.value, input.getAttribute('value')) //init	init
  input.setAttribute('value','change')
  console.log(input.value, input.getAttribute('value')) //change	change
  input.value = 'init'
  console.log(input.value, input.getAttribute('value')) //init	change
</script>

具有映射关系的属性在改变时会有不同：
 通过setAttribute更改的属性会导致Property属性随动更改
 通过Property进行属性值更改时，Attribute改变情况如下：
  id同时改变
  class与className同时改变
  src同时改变
  类似input标签的自带value属性，通过Property改变值时，Attribute不变

随笔仅供参考，有不对的地方请指出