封装什么叫做封装：举例：电脑笔记本就是CPU,内存，硬盘，主板，显卡的封装用户只需要接触显示器，键盘，鼠标。触控板

什么叫做封装：

举例：

电脑笔记本就是CPU,内存，硬盘，主板，显卡的封装
用户只需要接触显示器，键盘，鼠标。触控板等设备
即可操作复杂的计算机

【接口】

被封装的东西需要暴露一些功能给外部
这些功能就是接口，如USB接口，HDMI接口
设备只需要接口，即可与被封装的东西通讯
比如键盘，鼠标支持USB接口
显示器支持HDMI接口

库：- 我们把提供给其他人用的工具代码叫做库

比如jquery,Underscore
API：库暴露出来的函数或者属性叫做API（应用编程接口）
框架：

当你的库变得很大，并且需要学习才能看懂
那么这个库就叫做框架，比如Vue.React

对象风格：也叫命名空间风格

window.dom是我们提供的全局对象

增：

dom.create(`<div>hi</div>`)用于创建节点
dom.after(node,node2)用于新增弟弟
dom.before(node,node2)用于新增哥哥
dom.append(parent,child)用于新增儿子
dom.wrap(`<div></div>`)用于新增爸爸

例子1：dom.create(<div>hi</div>) //用于创建节点

window.dom = {
    create(tagName){
       return document.createElement(tagName);
    }
   }

index.html；

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dom1</title>
</head>

<body>
    示例
    <script src="dom.js"></script>
    <script src="main.js"></script>
</body>

</html>

dom.js:

window.dom = {
   create(string){
      const container = document.createElement("template")// 先创建一个template标签，template这个标签可以任意元素
      container.innerHTML = string.trim();//  再把标签的内容设置成你的字符，字符转标签的工作由innerHtml来完成
      //去掉空格，去掉文本内容要用trim，否则会导致如果在main.js里const div = dom.create(" 【这里有空格】  <td>hi</td>")
      //就会导致console.log(div),打印出来就会是空对象undefined
      return container.content.firstChild;//然后再拿template标签里的第一个标签给你,这边的标签和节点的意思等同。
   }
}

main.js 部分代码：

console.log('hi')
//相对于 document.createElement('div') 比较简单一点
const div = dom.create("div")  //dom.create 用于创建节点
console.log(div)  //打印节点

例子2：dom.after(node,node2)//用于新增弟弟 html 部分代码：

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dom1</title>
</head>

<body>
    示例
    <div><div id="test">test</div></div>
   //即便是没有下一个节点，这个代码依旧可以从后面插入节点
    <script src="dom.js"></script>
    <script src="main.js"></script>
</body>

</html>

dom.js 部分代码:

window.dom = {
   create(string){
      const container = document.createElement("template")
      container.innerHTML = string.trim();
      return container.content.firstChild;
   },
     after(node, node2){
     node.parentNode.insertBefore(node2, node.nextSibling);
     //找到这个节点的爸爸，然后调用爸爸的insertBefore方法，
     //把node2插入到node的下一个节点的面前
   }
}

main.js 部分代码：

//相对于 document.createElement('div') 比较简单一点
const div = dom.create("<div>nextDiv</div>")  //dom.create 用于创建节点
console.log(div)
dom.after(test, div)

dom.before(node,node2) //用于新增哥哥（这个是默认支持的一个接口结论，所以可以直接用） dom.js 部分代码:

window.dom = {
   create(string){
      const container = document.createElement("template")
      container.innerHTML = string.trim();
      return container.content.firstChild;
   },
     //after(node, node2){
     //node.parentNode.insertBefore(node2, node.nextSibling);
     ////找到这个节点的爸爸，然后调用爸爸的insertBefore方法，
     ////把node2插入到node的下一个节点的面前
  // },
    before(node, node2){
    node.parentNode.insertBefore(node2, node);
    }
}

main.js 部分代码：

//相对于 document.createElement('div') 比较简单一点
const div = dom.create("<div>nextDiv</div>")  //dom.create 用于创建节点
console.log(div)
dom.before(test, div) //把节点插入到test的0前一个节点中

喏，不就插进前一个了吗）

在爸爸的底下插入一个儿子： dom.js 部分代码：

