29·灵魂前端工程师养成-封装DOM库

封装DOM前戏
使用两种不同的风格来封装DOM
- 对象风格

-曾老湿, 江湖人称曾老大。

-多年互联网运维工作经验，曾负责过大规模集群架构自动化运维管理工作。 -擅长Web集群架构与自动化运维，曾负责国内某大型金融公司运维工作。 -devops项目经理兼DBA。 -开发过一套自动化运维平台（功能如下）： 1)整合了各个公有云API，自主创建云主机。 2)ELK自动化收集日志功能。 3)Saltstack自动化运维统一配置管理工具。 4)Git、Jenkins自动化代码上线及自动化测试平台。 5)堡垒机，连接Linux、Windows平台及日志审计。 6)SQL执行及审批流程。 7)慢查询日志分析web界面。

封装DOM前戏

什么是封装？

例如我们生活中，笔记本电脑就是由CPU、内存、硬盘、网卡、显卡、声卡、主板..等等一些硬件组装起来的，用户只需要接触键盘鼠标触控板等就可以操作复杂的计算机。

什么是接口？

被封装好的东西，需要暴露一些功能给外部，这些功能就是接口，例如：USB接口，Type-C接口，HDMI接口，VGA接口，IDE接口，SATA接口，设备只需要支持这些接口，就可以与被封装的东西进行通讯。

比如：鼠标支持USB接口，就可以连接主机箱，操作显示器支持HDMI接口，就可以连接主机箱，显示操作界面

使用两种不同的风格来封装DOM

对象风格

增

也叫命名空间风格： window.dom是我们提供的全局对象

首先使用VScode创建新项目dom-1,然后创建一个src目录，目录下创建一个index.html一个main.js

代码语言：javascript复制

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DRZ DOM 1</title>
</head>
<body>
    示例
    <script src="main.js"> </script>
</body>
</html>

代码语言：javascript复制

console.log('hi')

运行项目

代码语言：javascript复制

MacBook-Pro:dom-1 driverzeng$ parcel src/index.html

访问项目

创建 dom.js

代码语言：javascript复制

window.dom = {
    create(string){
        const container = document.createElement("template")
        container.innerHTML = string.trim()
        return  container.content.firstChild
    }
}

index.html

代码语言：javascript复制

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DRZ DOM 1</title>
</head>
<body>
    示例
    <script src="dom.js"></script>
    <script src="main.js"> </script>
</body>
</html>

main.js

代码语言：javascript复制

const div = dom.create("<div>hi</div>")
console.log(div)

main.js

代码语言：javascript复制

const div = dom.create("<div><span>hi</span></div>")
console.log(div)
const td = dom.create("<td>zls</td>")
console.log(td)

以上就是我们新增的第一个功能 create : 创建一个元素

那么接下来，我们再新加一个功能，after : 给现有元素加个弟弟

index.html

代码语言：javascript复制

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DRZ DOM 1</title>
</head>
<body>
    <div id="test">zls_test</div>
    示例
    <script src="dom.js"></script>
    <script src="main.js"> </script>
</body>
</html>

dom.js

代码语言：javascript复制

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)
    }
}

main.js

代码语言：javascript复制

const div = dom.create("<div>newDiv</div>")
console.log(div)
dom.after(test,div)

那么接下来，我们再新加一个功能，before : 给现有元素加个哥哥

index.html

代码语言：javascript复制

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DRZ DOM 1</title>
</head>
<body>
    <div id="test">zls_test</div>
    示例
    <script src="dom.js"></script>
    <script src="main.js"> </script>
</body>
</html>

dom.js

代码语言：javascript复制

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)
    },
    before(node,node2){
        node.parentNode.insertBefore(node2,node)
    }
}

main.js

代码语言：javascript复制

const div = dom.create("<div>newDiv</div>")
const div2 = dom.create("<div>SecondDiv</div>")
console.log(div)
dom.after(test,div)
dom.before(test,div2)

那么接下来，我们再新加一个功能，append : 给现有元素加个儿子

