面向对象tab栏切换案例 (有错有错求指教)

1. 面向对象案例

1.1 功能需求

• 点击tab栏可以切换效果；

• 点击+号，可以添加tab项和内容项：
      1. 创建新的选项卡 li 和新的内容 section.
      2. 把创建的两个元素追加到对应的父元素中.
      3. 以前的做法：动态创建元素 createElement，但是元素里面内容较多,需要innerHTML赋            值在 appendChild 追加到父元素里面.
      4. 现在高级做法：用 insertAdjacentHTML() 可以直接把字符串格式元素添加到父元素中.        5. appendChild 不支持追加字符串的子元素， insertAdjacentHTML() 支持追加字符串的子          元素

• 点击x号，可以删除当前的tab项和内容项；

• 双击tab项文字或者内容项文字,可以修改里面的文字内容：                                                         1. 双击选项卡 Ii 或者 section 里面的文字，可以实现修改功能                                               2. 双击事件是：ondblclick                                                                                                       3. 如果双击文字，会默认选定文字，此时需要双击禁止选中文字                       4.window.getSelection?                      window.getSelection().removeAllRanges():document.selection.empty()  ;                               5. 核心思路：双击文字的时候，在里面生成一个文本框，当失去焦点或者按下回车然后把文       本框输入的值给原先元素即可

抽象对象：tab对象

1. 该对象具有切换功能
2. 该对象具有添加功能：
3. 该对象具有删除功能
4. 该对象具有修改功能

1.2 分析

1.2.1 类的基本架构

class Tab {
    constructor(id) {
        // 获取相关元素节点
        // 根据传入的id选择器构建主节点
        this.main = document.querySelector(id);
    }