window.dom = {
   create(string){
      const container = document.createElement("template")// 先创建一个template标签，template这个标签可以任意元素
      container.innerHTML = string.trim();//  再把标签的内容设置成你的字符，字符转标签的工作由innerHtml来完成
      //去掉空格，去掉文本内容要用trim，否则会导致如果在main.js里const div = dom.create(" 【这里有空格】  <td>hi</td>")
      //就会导致console.log(div),打印出来就会是空对象undefined
      return container.content.firstChild;//然后再拿template标签里的第一个标签给你,这边的标签和节点的意思等同。
   },
//    after(node, node2){
//    node.parentNode.insertBefore(node2, node.nextSibling);
//  },
//    before(node, node2){
//    node.parentNode.insertBefore(node2, node);
//    }

    append(parent,node){
       parent.appendChild(node);//dom.append(parent,child)用于新增儿子
    }
    
}

main.js部分：

//相对于 document.createElement('div') 比较简单一点
const div = dom.create("<div>nextDiv</div>")  //dom.create 用于创建节点
console.log(div)

dom.append(test, div)  //dom.append(parent,child)用于新增儿子

生儿子部分： main.js

//相对于 document.createElement('div') 比较简单一点
const div = dom.create("<div>nextDiv</div>")  //dom.create 用于创建节点
console.log(div)

// dom.append(test, div)
const div3 = dom.create('<div id="parent">div3</div>');
dom.wrap(test,div3)

dom.js

// window.dom = {} //等于一个空对象
// dom.create = function() {} //第一个API


// //或者
// window.dom = {
//     create:function(){}
// }

// window.dom = {
//     create(tagName){
//        return document.createElement(tagName);
//     }
//  }


window.dom = {
    create(string){
       const container = document.createElement("template")// 先创建一个template标签，template这个标签可以任意元素
       container.innerHTML = string.trim();//  再把标签的内容设置成你的字符，字符转标签的工作由innerHtml来完成
       //去掉空格，去掉文本内容要用trim，否则会导致如果在main.js里const div = dom.create(" 【这里有空格】  <td>hi</td>")
       //就会导致console.log(div),打印出来就会是空对象undefined
       return container.content.firstChild;//然后再拿template标签里的第一个标签给你,这边的标签和节点的意思等同。
    },
    after(node, node2){
    node.parentNode.insertBefore(node2, node.nextSibling);
  },
    before(node, node2){
    node.parentNode.insertBefore(node2, node);
    },
     append(parent,node){
        parent.appendChild(node);
     },
     
    wrap(node, parent){
       dom.before(node, parent);  //先让parent到Node的前面去
       dom.append(parent, node);  //再让node被parent包起来
    }
    
 }

①先成为兄弟节点
②直接把div2插入到div3里面，让div2成为div3的儿子节点

html部分：

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dom1</title>
</head>

<body>
    示例
    <div>
        <div id="test">test</div>
    </div>

    <script src="dom.js"></script>
    <script src="main.js"></script>
</body>

</html>

【看起来很简单的接口实现，其实里面有非常肮脏的实现】

删：

dom.remove(node)用于删除节点
dom.empty(parent)用于删除后代

dom.remove(node)用于删除节点
dom.empty(parent)用于删除后代

index.html

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dom1</title>
</head>

<body>
    <div id="empty">
        <div id="one">第一个节点</div>//这里的回车是一个文本节点（一个儿子）
        <div id="two">第二个节点</div>
        <div id="three">第三个节点</div>
    </div>
    <div>
        <div id="test">test</div>
    </div>
    <script src="dom.js"></script>
    <script src="main.js"></script>
</body>

</html>

main.js:

//相对于 document.createElement('div') 比较简单一点
const div = dom.create("<div>nextDiv</div>")  //dom.create 用于创建节点
console.log(div)

// dom.append(test, div)
const div3 = dom.create('<div id="parent">div3</div>');
dom.wrap(test,div3)

const nodes = dom.empty(window.empty)
console.log(nodes)

dom.js

// window.dom = {} //等于一个空对象
// dom.create = function() {} //第一个API


// //或者
// window.dom = {
//     create:function(){}
// }

// window.dom = {
//     create(tagName){
//        return document.createElement(tagName);
//     }
//  }