dom.js

代码语言：javascript复制

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)
    },
    before(node,node2){
        node.parentNode.insertBefore(node2,node)
    },
    append(parent,node){
        parent.appendChild(node)
    }
}

那么接下来，我们再新加一个功能，wrap : 给现有元素加个爸爸

index.html

代码语言：javascript复制

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DRZ DOM 1</title>
</head>
<body>
    示例
    
    <div>
        <div id="test">zls_test</div>
    </div>

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

dom.js

代码语言：javascript复制

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)
    },
    before(node,node2){
        node.parentNode.insertBefore(node2,node)
    },
    append(parent,node){
        parent.appendChild(node)
    },
    wrap(node,parent){
        dom.before(node,parent)
        dom.append(parent,node)
    }
}

main.js

代码语言：javascript复制

const div = dom.create("<div>newDiv</div>")
console.log(div)

dom.after(test,div)

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

删

以上内容，都是对dom的增。添加元素，接下来我们来写删。删除元素。

1.remove：删除节点

dom.js

代码语言：javascript复制

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)
    },
    before(node,node2){
        node.parentNode.insertBefore(node2,node)
    },
    append(parent,node){
        parent.appendChild(node)
    },
    wrap(node,parent){
        dom.before(node,parent)
        dom.append(parent,node)
    },
    remove(node){
         node.parentNode.removeChild(node)
         return node
    }
}

2.empty：删除后代

dom.js

代码语言：javascript复制

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)
    },
    before(node,node2){
        node.parentNode.insertBefore(node2,node)
    },
    append(parent,node){
        parent.appendChild(node)
    },
    wrap(node,parent){
        dom.before(node,parent)
        dom.append(parent,node)
    },
    remove(node){
         node.parentNode.removeChild(node)
         return node
    },
    empty(node){
        const {childNodes} = node
        const array = []
        let x = node.firstChild
        while(x){
            array.push(dom.remove(node.firstChild))
            x = node.firstChild
        }
        return array
    }
}

index.html

代码语言：javascript复制

 <!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DRZ DOM 1</title>
</head>
<body>
    示例

    <div>
        <div id="test">zls_test</div>
    </div>

    <div id="empty">
        <div id="e1"></div>
        <div id="e2"></div>
        <div id="3"></div>
    </div>
    
    <script src="dom.js"></script>
    <script src="main.js"> </script>
</body>
</html>

main.js

代码语言：javascript复制

 const div = dom.create("<div>newDiv</div>")
console.log(div)

dom.after(test,div)

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

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

改

以上内容，都是对dom的删。删除元素，接下来我们来写改。修改元素。

1.attr ：用于读写属性

dom.js

代码语言：javascript复制

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)
    },
    before(node,node2){
        node.parentNode.insertBefore(node2,node)
    },
    append(parent,node){
        parent.appendChild(node)
    },
    wrap(node,parent){
        dom.before(node,parent)
        dom.append(parent,node)
    },
    remove(node){
         node.parentNode.removeChild(node)
         return node
    },
    empty(node){
        // const childNodes = node.childNodes
        const {childNodes} = node
        const array = []
        let x = node.firstChild
        while(x){
            array.push(dom.remove(node.firstChild))
            x = node.firstChild
        }
        return array
    },
    attr(node,name,value){
        node.setAttribute(name,value)
    }
}

main.js

代码语言：javascript复制

const div = dom.create("<div>newDiv</div>")
console.log(div)

dom.after(test,div)

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

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

 dom.attr(test,'title','Hi I am Zeng Lao Shi')

读取title如何办到？

dom.js

