简单实现JS对dom操作封装

实现JS对DOM操作的封装一般有如下几个步骤：

1.定义一个构造函数，用于实例化一个操作DOM的对象

2.在该构造函数的原型上，定义一系列方法，用于对DOM进行操作。比如，增加、删除、修改元素的属性、样式等

3.封装一些通用的操作DOM的方法，比如获取元素、遍历元素、判断元素类型等，方便调用者使用

4.用新增的构造函数创建一个实例对象，调用封装好的方法操作DOM

下面，我来分几个步骤讲述一下如何实现JS对DOM操作的封装：

1.定义构造函数

function DomUtil(selector) {
    this.element = document.querySelector(selector)
}

在构造函数中，我们使用document.querySelector方法选择DOM元素，并将其赋值给构造函数的实例对象。

2.添加针对DOM的操作方法

我们可以在构造函数原型上添加一些操作DOM的方法，如下所示：

DomUtil.prototype = {
    setAttr: function(key, value) {
        this.element.setAttribute(key, value);
    },
    removeAttr: function(key) {
        this.element.removeAttribute(key);
    },
    addClass: function(className) {
        this.element.classList.add(className);
    },
    removeClass: function(className) {
        this.element.classList.remove(className);
    },
    setStyle: function(key, value) {
        this.element.style[key] = value;
    },
    getContent: function(){
        return this.element.innerHTML;
    },
    setContent: function(content) {
        this.element.innerHTML = content;
    }
}

这些方法可以实现一些常用的操作，比如设置/删除元素属性，修改元素样式，获取元素内容等。

3.添加通用的DOM操作方法

我们可以添加一些通用的操作DOM的方法，比如获取元素、遍历元素、判断元素类型等：

var DomUtil = function(selector) {
    if (!(this instanceof DomUtil)) return new DomUtil(selector);

    switch (typeof selector) {
        case 'string':
            this.element = document.querySelector(selector);
            break;
        case 'object':
            this.element = selector;
            break;
    }
}   

DomUtil.prototype = {
    setAttr: function(key, value) {
        this.element.setAttribute(key, value);
    },
    removeAttr: function(key) {
        this.element.removeAttribute(key);
    },
    addClass: function(className) {
        this.element.classList.add(className);
    },
    removeClass: function(className) {
        this.element.classList.remove(className);
    },
    setStyle: function(key, value) {
        this.element.style[key] = value;
    },
    getContent: function(){
        return this.element.innerHTML;
    },
    setContent: function(content) {
        this.element.innerHTML = content;
    },
    find: function(selector) {
        return new DomUtil(this.element.querySelector(selector));
    },
    findAll: function(selector) {
        var elements = this.element.querySelectorAll(selector);
        return Array.prototype.map.call(elements, function(element) {
            return new DomUtil(element);
        });
    },
    each: function(callback) {
        var elements = this.element.children;
        for (var i = 0; i < elements.length; i++) {
            var element = elements[i];
            callback.call(new DomUtil(element), i, element);
        }
    },
    isElement: function() {
        return (typeof HTMLElement === "object") ? (this.element instanceof HTMLElement) : (this.element && typeof this.element === "object" && this.element.nodeType === 1 && typeof this.element.nodeName==="string");
    }
}

这些方法可以让用户更加方便地操作DOM元素。

4.创建实例对象，调用方法

我们可以创建一个实例对象，调用封装好的方法，比如：

var ele = new DomUtil('.box');
ele.setAttr('data-role', 'box');
ele.addClass('test');
ele.setStyle('fontWeight', 'bold');

这样就可以操作DOM元素了。

下面给出两个示例说明：

1.传入字符串选择器:

var domUtil = new DomUtil('.box'); //这里选择了一个class为box的div
domUtil.setStyle('background-color', '#f00');

这段代码会将背景色设置为红色。

2.传入DOM元素：

var domUtil2 = new DomUtil(document.querySelector('#box2'));
domUtil2.setContent('content change');

这段代码会将HTML元素的内容改为 "content change"。

总结：以上就是实现JS对DOM操作的封装的攻略，封装好的代码可以有效的减少我们在使用DOM元素时的代码量，使操作更加简单易懂，增加我们的开发效率。