window.dom = {
    create(string){
       const container = document.createElement("template")// 先创建一个template标签，template这个标签可以任意元素
       container.innerHTML = string.trim();//  再把标签的内容设置成你的字符，字符转标签的工作由innerHtml来完成
       //去掉空格，去掉文本内容要用trim，否则会导致如果在main.js里const div = dom.create(" 【这里有空格】  <td>hi</td>")
       //就会导致console.log(div),打印出来就会是空对象undefined
       return container.content.firstChild;//然后再拿template标签里的第一个标签给你,这边的标签和节点的意思等同。
    },
    after(node, node2){
    node.parentNode.insertBefore(node2, node.nextSibling);
  },
    before(node, node2){
    node.parentNode.insertBefore(node2, node);
    },
     append(parent,node){
        parent.appendChild(node);
     },
    wrap(node, parent){
       dom.before(node, parent);  //先让parent到Node的前面去
       dom.append(parent, node);  //再让node被parent包起来
    },
    remove(node){
       node.parentNode.removeChild(node)
       return node
    },
   //  empty(node){
   //     node.innerHTML = ''
   //  }
   //若是要保留节点的引用
   // empty(node){
   //    const {childNodes} = node
   //    const array = []
   //    for(let i = 0; i < childNodes.length; i++){
   //       dom.remove(childNodes[i])
   //       array.push(childNodes[i])
   //    }  
   //    return array
   // }

   empty(node){
      const {childNodes} = node //可以和 const childNodes = node.childNodes 划等号
      const array = []
      let x = node.firstChild
      while(x){
         array.push(dom.remove(node.firstChild))
         x = node.firstChild 
      }
      return array
   }//被删掉有7个儿子，原因是index.html
 }

改：

dom.arr(node,'title', ?)用于读写属性
dom.text(node, ?)用于读写文本内容
dom.html(node,?)用于读写HTML内容
dom.style(node,{color:'red'})用于修改style
dom.class.add(node,'blue')用于添加class
dom.class.remove(node,'blue')用于删除class
dom.on(node,'click',fn)用于添加事件监听
dom.off(node,'click',fn)用于删除事件监听

dom.arr(node,'title', ?) 用于读写属性

index.html

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dom1</title>
</head>

<body>
    <div id="empty">
        <div id="one">第一个节点</div>
        <div id="two">第二个节点</div>
        <div id="three">第三个节点</div>
    </div>
    <div>
        <div id="test">test</div>
    </div>
    <script src="dom.js"></script>
    <script src="main.js"></script>
</body>

</html>

main.js

//相对于 document.createElement('div') 比较简单一点
const div = dom.create("<div>nextDiv</div>")  //dom.create 用于创建节点
console.log(div)

// dom.append(test, div)
const div3 = dom.create('<div id="parent">div3</div>');
dom.wrap(test,div3)

const nodes = dom.empty(window.empty)
console.log(nodes) 

dom.attr(test, 'title', 'I am lily')
const title = dom.attr(test, 'title')

dom.js:

// window.dom = {} //等于一个空对象
// dom.create = function() {} //第一个API


// //或者
// window.dom = {
//     create:function(){}
// }

// window.dom = {
//     create(tagName){
//        return document.createElement(tagName);
//     }
//  }


window.dom = {
    create(string){
       const container = document.createElement("template")// 先创建一个template标签，template这个标签可以任意元素
       container.innerHTML = string.trim();//  再把标签的内容设置成你的字符，字符转标签的工作由innerHtml来完成
       //去掉空格，去掉文本内容要用trim，否则会导致如果在main.js里const div = dom.create(" 【这里有空格】  <td>hi</td>")
       //就会导致console.log(div),打印出来就会是空对象undefined
       return container.content.firstChild;//然后再拿template标签里的第一个标签给你,这边的标签和节点的意思等同。
    },
    after(node, node2){
    node.parentNode.insertBefore(node2, node.nextSibling);
  },
    before(node, node2){
    node.parentNode.insertBefore(node2, node);
    },
     append(parent,node){
        parent.appendChild(node);
     },
    wrap(node, parent){
       dom.before(node, parent);  //先让parent到Node的前面去
       dom.append(parent, node);  //再让node被parent包起来
    },
    remove(node){
       node.parentNode.removeChild(node)
       return node
    },
   //  empty(node){
   //     node.innerHTML = ''
   //  }
   //若是要保留节点的引用
   // empty(node){
   //    const {childNodes} = node
   //    const array = []
   //    for(let i = 0; i < childNodes.length; i++){
   //       dom.remove(childNodes[i])
   //       array.push(childNodes[i])
   //    }  
   //    return array
   // }

   empty(node){
      const {childNodes} = node //可以和 const childNodes = node.childNodes 划等号
      const array = []
      let x = node.firstChild
      while(x){
         array.push(dom.remove(node.firstChild))
         x = node.firstChild 
      }
      return array
   },//被删掉有7个儿子，原因是index.html
   attr(node, name, value){
      if(arguments.length === 3){
         node.setAttribute(name, value)
      }else if(arguments.length === 2){
         return node.getAttribute(name)
      }
   }

 }