代码语言：javascript复制

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)
    },
    before(node,node2){
        node.parentNode.insertBefore(node2,node)
    },
    append(parent,node){
        parent.appendChild(node)
    },
    wrap(node,parent){
        dom.before(node,parent)
        dom.append(parent,node)
    },
    remove(node){
         node.parentNode.removeChild(node)
         return node
    },
    empty(node){
        // const childNodes = node.childNodes
        const {childNodes} = node
        const array = []
        let x = node.firstChild
        while(x){
            array.push(dom.remove(node.firstChild))
            x = node.firstChild
        }
        return array
    },
    attr(node,name,value){
        if(arguments.length === 3){
            node.setAttribute(name,value)
        }else if(arguments.length === 2){
            return node.getAttribute(name)
        }
        
    }
}

main.js

代码语言：javascript复制

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

2.text ：用于读写文本内容

我们设置修改文本内容

main.js

代码语言：javascript复制

dom.text(test,'你好这是新的文本内容出自曾老湿')

dom.js

代码语言：javascript复制

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)
    },
    before(node,node2){
        node.parentNode.insertBefore(node2,node)
    },
    append(parent,node){
        parent.appendChild(node)
    },
    wrap(node,parent){
        dom.before(node,parent)
        dom.append(parent,node)
    },
    remove(node){
         node.parentNode.removeChild(node)
         return node
    },
    empty(node){
        // const childNodes = node.childNodes
        const {childNodes} = node
        const array = []
        let x = node.firstChild
        while(x){
            array.push(dom.remove(node.firstChild))
            x = node.firstChild
        }
        return array
    },
    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和Firefox和chrome

dom.js

代码语言：javascript复制

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)
    },
    before(node,node2){
        node.parentNode.insertBefore(node2,node)
    },
    append(parent,node){
        parent.appendChild(node)
    },
    wrap(node,parent){
        dom.before(node,parent)
        dom.append(parent,node)
    },
    remove(node){
         node.parentNode.removeChild(node)
         return node
    },
    empty(node){
        // const childNodes = node.childNodes
        const {childNodes} = node
        const array = []
        let x = node.firstChild
        while(x){
            array.push(dom.remove(node.firstChild))
            x = node.firstChild
        }
        return array
    },
    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('innerText' in node){
            node.innerText = string
        }else{
            node.textContent =  string
        }
    }
}

那么接下来我们想要读取text的内容，怎么办？我们还是通过参数的长度来判断。

dom.js

代码语言：javascript复制

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)
    },
    before(node,node2){
        node.parentNode.insertBefore(node2,node)
    },
    append(parent,node){
        parent.appendChild(node)
    },
    wrap(node,parent){
        dom.before(node,parent)
        dom.append(parent,node)
    },
    remove(node){
         node.parentNode.removeChild(node)
         return node
    },
    empty(node){
        // const childNodes = node.childNodes
        const {childNodes} = node
        const array = []
        let x = node.firstChild
        while(x){
            array.push(dom.remove(node.firstChild))
            x = node.firstChild
        }
        return array
    },
    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){
            if('innerText' in node){
                node.innerText = string
            }else{
                node.textContent =  string
            }
        }else if(arguments.length === 1){
            if('innerText' in node){
                return node.innerText
            }else{
                return node.textContent
            }
        }
    }
}

3.html ：用于读写html内容

html的方法和上面的text一样

dom.js

代码语言：javascript复制

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)
    },
    before(node,node2){
        node.parentNode.insertBefore(node2,node)
    },
    append(parent,node){
        parent.appendChild(node)
    },
    wrap(node,parent){
        dom.before(node,parent)
        dom.append(parent,node)
    },
    remove(node){
         node.parentNode.removeChild(node)
         return node
    },
    empty(node){
        // const childNodes = node.childNodes
        const {childNodes} = node
        const array = []
        let x = node.firstChild
        while(x){
            array.push(dom.remove(node.firstChild))
            x = node.firstChild
        }
        return array
    },
    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){
            if('innerText' in node){
                node.innerText = string
            }else{
                node.textContent =  string
            }
        }else if(arguments.length === 1){
            if('innerText' in node){
                return node.innerText
            }else{
                return node.textContent
            }
        }
    },
    html(node,string){
        if(arguments.length === 2){
            node.innerHTML = string
        }else if(arguments.length === 1){
            return node.innerHTML
        }
    }
}

