JS高级面向对象tab栏切换

Tab栏切换 添加功能
1、点击+实现添加新的选项卡和内容
2、第一步：创建新的选项卡li和新的内容section
3、第二步：把创建的li和section放在相应的父元素中
4、以前的做法是：动态创建元素createElement,但是元素里面的内容较多，需要innerHTML赋值，在appendChild追加到父元素里面
5、高级方法:利用insertAdjacentHTML()可以直接把字符串格式元素添加到父元素中
6、appendChild不支持追加字符串的子元素，insertAdjecentHTML支持
新增里面出现的两个bug
1、后来添加的选项卡不会清除掉以前的 获取元素的时候是准备好的元素 先添加的元素没有绑定事件
点击+号之后需要重新获取li和section绑定事件

1、页面加载，执行constructor,constructor调用this init() init(）里面调用函数updateNode ,来获取所有的li和section. 利用for循环给li添加绑定事件

2、点击添加按钮，创建section ,点击一次li变为4个 最后面调用that init() 在回去找init() ,在获取所有的元素 给4个li 绑定事件

删除功能
1、点击×可以删除当前li和section
2、×没有索引号，但是他的父亲li有索引号，是我们所需要的
3、单击×可以删除这个索引号对应的li和section

编辑功能
1、双击选项卡li和section里面的文字，可以实现修改
2、双击事件ondblclick
3、如果双击选会默认选中文字，此时双击禁止选中文字
4、 双击禁止选中文字: window.getSelection?window.getSelection().removeAllRanges():document.selection.empty();
5、双击文字的时候里面生成一个文本框，当失去焦点或者按下回车然后把文本框输入的值给原先的元素即可

代码：

new Tab(’#tab’);