dom.text(node, ?)用于读写文本内容

index.html

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dom1</title>
</head>

<body>
    示例
    <div>
        <div id="test">test<p>段落标题</p>
        </div>
    </div>
    <div id="empty">
        <div id="one">第一个节点</div>
        <div id="two">第二个节点</div>
        <div id="three">第三个节点</div>
    </div>

    <script src="dom.js"></script>
    <script src="main.js"></script>
</body>

</html>

main.js

//相对于 document.createElement('div') 比较简单一点
const div = dom.create("<div>nextDiv</div>")  //dom.create 用于创建节点
console.log(div)

// dom.append(test, div)
const div3 = dom.create('<div id="parent">div3</div>');
dom.wrap(test,div3)

const nodes = dom.empty(window.empty)
console.log(nodes) 

dom.attr(test, 'title', 'I am lily')
const title = dom.attr(test, 'title')
console.log(`title: ${title}`)

dom.text(test, '你好，这是新的内容')

dom.js

// window.dom = {} //等于一个空对象
// dom.create = function() {} //第一个API


// //或者
// window.dom = {
//     create:function(){}
// }

// window.dom = {
//     create(tagName){
//        return document.createElement(tagName);
//     }
//  }


window.dom = {
   create(string){
      const container = document.createElement("template")// 先创建一个template标签，template这个标签可以任意元素
      container.innerHTML = string.trim();//  再把标签的内容设置成你的字符，字符转标签的工作由innerHtml来完成
      //去掉空格，去掉文本内容要用trim，否则会导致如果在main.js里const div = dom.create(" 【这里有空格】  <td>hi</td>")
      //就会导致console.log(div),打印出来就会是空对象undefined
      return container.content.firstChild;//然后再拿template标签里的第一个标签给你,这边的标签和节点的意思等同。
   },
   after(node, node2){
   node.parentNode.insertBefore(node2, node.nextSibling);
 },
   before(node, node2){
   node.parentNode.insertBefore(node2, node);
   },
    append(parent,node){
       parent.appendChild(node);
    },
   wrap(node, parent){
      dom.before(node, parent);  //先让parent到Node的前面去
      dom.append(parent, node);  //再让node被parent包起来
   },
   remove(node){
      node.parentNode.removeChild(node)
      return node
   },
  //  empty(node){
  //     node.innerHTML = ''
  //  }
  //若是要保留节点的引用
  // empty(node){
  //    const {childNodes} = node
  //    const array = []
  //    for(let i = 0; i < childNodes.length; i++){
  //       dom.remove(childNodes[i])
  //       array.push(childNodes[i])
  //    }  
  //    return array
  // }

  empty(node){
     const {childNodes} = node //可以和 const childNodes = node.childNodes 划等号
     const array = []
     let x = node.firstChild
     while(x){
        array.push(dom.remove(node.firstChild))
        x = node.firstChild 
     }
     return array
  },//被删掉有7个儿子，原因是index.html
  attr(node, name, value){
     if(arguments.length === 3){
        node.setAttribute(name, value)
     }else if(arguments.length === 2){
        return node.getAttribute(name)
     }
  },
  text(node,string){
     node.innerText = string//ie
     node.textContent = string //firefox,chrome
  }

}

dom.html(node,?)用于读写HTML内容 dom.js代码:

适配：

dom.style(node,{color:'red'})用于修改style main.js:

//相对于 document.createElement('div') 比较简单一点
const div = dom.create("<div>nextDiv</div>")  //dom.create 用于创建节点
console.log(div)

// dom.append(test, div)
const div3 = dom.create('<div id="parent">div3</div>');
dom.wrap(test,div3)

const nodes = dom.empty(window.empty)
console.log(nodes) 

dom.attr(test, 'title', 'I am lily')
const title = dom.attr(test, 'title')
console.log(`title: ${title}`)