4.style ：用于修改style

style用于修改属性，可以加颜色，加border ...

main.js

代码语言：javascript复制

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

dom.js

代码语言：javascript复制

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)
    },
    before(node,node2){
        node.parentNode.insertBefore(node2,node)
    },
    append(parent,node){
        parent.appendChild(node)
    },
    wrap(node,parent){
        dom.before(node,parent)
        dom.append(parent,node)
    },
    remove(node){
         node.parentNode.removeChild(node)
         return node
    },
    empty(node){
        // const childNodes = node.childNodes
        const {childNodes} = node
        const array = []
        let x = node.firstChild
        while(x){
            array.push(dom.remove(node.firstChild))
            x = node.firstChild
        }
        return array
    },
    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){
            if('innerText' in node){
                node.innerText = string
            }else{
                node.textContent =  string
            }
        }else if(arguments.length === 1){
            if('innerText' in node){
                return node.innerText
            }else{
                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){
            node.style[key] = object[key]
        }
    }
}

读取元素，该怎么办呢？

main.js

代码语言：javascript复制

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

dom.js

代码语言：javascript复制

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)
    },
    before(node,node2){
        node.parentNode.insertBefore(node2,node)
    },
    append(parent,node){
        parent.appendChild(node)
    },
    wrap(node,parent){
        dom.before(node,parent)
        dom.append(parent,node)
    },
    remove(node){
         node.parentNode.removeChild(node)
         return node
    },
    empty(node){
        // const childNodes = node.childNodes
        const {childNodes} = node
        const array = []
        let x = node.firstChild
        while(x){
            array.push(dom.remove(node.firstChild))
            x = node.firstChild
        }
        return array
    },
    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){
            if('innerText' in node){
                node.innerText = string
            }else{
                node.textContent =  string
            }
        }else if(arguments.length === 1){
            if('innerText' in node){
                return node.innerText
            }else{
                return node.textContent
            }
        }
    },
    html(node,string){
        if(arguments.length === 2){
            node.innerHTML = string
        }else if(arguments.length === 1){
            return node.innerHTML
        }
    },
    style(node,name,value){
        if(arguments.length === 3){
            node.style[name] = value
        }else if(arguments.length === 2){
            if(typeof name === 'string'){
                return node.style[name]
            }else if(name instanceof Object){
                const object = name
                for(let key in object){
                    node.style[key] = object[key]
                }
            }
        }
    }
}

5.class.add ：用于添加class 和 class.remove ：用于删除class

index.html

代码语言：javascript复制

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DRZ DOM 1</title>
    <style>
        .red{
            background: red;
        }
    </style>
</head>
<body>
    示例

    <div>
        <div id="test">zls_test</div>
    </div>

    <div id="empty">
        <div id="e1"></div>
        <div id="e2"></div>
        <div id="3"></div>
    </div>
    
    <script src="dom.js"></script>
    <script src="main.js"> </script>
</body>
</html>

main.js

代码语言：javascript复制

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

dom.js

代码语言：javascript复制

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)
    },
    before(node,node2){
        node.parentNode.insertBefore(node2,node)
    },
    append(parent,node){
        parent.appendChild(node)
    },
    wrap(node,parent){
        dom.before(node,parent)
        dom.append(parent,node)
    },
    remove(node){
         node.parentNode.removeChild(node)
         return node
    },
    empty(node){
        // const childNodes = node.childNodes
        const {childNodes} = node
        const array = []
        let x = node.firstChild
        while(x){
            array.push(dom.remove(node.firstChild))
            x = node.firstChild
        }
        return array
    },
    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){
            if('innerText' in node){
                node.innerText = string
            }else{
                node.textContent =  string
            }
        }else if(arguments.length === 1){
            if('innerText' in node){
                return node.innerText
            }else{
                return node.textContent
            }
        }
    },
    html(node,string){
        if(arguments.length === 2){
            node.innerHTML = string
        }else if(arguments.length === 1){
            return node.innerHTML
        }
    },
    style(node,name,value){
        if(arguments.length === 3){
            node.style[name] = value
        }else if(arguments.length === 2){
            if(typeof name === 'string'){
                return node.style[name]
            }else if(name instanceof Object){
                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)
        }
    }
}

