先了解一波专业术语：

库

我们把提供给其他人用的工具代码叫做库,比如 jQuery、Underscore

API

库暴露出来的函数或属性叫做API（应用编程接口）

API (web 或 XML 页面) = DOM + JS (脚本语言)

框架

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

那什么是DOM呢？

手写了一个基础的DOM库，涉及了基本的增删改查:

增 代码如下

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

删 代码如下

window.dom = {
        // ****************** 删
    remove(node) {
        const { childNodes } = node
        const array = []
        for (let i = 0; i < childNodes.length; i++) {
            dom.remove(childNodes[i])
            array.push(childNodes[i])
        }
        return array
    },
    empty(node) {
        const array = []
        let x = node.firstChild
        while (x) {
            array.push(dom.remove(node.firstChild))
            x = node.firstChild
        }
        return array
    }
}

改 代码如下

window.dom = {
    // ****************** 改
        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
        }
        if (arguments.length === 1) {
            return node.innerHTML
        }
    },
    style(node, name, value) {
        if (arguments.length === 3) {
            //dom.style(div,'color','red')
            node.style[name] = value
        } else if (arguments.length === 2) {
            if (typeof name === 'string') {
                //dom.style(div,'color')
                return node.style[name]
            } else if (name instanceof Object) {
                //dom.style(div,{color:'red'})
                const object = name
                for (let key in object) {
                    node.style[key] = object[key]
                }
            }
        }
    },
    class: {
        add(node, className) {
            node.classList.add(className)
        },
        remove(node, className) {
            node.classList.remove(className)
        },
        has(node, className) {
            return node.classList.contains(className)
        }
    },
    on(node, eventName, fn) {
        node.addEventListener(eventName, fn)
    },
    off(node, eventName, fn) {
        node.removeEventListener(eventName, fn)
    }
}

查 代码如下

window.dom = {
    // ****************** 查
        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
    }
}

手写DOM库链接

由于本人水平有限，如有描述不准确的地方请给我留言，欢迎交流~