封装（2）

查：

dom.find('选择器')   用于获取标签或标签们
dom.parent(node)    用于获取父元素
dom.children(node)  用于获取子元素
dom.siblings(node)  用于获取兄弟姐妹元素 
dom.next(node)      用于获取弟弟
dom.previous(node)  用于获取哥哥
dom.each(nodes,fn)  用于遍历所有节点
dom.index(node)     用于获取排行老几

• dom.find('选择器') 用于获取标签或标签们 dom.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('你点击了一下呦！')
}) 
//==============================
const testDiv = dom.find('#test')[0]
console.log(testDiv)

main.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)
  },
   find(selector){
      return document.querySelectorAll(selector)
   }

};

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>

• dom.parent(node) 用于获取父元素 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('你点击了一下呦！')
}) 

const testDiv = dom.find('#test')[0]
console.log(testDiv)
const test2 = dom.find('#test2')[0]
console.log(dom.find('.red', test2)[0])

console.log(dom.parent(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){
      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)
   },
    find(selector, scope){
       return (scope || document).querySelectorAll(selector)
    },
    parent(node){
       return node.parentNode
    }
 };
 

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"><span>test</span>
            <p class="red">段落标题</p>test2
        </div>
        <div id="test2">
            <p class="red">段落标题3</p>test2
        </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.children(node) 用于获取子元素
• dom.siblings(node) 用于获取兄弟姐妹元素
• dom.next(node) 用于获取弟弟
• dom.previous(node) 用于获取哥哥
• dom.each(nodes,fn) 用于遍历所有节点

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"><span>test</span>
            <p class="red">段落标题</p>test2
        </div>
        <div id="test2">
            <p class="red">段落标题3</p>test2
        </div>
    </div>
    <div id="empty">
        <div id="one">第一个节点</div>
        <div id="two">第二个节点</div>
        <div id="three">第三个节点</div>
    </div>

    <div id="siblings">
        <div id="s1">第一个节点</div>
        <div id="s2">第二个节点</div>
        <div id="s3">第三个节点</div>
    </div>
    <div>
        <div id="travel">
            <div id="t1">t1</div>
            <div id="t2">t2</div>
            <div id="t3">t3</div>
        </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.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('你点击了一下呦！')
}) 

const testDiv = dom.find('#test')[0]
console.log(testDiv)
const test2 = dom.find('#test2')[0]
console.log(dom.find('.red', test2)[0])

console.log(dom.parent(test))

const s2 = dom.find('#s2')[0]
console.log(dom.siblings(s2))
console.log(dom.next(s2))
console.log(dom.previous(s2))

const t = dom.find('#travel')[0]
dom.each(dom.children(t),(n)=>dom.style(n, 'color', 'purple'))

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)
   },
    find(selector, scope){
       return (scope || document).querySelectorAll(selector)
    },
    parent(node){
       return node.parentNode
    },
    children(node){
       return node.children
    },
     siblings(node){
       return Array.from(node.parentNode.children)
       .filter(n => n !== node)
    },
    next(node){
       let x = node.nextSibling
       while(x && x.nodeType === 3){//1是节点，3是文本
          x = x.nextSibling
       } 
     return x
    },
    previous(node){
       let x = node.previousSibling
       while(x && x.nodeType === 3){
         x = x.previousSibling
      } 
     return x
    },
    each(nodeList, fn){
       for(let i=0; i<nodeList.length;i++){
          fn.call(null, nodeList[i])
       }
    }
 };

• dom.index(node) 用于获取排行老几

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)
   },
    find(selector, scope){
       return (scope || document).querySelectorAll(selector)
    },
    parent(node){
       return node.parentNode
    },
    children(node){
       return node.children
    },
     siblings(node){
       return Array.from(node.parentNode.children)
       .filter(n => n !== node)
    },
    next(node){
       let x = node.nextSibling
       while(x && x.nodeType === 3){//1是节点，3是文本
          x = x.nextSibling
       } 
     return x
    },
    previous(node){
       let x = node.previousSibling
       while(x && x.nodeType === 3){
         x = x.previousSibling
      } 
     return x
    },
    each(nodeList, fn){
       for(let i=0; i<nodeList.length;i++){
          fn.call(null, nodeList[i])
       }
    },
    index(node){
       let i;
       const list = dom.children(node.parentNode);
       for( i=0;i<list.length;i++){
          if(list[i] === node){
             break
          }
       }
       return i
    }
 };
 

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('你点击了一下呦！')
}) 

const testDiv = dom.find('#test')[0]
console.log(testDiv)
const test2 = dom.find('#test2')[0]
console.log(dom.find('.red', test2)[0])

console.log(dom.parent(test))

const s2 = dom.find('#s2')[0]
console.log(dom.siblings(s2))
console.log(dom.next(s2))
console.log(dom.previous(s2))

const t = dom.find('#travel')[0]
dom.each(dom.children(t),(n)=>dom.style(n, 'color', 'purple'))

console.log(dom.index(s2))

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"><span>test</span>
            <p class="red">段落标题</p>test2
        </div>
        <div id="test2">
            <p class="red">段落标题3</p>test2
        </div>
    </div>
    <div id="empty">
        <div id="one">第一个节点</div>
        <div id="two">第二个节点</div>
        <div id="three">第三个节点</div>
    </div>

    <div id="siblings">
        <div id="s1">第一个节点</div>
        <div id="s2">第二个节点</div>
        <div id="s3">第三个节点</div>
    </div>
    <div>
        <div id="travel">
            <div id="t1">t1</div>
            <div id="t2">t2</div>
            <div id="t3">t3</div>
        </div>
    </div>

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

</html>

【第一就是第二从零开始】