删除红色：

main.js

代码语言：javascript复制

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

添加一个红色，添加一个蓝色，然后把蓝色删掉

main.js

代码语言：javascript复制

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

查看蓝色是否在里面

main.js

代码语言：javascript复制

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

6.on ：用于添加事件监听和 off ：用于删除事件监听

main.js

代码语言：javascript复制

const fn = ()=>{
    console.log('点击了')
}
dom.on(test,'click',fn)

dom.js

代码语言：javascript复制

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)
    },
    before(node,node2){
        node.parentNode.insertBefore(node2,node)
    },
    append(parent,node){
        parent.appendChild(node)
    },
    wrap(node,parent){
        dom.before(node,parent)
        dom.append(parent,node)
    },
    remove(node){
         node.parentNode.removeChild(node)
         return node
    },
    empty(node){
        // const childNodes = node.childNodes
        const {childNodes} = node
        const array = []
        let x = node.firstChild
        while(x){
            array.push(dom.remove(node.firstChild))
            x = node.firstChild
        }
        return array
    },
    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){
            if('innerText' in node){
                node.innerText = string
            }else{
                node.textContent =  string
            }
        }else if(arguments.length === 1){
            if('innerText' in node){
                return node.innerText
            }else{
                return node.textContent
            }
        }
    },
    html(node,string){
        if(arguments.length === 2){
            node.innerHTML = string
        }else if(arguments.length === 1){
            return node.innerHTML
        }
    },
    style(node,name,value){
        if(arguments.length === 3){
            node.style[name] = value
        }else if(arguments.length === 2){
            if(typeof name === 'string'){
                return node.style[name]
            }else if(name instanceof Object){
                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)
    }
}

查

以上内容，都是对dom的改。添加元素，接下来我们来写查。查看元素。

1. dom.find('选择器') 用于获取标签或标签们

main.js

代码语言：javascript复制

const testDiv = dome.find('#test')[0]
console.log(testDiv)

dom.js

