封装DOM，DOM是JS里面最常用的一个接口，单独使用比较麻烦，故封装起来使用，需要时调用

先介绍一种对象风格

对象风格

也叫命名空间风格
window.dom 是我们提供的全局对象
然后在dom上挂很多的函数

增删改查

注意：

  • 在index.html链接顺序中，dom.js要放在main.js文件上方才能优先访问到，封装的dom库在main.js文件中调用
  • 获取到的是否为伪数组，是否需要转换为数组，是否需要获取索引下标才能访问
  • 重点记忆需要变通的函数
    • each遍历
    • 获取元素
    • 修改style等 ```javascript window.dom = {
  1.       //增
  4. create(string) { //用于创建新节点
  5.     const container = document.createElement("template");
  6.     container.innerHTML = string.trim();
  7.     return container.content.firstChild;
  8. },
  9. after(node, node2) { //在node后面新增node2弟弟（变通式，利用现有insertBefore）
  10.     node.parentNode.insertBefore(node2, node.nextSibling);
  11. },
  12. before(node, node2) { //在node前面新增node2哥哥（现有API）
  13.     node.parentNode.insertBefore(node2, node)
  14. },
  15. append(parent, node) { //在parent内新增node儿子
  16.     parent.appendChild(node)
  17. },
  18. wrap(node, parent) { //在node外新增parent爸爸（变通式）（会覆盖旧爸爸）
  19.     dom.before(node, parent); //先让node成为parent的哥哥
  20.     dom.append(parent, node); //再让node成为parent的儿子
  21. },
  25.       //删
  28. remove(node) { //删除父亲指定下的儿子
  29.     node.parentNode.removeChild(node)
  30. },
  31. empty(node) { //删除父亲名下所有儿子
  32.     const array = [];
  33.     let x = node.firstChild;
  34.     while (x) {
  35.         array.push(dom.remove(node.firstChild));
  36.         x = node.firstChild //由于childNode元素会实时变化，因为儿子会发生替位关系，故针对每个大儿子删除，使用while循环不添加计数器
  37.     }
  38.     return array
  39. },
  43.       //改
  48. attr(node, name, value) { //读&写 属性
  49.     if (arguments.length === 3) { //重载（根据参数的不同写不同的代码）
  50.         node.setAttribute(name, value) //现有API ，修改属性
  51.     } else if (arguments.length === 2) {
  52.         return node.getAttribute(name) //现有API ， 获取属性
  53.     }
  54. },
  55. text(node, string) { //读&写 文本内容
  56.     if (arguments.length === 2) {
  57.         if ('innerText' in node) { //适配
  58.             node.innerText = string;
  59.         } else {
  60.             node.textContent = string;
  61.         }
  62.     } else if (arguments.length === 1) {
  63.         if ('innerText' in node) { //适配
  64.             return node.innerText
  65.         } else {
  66.             return node.textContent
  67.         }
  68.     }
  69. },
  70. html(node, string) { //读&写 html内容
  71.     if (arguments === 2) {
  72.         node.innerHTML = string;
  73.     } else if (arguments.length === 1) {
  74.         return node.innerHTML
  75.     }
  76. },
  77. style(node, name, value) { //读&写 style
  78.     if (arguments.length === 3) {
  79.         // dom.style(div,'color','red') 
  80.         node.style[name] = value
  81.     } else if (arguments.length === 2) {
  82.         if (typeof name === 'string') {
  83.             // dom.style(div,'color')
  84.             return node.style[name]
  85.         } else if (name instanceof Object) { //instanceof判断name是否为Object的实例,返回值为布尔值
  86.             // dom.style(div,{color:'red'})
  87.             const object = name;
  88.             for (let key in object) { //遍历object，把object中所有未知的key声明且读到
  89.                 node.style[key] = object[key] //将object中所有 [key变量下的值] 存入node的style中key变量下
  90.             }
  91.         }
  92.     }
  93. },
  94. class: {   //读&写 class
  95.     add(node, className) {
  96.         node.classList.add(className)
  97.     },
  98.     remove(node, className) {
  99.         node.classList.remove(className);
  100.     },
  101.     has(node, className) {
  102.         return node.classList.contains(className) //记得return返回值得确认
  103.     }
  104. },
  106. //改DOM事件
  107. on(node, eventName, fn) {
  108.     node.addEventListener(eventName, fn)
  109. },
  110. off(node, eventName, fn) {
  111.     node.removeEventListener(eventName, fn)
  112. },
  118. //查，用于获取元素（以上均用全局id）
  122. find(selector, scope) { //通过选择器和指定范围查找
  123.     return (scope || document).querySelectorAll(selector) //存在第二个参数scope则在第二个参数的范围里查找，若无则在document中查找
  124. },
  125. parent(node) { //传入节点，返回节点的爸爸
  126.     return node.parentNode
  127. },
  128. children(node) { //传入节点，返回节点的儿子
  129.     return node.children
  130. },
  131. siblings(node) { //传入节点，返回兄弟姐妹元素
  132.     return Array.from(node.parentNode.children).filter(n => n !== node) //得到的伪数组需要转换为数组才能使用filter接口，过滤其他元素，将这些元素存入数组并返回
  133. },
  134. next(node) { //传入节点，返回弟弟妹妹，排除文本节点
  135.     let x = node.nextSibling
  136.     while (x && x.nodeType === 3) { //x存在且x的节点类型为文本节点（同时也需排除x节点不存在的前提）
  137.         x = x.nextSibling //若该节点属于文本节点，则遍历下个节点，直到元素节点再返回
  138.     }
  139.     return x
  140. },
  141. previous(node) { //传入节点，返回哥哥姐姐，排除文本节点
  142.     let x = node.previousSibling
  143.     while (x && x.nodeType === 3) {
  144.         x = x.previousSibling
  145.     }
  146.     return x
  147. },
  148. each(nodeList, fn) { //对节点列表中的每一个节点遍历调用fn函数
  149.     for (let i = 0; i < nodeList.length; i++) {
  150.         fn.call(null, nodeList[i])
  151.     }
  152. },
  153. index(node) { //传入节点，获取节点的索引
  154.     const list = dom.children(node.parentNode) //遍历其父亲的所有孩子，纳入一个列表
  155.     let i //注意此处i声明在函数外，以便return
  156.     for (i = 0; i < list.length; i++) {
  157.         if (list[i] === node) {
  158.             break
  159.         }
  160.     }
  161.     return i
  162. }

} ```