在div中实现可编辑操作，并且获取元素中的内容

用习惯了前段的框架，反而会把最基本的东西给忘记了；

<div style="width:100px;height:200px;border:1px solid red" contenteditable></div>

之前一直觉得在div这个元素中实现编辑文字会很困难，会使用到各种js的操作之类的，一查发现自己想多了，只需要在div中添加contenteditable属性即可；

注意：contenteditable是html5中新增加的属性，用于规定元素是否可被编辑

实现了div文字编辑，那我们怎么获取文字内容呢？

1.js操作：

<div style="width:100px;height:200px;border:1px solid red" contenteditable id="editContent" @click="getDivVal"></div>

getDivVal(){
       console.log(document.getElementById('editContent').innerHTML) 

      },

主要是在div元素上绑定一个id值，然后通过js的文档操作获取到整个元素，之后再使用innerHTML/textContent获取到值

注意：

1.innerHTML既可以获取HTML中的文本内容，也可以在HTML元素中插入内容

document.getElementById('editContent').innerHTML=“我是张三”

-------------------------------------------------------------------------------------------------------------------------------------

再通过js操作获取到元素中的数据时，不同的元素，所使用的api有不同，例如，对于input框就需要使用value

 <input  id="inputValue" type="text"/>

document.getElementById('inputValue').value