代码语言：javascript复制

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)
    },
    before(node,node2){
        node.parentNode.insertBefore(node2,node)
    },
    append(parent,node){
        parent.appendChild(node)
    },
    wrap(node,parent){
        dom.before(node,parent)
        dom.append(parent,node)
    },
    remove(node){
         node.parentNode.removeChild(node)
         return node
    },
    empty(node){
        // const childNodes = node.childNodes
        const {childNodes} = node
        const array = []
        let x = node.firstChild
        while(x){
            array.push(dom.remove(node.firstChild))
            x = node.firstChild
        }
        return array
    },
    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){
            if('innerText' in node){
                node.innerText = string
            }else{
                node.textContent =  string
            }
        }else if(arguments.length === 1){
            if('innerText' in node){
                return node.innerText
            }else{
                return node.textContent
            }
        }
    },
    html(node,string){
        if(arguments.length === 2){
            node.innerHTML = string
        }else if(arguments.length === 1){
            return node.innerHTML
        }
    },
    style(node,name,value){
        if(arguments.length === 3){
            node.style[name] = value
        }else if(arguments.length === 2){
            if(typeof name === 'string'){
                return node.style[name]
            }else if(name instanceof Object){
                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

代码语言：javascript复制

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DRZ DOM 1</title>
    <style>
        .red{
            background: red;
        }
    </style>
</head>
<body>
    示例
    <div>
        <div id="test"><span>zls_test1</span>
            <p class="red">段落标签3</p>
        </div>
    </div>
    <div id="zls_test2">
        <p class="red">段落标签3</p>
    </div>

    <div id="empty">
        <div id="e1"></div>
        <div id="e2"></div>
        <div id="3"></div>
    </div>
    
    <script src="dom.js"></script>
    <script src="main.js"> </script>
</body>
</html>

如上html文件，如果我只想从zls_test2中获取元素标签。不想从zls_test1中获取，那么我们还需要修改一下代码。

dom.js

代码语言：javascript复制

    find(selector,scope){
        return (scope || document).querySelectorAll(selector)
    }

main.js

代码语言：javascript复制

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

2. dom.parent(node) 用于获取父元素

找爸爸

main.js

代码语言：javascript复制

console.log(dom.parent(test))

dom.js

代码语言：javascript复制

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)
    },
    before(node,node2){
        node.parentNode.insertBefore(node2,node)
    },
    append(parent,node){
        parent.appendChild(node)
    },
    wrap(node,parent){
        dom.before(node,parent)
        dom.append(parent,node)
    },
    remove(node){
         node.parentNode.removeChild(node)
         return node
    },
    empty(node){
        // const childNodes = node.childNodes
        const {childNodes} = node
        const array = []
        let x = node.firstChild
        while(x){
            array.push(dom.remove(node.firstChild))
            x = node.firstChild
        }
        return array
    },
    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){
            if('innerText' in node){
                node.innerText = string
            }else{
                node.textContent =  string
            }
        }else if(arguments.length === 1){
            if('innerText' in node){
                return node.innerText
            }else{
                return node.textContent
            }
        }
    },
    html(node,string){
        if(arguments.length === 2){
            node.innerHTML = string
        }else if(arguments.length === 1){
            return node.innerHTML
        }
    },
    style(node,name,value){
        if(arguments.length === 3){
            node.style[name] = value
        }else if(arguments.length === 2){
            if(typeof name === 'string'){
                return node.style[name]
            }else if(name instanceof Object){
                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
    }
}

3. dom.children(node) 用于获取子元素 找儿子

dom.js

代码语言：javascript复制

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)
    },
    before(node,node2){
        node.parentNode.insertBefore(node2,node)
    },
    append(parent,node){
        parent.appendChild(node)
    },
    wrap(node,parent){
        dom.before(node,parent)
        dom.append(parent,node)
    },
    remove(node){
         node.parentNode.removeChild(node)
         return node
    },
    empty(node){
        // const childNodes = node.childNodes
        const {childNodes} = node
        const array = []
        let x = node.firstChild
        while(x){
            array.push(dom.remove(node.firstChild))
            x = node.firstChild
        }
        return array
    },
    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){
            if('innerText' in node){
                node.innerText = string
            }else{
                node.textContent =  string
            }
        }else if(arguments.length === 1){
            if('innerText' in node){
                return node.innerText
            }else{
                return node.textContent
            }
        }
    },
    html(node,string){
        if(arguments.length === 2){
            node.innerHTML = string
        }else if(arguments.length === 1){
            return node.innerHTML
        }
    },
    style(node,name,value){
        if(arguments.length === 3){
            node.style[name] = value
        }else if(arguments.length === 2){
            if(typeof name === 'string'){
                return node.style[name]
            }else if(name instanceof Object){
                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
    }
}

4. dom.siblings(node) 用于获取兄弟姐妹元素

找兄弟姐妹

dom.js

代码语言：javascript复制

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)
    },
    before(node,node2){
        node.parentNode.insertBefore(node2,node)
    },
    append(parent,node){
        parent.appendChild(node)
    },
    wrap(node,parent){
        dom.before(node,parent)
        dom.append(parent,node)
    },
    remove(node){
         node.parentNode.removeChild(node)
         return node
    },
    empty(node){
        // const childNodes = node.childNodes
        const {childNodes} = node
        const array = []
        let x = node.firstChild
        while(x){
            array.push(dom.remove(node.firstChild))
            x = node.firstChild
        }
        return array
    },
    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){
            if('innerText' in node){
                node.innerText = string
            }else{
                node.textContent =  string
            }
        }else if(arguments.length === 1){
            if('innerText' in node){
                return node.innerText
            }else{
                return node.textContent
            }
        }
    },
    html(node,string){
        if(arguments.length === 2){
            node.innerHTML = string
        }else if(arguments.length === 1){
            return node.innerHTML
        }
    },
    style(node,name,value){
        if(arguments.length === 3){
            node.style[name] = value
        }else if(arguments.length === 2){
            if(typeof name === 'string'){
                return node.style[name]
            }else if(name instanceof Object){
                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)
    }
}