dom.text(test, '你在干什么？')
dom.text(test)

dom.style(test, {border:'1px solid red', color:'blue'})

dom.js

// window.dom = {} //等于一个空对象
// dom.create = function() {} //第一个API


// //或者
// window.dom = {
//     create:function(){}
// }

// window.dom = {
//     create(tagName){
//        return document.createElement(tagName);
//     }
//  }


window.dom = {
    create(string){
       const container = document.createElement("template")// 先创建一个template标签，template这个标签可以任意元素
       container.innerHTML = string.trim();//  再把标签的内容设置成你的字符，字符转标签的工作由innerHtml来完成
       //去掉空格，去掉文本内容要用trim，否则会导致如果在main.js里const div = dom.create(" 【这里有空格】  <td>hi</td>")
       //就会导致console.log(div),打印出来就会是空对象undefined
       return container.content.firstChild;//然后再拿template标签里的第一个标签给你,这边的标签和节点的意思等同。
    },
    after(node, node2){
    node.parentNode.insertBefore(node2, node.nextSibling);
  },
    before(node, node2){
    node.parentNode.insertBefore(node2, node);
    },
     append(parent,node){
        parent.appendChild(node);
     },
    wrap(node, parent){
       dom.before(node, parent);  //先让parent到Node的前面去
       dom.append(parent, node);  //再让node被parent包起来
    },
    remove(node){
       node.parentNode.removeChild(node)
       return node
    },
   //  empty(node){
   //     node.innerHTML = ''
   //  }
   //若是要保留节点的引用
   // empty(node){
   //    const {childNodes} = node
   //    const array = []
   //    for(let i = 0; i < childNodes.length; i++){
   //       dom.remove(childNodes[i])
   //       array.push(childNodes[i])
   //    }  
   //    return array
   // }

   empty(node){
      const {childNodes} = node //可以和 const childNodes = node.childNodes 划等号
      const array = []
      let x = node.firstChild
      while(x){
         array.push(dom.remove(node.firstChild))
         x = node.firstChild 
      }
      return array
   },//被删掉有7个儿子，原因是index.html
   attr(node, name, value){
      if(arguments.length === 3){
         node.setAttribute(name, value)
      }else if(arguments.length === 2){
         return node.getAttribute(name)
      }
   },
   text(node,string){
      if(arguments.length === 2){
        node.innerText = string
      }else if(arguments.length === 1){
         if('innerText' in node){
            return node.innerText
         }
        return node.textContent 
      }
     
   },
   html(node, string){
      if(arguments.length === 2){
         node.innerHTML = string
      }else if(arguments.length === 1){
         return node.innerHTML
      }
   },
   style(node, object){
      for(let key in object){
         //key:border/color
         //node.style.border = ...
         //node.style.color = ...
         node.style[key] = object[key]
      }
   }

 }

index.html

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dom1</title>
</head>

<body>
    示例
    <div>
        <div id="test">test<p>段落标题</p>
        </div>
    </div>
    <div id="empty">
        <div id="one">第一个节点</div>
        <div id="two">第二个节点</div>
        <div id="three">第三个节点</div>
    </div>

    <script src="dom.js"></script>
    <script src="main.js"></script>
</body>

</html>

在上面的代码中main.js可以获取到元素的style 添加（第二个参数的意义对象和字符串的区别

dom.style(test, 'border')//'border'字符串获取它的值
dom.style(test, {border:'1px solid red', color:'blue'})// 获取到的是对象{border:'1px solid red', color:'blue'}就是设置它的值
dom.style(test, 'border' '1px solid red')

main.js:

//相对于 document.createElement('div') 比较简单一点
const div = dom.create("<div>nextDiv</div>")  //dom.create 用于创建节点
console.log(div)

// dom.append(test, div)
const div3 = dom.create('<div id="parent">div3</div>');
dom.wrap(test,div3)

const nodes = dom.empty(window.empty)
console.log(nodes) 

dom.attr(test, 'title', 'I am lily')
const title = dom.attr(test, 'title')
console.log(`title: ${title}`)

dom.text(test, '你在干什么？')
dom.text(test)

dom.style(test, {border:'1px solid red', color:'blue'})
console.log(dom.style(test, 'border'))
dom.style(test, 'border', '1px solid black')

dom.js代码：

