前往小程序，Get更优阅读体验！
立即前往
文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
首页
学习
活动
专区
工具
TVP最新优惠活动
返回腾讯云官网
社区首页 >专栏 >29·灵魂前端工程师养成-封装DOM库

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

作者头像
DriverZeng
发布于 2022-09-26 17:09:59
2.6K0
发布于 2022-09-26 17:09:59
举报
文章被收录于专栏：Linux云计算及前后端开发

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

-多年互联网运维工作经验，曾负责过大规模集群架构自动化运维管理工作。 -擅长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))
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2019-05-13，如有侵权请联系 cloudcommunity@tencent.com 删除
javascript
node.js
运维
自动化
html

本文分享自 作者个人站点/博客 前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ，欢迎热爱写作的你一起参与！

javascript
node.js
运维
自动化
html
评论
登录后参与评论
0 条评论
热度
最新
登录 后参与评论
推荐阅读
LV.
文章
0
获赞
0
目录
  • 封装DOM前戏
  • 使用两种不同的风格来封装DOM
    • 对象风格
    相关产品与服务
    运维安全中心（堡垒机）
    腾讯云运维安全中心（堡垒机）（Operation and Maintenance Security Center (Bastion Host)）可为您的 IT 资产提供代理访问以及智能操作审计服务，为客户构建一套完善的事前预防、事中监控、事后审计安全管理体系，助力企业顺利通过等保测评。
    产品介绍
    领券

    腾讯云开发者

    扫码关注腾讯云开发者

    扫码关注腾讯云开发者

    领取腾讯云代金券

    热门产品

    热门推荐

    更多推荐

    Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

    深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

    腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

    问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档

    Copyright © 2013 - 2024 Tencent Cloud.

    All Rights Reserved. 腾讯云 版权所有

    登录 后参与评论