innerHTML和value的区别

同样是学习的时候没有深究的问题，最近需要分析两者区别，做下记录

首先，innerHTML，是指标签内的Html，如果该标签元素有内容，那么innerHTML会将内容输出到页面，类似于inptu标签，本身没有内容，在对input做出修改时，页面会输出空值，类似于textarea标签，本身可以有内容，在做出修改时，只会打印出最初的内容。

然后，value，是指标签标签的value属性，如果该标签有value属性，那么在操作时，该标签的value值就会输出到页面，同理，当该标签本身没有value属性时，则会输出undefined

<div>123</div>

var box = document.getElementsByTagName('div')[0];
       console.log(box.innerHTML);
　　　　输出结果是123

　　　　console.log(box.value);
　　　　输出结果时undefined

<input type="text" value="">

var inp = document.getElementsByTagName('input')[0];
       inp.onkeyup = function() {
           console.log(inp.innerHTML);
　　　　　　因为input本身内部没有html，所以一直输出空值

　　　　　　console.log(inp.value);
　　　　　　当input输入框内的值发生变化时，输出结果也一直变化
       }

<textarea name="" id="" cols="30" rows="10">1234</textarea>

var text = document.getElementsByTagName('textarea')[0];
       text.onkeyup = function() {
        console.log(text.innerHTML);
　　　　因为textarea本身内部有html，所以进行操作时，一直输出最初的html--1234

　　　　console.log(text.value);
　　　　与input一样，当textarea输入框内的值发生变化时，输出结果也跟着变化

       }

实践出真知，很多东西都需要手敲一下才会发现变化，只靠叙述不会明白其中变化——致自己