// window.dom = {} //等于一个空对象
// dom.create = function() {} //第一个API


// //或者
// window.dom = {
//     create:function(){}
// }

// window.dom = {
//     create(tagName){
//        return document.createElement(tagName);
//     }
//  }


window.dom = {
    create(string){
       const container = document.createElement("template")// 先创建一个template标签，template这个标签可以任意元素
       container.innerHTML = string.trim();//  再把标签的内容设置成你的字符，字符转标签的工作由innerHtml来完成
       //去掉空格，去掉文本内容要用trim，否则会导致如果在main.js里const div = dom.create(" 【这里有空格】  <td>hi</td>")
       //就会导致console.log(div),打印出来就会是空对象undefined
       return container.content.firstChild;//然后再拿template标签里的第一个标签给你,这边的标签和节点的意思等同。
    },
    after(node, node2){
    node.parentNode.insertBefore(node2, node.nextSibling);
  },
    before(node, node2){
    node.parentNode.insertBefore(node2, node);
    },
     append(parent,node){
        parent.appendChild(node);
     },
    wrap(node, parent){
       dom.before(node, parent);  //先让parent到Node的前面去
       dom.append(parent, node);  //再让node被parent包起来
    },
    remove(node){
       node.parentNode.removeChild(node)
       return node
    },
   //  empty(node){
   //     node.innerHTML = ''
   //  }
   //若是要保留节点的引用
   // empty(node){
   //    const {childNodes} = node
   //    const array = []
   //    for(let i = 0; i < childNodes.length; i++){
   //       dom.remove(childNodes[i])
   //       array.push(childNodes[i])
   //    }  
   //    return array
   // }

   empty(node){
      const {childNodes} = node //可以和 const childNodes = node.childNodes 划等号
      const array = []
      let x = node.firstChild
      while(x){
         array.push(dom.remove(node.firstChild))
         x = node.firstChild 
      }
      return array
   },//被删掉有7个儿子，原因是index.html
   attr(node, name, value){
      if(arguments.length === 3){
         node.setAttribute(name, value)
      }else if(arguments.length === 2){
         return node.getAttribute(name)
      }
   },
   text(node,string){
      if(arguments.length === 2){
        node.innerText = string
      }else if(arguments.length === 1){
         if('innerText' in node){
            return node.innerText
         }
        return node.textContent 
      }
     
   },
   html(node, string){
      if(arguments.length === 2){
         node.innerHTML = string
      }else if(arguments.length === 1){
         return node.innerHTML
      }
   },
   // style(node, object){
   //    for(let key in object){
   //       //key:border/color
   //       //node.style.border = ...
   //       //node.style.color = ...
   //       node.style[key] = object[key]
   //    }
   // }

   style(node, name, value){
      if(arguments.length === 3){
         //dom.style(div, 'color', 'red')
         node.style[name] = value
      }else if(arguments.length === 2){
         if(typeof name === 'string'){
            //dom.style(div, 'color')
            return node.style[name]
         }else if(name instanceof Object){
            //dom.style(div, {color:'red'})
            const object = name
            for(let key in object){
               node.style[key] = object[key]
            }
         }
      }


   }

 }

index.html

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dom1</title>
</head>

<body>
    示例
    <div>
        <div id="test">test<p>段落标题</p>
        </div>
    </div>
    <div id="empty">
        <div id="one">第一个节点</div>
        <div id="two">第二个节点</div>
        <div id="three">第三个节点</div>
    </div>

    <script src="dom.js"></script>
    <script src="main.js"></script>
</body>

</html>

dom.class.add(node,'blue')用于添加class

main.js代码：

//相对于 document.createElement('div') 比较简单一点
const div = dom.create("<div>nextDiv</div>")  //dom.create 用于创建节点
console.log(div)

// dom.append(test, div)
const div3 = dom.create('<div id="parent">div3</div>');
dom.wrap(test,div3)

const nodes = dom.empty(window.empty)
console.log(nodes) 

dom.attr(test, 'title', 'I am lily')
const title = dom.attr(test, 'title')
console.log(`title: ${title}`)

dom.text(test, '你在干什么？')
dom.text(test)

dom.style(test, {border:'1px solid red', color:'blue'})
console.log(dom.style(test, 'border'))
dom.style(test, 'border', '1px solid black')

dom.class.add(test, 'red')

dom.js