main.js

代码语言：javascript复制

console.log(dom.siblings(dom.find('#s2')[0]))

index.html

代码语言：javascript复制

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DRZ DOM 1</title>
    <style>
        .red{
            background: red;
        }
    </style>
</head>
<body>
    示例
    <div>
        <div id="test"><span>zls_test1</span>
            <p class="red">段落标签3</p>
        </div>
    </div>
    <div id="zls_test2">
        <p class="red">段落标签3</p>
    </div>

    <div id="empty">
        <div id="e1"></div>
        <div id="e2"></div>
        <div id="e3"></div>
    </div>

    <div id="siblings">
        <div id="s1"></div>
        <div id="s2"></div>
        <div id="s3"></div>
    </div>
    
    <script src="dom.js"></script>
    <script src="main.js"> </script>
</body>
</html>

5. dom.next(node) 用于获取弟弟元素

找弟弟

main.js

代码语言：javascript复制

console.log(dom.next(dom.find('#s2')[0]))

dom.js

代码语言：javascript复制

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)
    },
    before(node,node2){
        node.parentNode.insertBefore(node2,node)
    },
    append(parent,node){
        parent.appendChild(node)
    },
    wrap(node,parent){
        dom.before(node,parent)
        dom.append(parent,node)
    },
    remove(node){
         node.parentNode.removeChild(node)
         return node
    },
    empty(node){
        // const childNodes = node.childNodes
        const {childNodes} = node
        const array = []
        let x = node.firstChild
        while(x){
            array.push(dom.remove(node.firstChild))
            x = node.firstChild
        }
        return array
    },
    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){
            if('innerText' in node){
                node.innerText = string
            }else{
                node.textContent =  string
            }
        }else if(arguments.length === 1){
            if('innerText' in node){
                return node.innerText
            }else{
                return node.textContent
            }
        }
    },
    html(node,string){
        if(arguments.length === 2){
            node.innerHTML = string
        }else if(arguments.length === 1){
            return node.innerHTML
        }
    },
    style(node,name,value){
        if(arguments.length === 3){
            node.style[name] = value
        }else if(arguments.length === 2){
            if(typeof name === 'string'){
                return node.style[name]
            }else if(name instanceof Object){
                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){
            x = x.nextSibling
        }
        return x
    }
}

6. dom.previous(node) 用于获取哥哥元素 找哥哥

dom.js

代码语言：javascript复制

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)
    },
    before(node,node2){
        node.parentNode.insertBefore(node2,node)
    },
    append(parent,node){
        parent.appendChild(node)
    },
    wrap(node,parent){
        dom.before(node,parent)
        dom.append(parent,node)
    },
    remove(node){
         node.parentNode.removeChild(node)
         return node
    },
    empty(node){
        // const childNodes = node.childNodes
        const {childNodes} = node
        const array = []
        let x = node.firstChild
        while(x){
            array.push(dom.remove(node.firstChild))
            x = node.firstChild
        }
        return array
    },
    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){
            if('innerText' in node){
                node.innerText = string
            }else{
                node.textContent =  string
            }
        }else if(arguments.length === 1){
            if('innerText' in node){
                return node.innerText
            }else{
                return node.textContent
            }
        }
    },
    html(node,string){
        if(arguments.length === 2){
            node.innerHTML = string
        }else if(arguments.length === 1){
            return node.innerHTML
        }
    },
    style(node,name,value){
        if(arguments.length === 3){
            node.style[name] = value
        }else if(arguments.length === 2){
            if(typeof name === 'string'){
                return node.style[name]
            }else if(name instanceof Object){
                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){
            x = x.nextSibling
        }
        return x
    },
    previous(node){
        let x = node.previousSibling
        while(x && x.nodeType === 3){
            x = x.previousSibling
        }
        return x
    }
}