// window.dom = {} //等于一个空对象
// dom.create = function() {} //第一个API


// //或者
// window.dom = {
//     create:function(){}
// }

// window.dom = {
//     create(tagName){
//        return document.createElement(tagName);
//     }
//  }


window.dom = {
    create(string){
       const container = document.createElement("template")// 先创建一个template标签，template这个标签可以任意元素
       container.innerHTML = string.trim();//  再把标签的内容设置成你的字符，字符转标签的工作由innerHtml来完成
       //去掉空格，去掉文本内容要用trim，否则会导致如果在main.js里const div = dom.create(" 【这里有空格】  <td>hi</td>")
       //就会导致console.log(div),打印出来就会是空对象undefined
       return container.content.firstChild;//然后再拿template标签里的第一个标签给你,这边的标签和节点的意思等同。
    },
    after(node, node2){
    node.parentNode.insertBefore(node2, node.nextSibling);
  },
    before(node, node2){
    node.parentNode.insertBefore(node2, node);
    },
     append(parent,node){
        parent.appendChild(node);
     },
    wrap(node, parent){
       dom.before(node, parent);  //先让parent到Node的前面去
       dom.append(parent, node);  //再让node被parent包起来
    },
    remove(node){
       node.parentNode.removeChild(node)
       return node
    },
   //  empty(node){
   //     node.innerHTML = ''
   //  }
   //若是要保留节点的引用
   // empty(node){
   //    const {childNodes} = node
   //    const array = []
   //    for(let i = 0; i < childNodes.length; i++){
   //       dom.remove(childNodes[i])
   //       array.push(childNodes[i])
   //    }  
   //    return array
   // }

   empty(node){
      const {childNodes} = node //可以和 const childNodes = node.childNodes 划等号
      const array = []
      let x = node.firstChild
      while(x){
         array.push(dom.remove(node.firstChild))
         x = node.firstChild 
      }
      return array
   },//被删掉有7个儿子，原因是index.html
   attr(node, name, value){
      if(arguments.length === 3){
         node.setAttribute(name, value)
      }else if(arguments.length === 2){
         return node.getAttribute(name)
      }
   },
   text(node,string){
      if(arguments.length === 2){
        node.innerText = string
      }else if(arguments.length === 1){
         if('innerText' in node){
            return node.innerText
         }
        return node.textContent 
      }
     
   },
   html(node, string){
      if(arguments.length === 2){
         node.innerHTML = string
      }else if(arguments.length === 1){
         return node.innerHTML
      }
   },
   // style(node, object){
   //    for(let key in object){
   //       //key:border/color
   //       //node.style.border = ...
   //       //node.style.color = ...
   //       node.style[key] = object[key]
   //    }
   // }

   style(node, name, value){
      if(arguments.length === 3){
         //dom.style(div, 'color', 'red')
         node.style[name] = value
      }else if(arguments.length === 2){
         if(typeof name === 'string'){
            //dom.style(div, 'color')
            return node.style[name]
         }else if(name instanceof Object){
            //dom.style(div, {color:'red'})
            const object = name
            for(let key in object){
               node.style[key] = object[key]
            }
         }
      }
   },
   class: {
      add(node, className){
         node.classList.add(className)
      },
      remove(node, className){
         node.classList.remove(className)
      },
      has(node, className){
        return node.classList.contains(className)
      }
   }

 };

index.html

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dom1</title>
    <style>
        .red {
            background: red;
        }
    </style>
</head>

<body>
    示例
    <div>
        <div id="test">test<p>段落标题</p>
        </div>
    </div>
    <div id="empty">
        <div id="one">第一个节点</div>
        <div id="two">第二个节点</div>
        <div id="three">第三个节点</div>
    </div>

    <script src="dom.js"></script>
    <script src="main.js"></script>
</body>

</html>

console.log(dom.class.has(test, 'blue'))

dom.js

// window.dom = {} //等于一个空对象
// dom.create = function() {} //第一个API


// //或者
// window.dom = {
//     create:function(){}
// }

// window.dom = {
//     create(tagName){
//        return document.createElement(tagName);
//     }
//  }


window.dom = {
    create(string){
       const container = document.createElement("template")// 先创建一个template标签，template这个标签可以任意元素
       container.innerHTML = string.trim();//  再把标签的内容设置成你的字符，字符转标签的工作由innerHtml来完成
       //去掉空格，去掉文本内容要用trim，否则会导致如果在main.js里const div = dom.create(" 【这里有空格】  <td>hi</td>")
       //就会导致console.log(div),打印出来就会是空对象undefined
       return container.content.firstChild;//然后再拿template标签里的第一个标签给你,这边的标签和节点的意思等同。
    },
    after(node, node2){
    node.parentNode.insertBefore(node2, node.nextSibling);
  },
    before(node, node2){
    node.parentNode.insertBefore(node2, node);
    },
     append(parent,node){
        parent.appendChild(node);
     },
    wrap(node, parent){
       dom.before(node, parent);  //先让parent到Node的前面去
       dom.append(parent, node);  //再让node被parent包起来
    },
    remove(node){
       node.parentNode.removeChild(node)
       return node
    },
   //  empty(node){
   //     node.innerHTML = ''
   //  }
   //若是要保留节点的引用
   // empty(node){
   //    const {childNodes} = node
   //    const array = []
   //    for(let i = 0; i < childNodes.length; i++){
   //       dom.remove(childNodes[i])
   //       array.push(childNodes[i])
   //    }  
   //    return array
   // }

   empty(node){
      const {childNodes} = node //可以和 const childNodes = node.childNodes 划等号
      const array = []
      let x = node.firstChild
      while(x){
         array.push(dom.remove(node.firstChild))
         x = node.firstChild 
      }
      return array
   },//被删掉有7个儿子，原因是index.html
   attr(node, name, value){
      if(arguments.length === 3){
         node.setAttribute(name, value)
      }else if(arguments.length === 2){
         return node.getAttribute(name)
      }
   },
   text(node,string){
      if(arguments.length === 2){
        node.innerText = string
      }else if(arguments.length === 1){
         if('innerText' in node){
            return node.innerText
         }
        return node.textContent 
      }
     
   },
   html(node, string){
      if(arguments.length === 2){
         node.innerHTML = string
      }else if(arguments.length === 1){
         return node.innerHTML
      }
   },
   // style(node, object){
   //    for(let key in object){
   //       //key:border/color
   //       //node.style.border = ...
   //       //node.style.color = ...
   //       node.style[key] = object[key]
   //    }
   // }

   style(node, name, value){
      if(arguments.length === 3){
         //dom.style(div, 'color', 'red')
         node.style[name] = value
      }else if(arguments.length === 2){
         if(typeof name === 'string'){
            //dom.style(div, 'color')
            return node.style[name]
         }else if(name instanceof Object){
            //dom.style(div, {color:'red'})
            const object = name
            for(let key in object){
               node.style[key] = object[key]
            }
         }
      }
   },
   class: {
      add(node, className){
         node.classList.add(className)
      },
      remove(node, className){
         node.classList.remove(className)
      },
      has(node, className){
         return node.classList.contains(className)
      }
   }, 
   on(node, eventName, fn){
      node.addEventListener(eventName, fn)
   },
   off(node, eventName, fn){
      node.removeEventListener(eventName, fn)
   }


 };

main.js

//相对于 document.createElement('div') 比较简单一点
const div = dom.create("<div>nextDiv</div>")  //dom.create 用于创建节点
console.log(div)

// dom.append(test, div)
const div3 = dom.create('<div id="parent">div3</div>');
dom.wrap(test,div3)

const nodes = dom.empty(window.empty)
console.log(nodes) 

dom.attr(test, 'title', 'I am lily')
const title = dom.attr(test, 'title')
console.log(`title: ${title}`)

dom.text(test, '你在干什么？')
dom.text(test)

dom.style(test, {border:'1px solid red', color:'blue'})
console.log(dom.style(test, 'border'))
dom.style(test, 'border', '1px solid black')

dom.class.add(test, 'red')
dom.class.remove(test, 'red')
console.log(dom.class.has(test, 'blue'))

dom.on(test, 'click',()=> {
    console.log('你点击了一下呦！')
})

index.html

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dom1</title>
    <style>
        .red {
            background: red;
        }
    </style>
</head>

<body>
    示例
    <div>
        <div id="test">test<p>段落标题</p>
        </div>
    </div>
    <div id="empty">
        <div id="one">第一个节点</div>
        <div id="two">第二个节点</div>
        <div id="three">第三个节点</div>
    </div>

    <script src="dom.js"></script>
    <script src="main.js"></script>
</body>

</html>