main.js

代码语言：javascript复制

console.log(dom.previous(dom.find('#s2')[0]))

7.dom.each(nodes,fn) 用于遍历所有节点 遍历

index.html

代码语言：javascript复制

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DRZ DOM 1</title>
    <style>
        .red{
            background: red;
        }
    </style>
</head>
<body>
    示例
    <div>
        <div id="test"><span>zls_test1</span>
            <p class="red">段落标签3</p>
        </div>
    </div>
    <div id="zls_test2">
        <p class="red">段落标签3</p>
    </div>

    <div id="empty">
        <div id="e1"></div>
        <div id="e2"></div>
        <div id="e3"></div>
    </div>

    <div id="siblings">
        <div id="s1"></div>
        <div id="s2"></div>
        <div id="s3"></div>
    </div>
    <div id="travel">
        <div id="t1">t1</div>
        <div id="t2">t2</div>
        <div id="t3">t3</div>
    </div>

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

main.js

代码语言：javascript复制

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

dom.js

代码语言：javascript复制

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)
    },
    before(node,node2){
        node.parentNode.insertBefore(node2,node)
    },
    append(parent,node){
        parent.appendChild(node)
    },
    wrap(node,parent){
        dom.before(node,parent)
        dom.append(parent,node)
    },
    remove(node){
         node.parentNode.removeChild(node)
         return node
    },
    empty(node){
        // const childNodes = node.childNodes
        const {childNodes} = node
        const array = []
        let x = node.firstChild
        while(x){
            array.push(dom.remove(node.firstChild))
            x = node.firstChild
        }
        return array
    },
    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){
            if('innerText' in node){
                node.innerText = string
            }else{
                node.textContent =  string
            }
        }else if(arguments.length === 1){
            if('innerText' in node){
                return node.innerText
            }else{
                return node.textContent
            }
        }
    },
    html(node,string){
        if(arguments.length === 2){
            node.innerHTML = string
        }else if(arguments.length === 1){
            return node.innerHTML
        }
    },
    style(node,name,value){
        if(arguments.length === 3){
            node.style[name] = value
        }else if(arguments.length === 2){
            if(typeof name === 'string'){
                return node.style[name]
            }else if(name instanceof Object){
                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){
            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])
        }
    }
}

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

dom.js

代码语言：javascript复制

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)
    },
    before(node,node2){
        node.parentNode.insertBefore(node2,node)
    },
    append(parent,node){
        parent.appendChild(node)
    },
    wrap(node,parent){
        dom.before(node,parent)
        dom.append(parent,node)
    },
    remove(node){
         node.parentNode.removeChild(node)
         return node
    },
    empty(node){
        // const childNodes = node.childNodes
        const {childNodes} = node
        const array = []
        let x = node.firstChild
        while(x){
            array.push(dom.remove(node.firstChild))
            x = node.firstChild
        }
        return array
    },
    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){
            if('innerText' in node){
                node.innerText = string
            }else{
                node.textContent =  string
            }
        }else if(arguments.length === 1){
            if('innerText' in node){
                return node.innerText
            }else{
                return node.textContent
            }
        }
    },
    html(node,string){
        if(arguments.length === 2){
            node.innerHTML = string
        }else if(arguments.length === 1){
            return node.innerHTML
        }
    },
    style(node,name,value){
        if(arguments.length === 3){
            node.style[name] = value
        }else if(arguments.length === 2){
            if(typeof name === 'string'){
                return node.style[name]
            }else if(name instanceof Object){
                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){
            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){
        const list = dom.children(node.parentNode)
        let i
        for(i = 0;i<list.length;i  ){
            if(list[i] === node){
                break
            }
        }
        return i
    }
}

main.js

代码语言：javascript复制

console.log(dom.index(s2))

javascript node.js 运维自动化 html

0 人点赞