javascript – ちょっとしたDOM操作の時に使うミニフレームワーク

jQueryなどフレームワークを利用するまでもない時にちょっと役立つJavascriptのミニフレームワークです。
よく使うDOM操作系のみのですが、使い勝手は良いかと思います。。
何かのプラグインを参考にしたのですが忘れてしまいましたm_ _m

フレームワークの読み込み – Javascript

1
// フレームワーク
2
framework = {
3
    on: function on(el, type, listener, useCapture) {
4
        var methodName = 'addEventListener';
5
        type = type.split(' ');
6
        for (var i = 0; i < type.length; ++i) {
7
            if (type[i]) {
8
                el[methodName](type[i], listener, useCapture || false);
9
            }
10
        }
11
    },
12
    off: function off(el, type, listener, useCapture) {
13
        var methodName = 'removeEventListener';
14
        type = type.split(' ');
15
        for (var i = 0; i < type.length; ++i) {
16
            if (type[i]) {
17
                el[methodName](type[i], listener, useCapture || false);
18
            }
19
        }
20
    },
21
    trigger: function trigger(el, e) {
22
        if (document.createEvent) {
23
            var event = document.createEvent("HTMLEvents");
24
            event.initEvent(e, true, true);
25
            return el.dispatchEvent(event);
26
        } else {
27
            var evt = document.createEventObject();
28
            return el.fireEvent("on" + event, evt);
29
        }
30
    },
31
    each: function each(el, fn) {
32
        var elLength = el.length;
33
        if (elLength) {
34
            for (var i = 0; i < elLength; ++i) {
35
                fn(i);
36
            }
37
        }
38
    },
39
    prevAll: function prevAll(el, selector) {
40
        var list = [];
41
        var prev = el.previousElementSibling;
42
        while (prev &#038;&#038; prev.nodeType === 1) {
43
            list.unshift(prev);
44
            prev = prev.previousElementSibling;
45
        }
46
        if (selector) {
47
            var node = [].slice.call(document.querySelectorAll(selector));
48
            list = list.filter(function (item) {
49
                return el.includes(item);
50
            });
51
        }
52
        return list;
53
    },
54
    closest: function closest(el, selector) {
55
        return (el.closest || function (_selector) {
56
            do {
57
                if ((el.matches || el.msMatchesSelector).call(el, _selector)) {
58
                    return el;
59
                }
60
                el = el.parentElement || el.parentNode;
61
            } while (el !== null &#038;&#038; el.nodeType === 1);
62
            return null;
63
        }).call(el, selector);
64
    },
65
    parent: function parent(el, selector) {
66
        if (selector === null) {
67
            return el.parentNode;
68
        } else {
69
            return framework.closest(el, selector);
70
        }
71
    },
72
    wrap: function wrap(el, wrapper) {
73
        el.parentNode.insertBefore(wrapper, el);
74
        wrapper.appendChild(el);
75
    },
76
    unwrap: function unwrap(el) {
77
        while (el.firstChild) {
78
            el.parentNode.insertBefore(el.firstChild, el);
79
        }
80
        el.remove();
81
    },
82
    offset: function offset(el) {
83
        var rect = el.getBoundingClientRect();
84
        var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
85
        var scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
86
        return {
87
            top: rect.top + scrollTop,
88
            left: rect.left + scrollLeft
89
        };
90
    },
91
    removeClass: function removeClass(el, className) {
92
        var reg = new RegExp('(\\s|^)' + preg_quote(className) + '(\\s|$)');
93
        if (framework.hasClass(el, className)) {
94
            el.className = el.className.replace(reg, ' ').replace(/^\s\s*/, '').replace(/\s\s*$/, '');
95
        }
96
    },
97
    addClass: function addClass(el, className) {
98
        if (!framework.hasClass(el, className)) {
99
            el.className += (el.className ? ' ' : '') + className;
100
        }
101
    },
102
    hasClass: function hasClass(el, className) {
103
        return el.className &#038;&#038; new RegExp('(^|\\s)' + preg_quote(className) + '(\\s|$)').test(el.className);
104
    },
105
    toggleClass: function toggleClass(el, className) {
106
        if (framework.hasClass(el, className)) {
107
            framework.removeClass(el, className);
108
        } else {
109
            framework.addClass(el, className);
110
        }
111
    }
112
};
113

114
function preg_quote(str, delimiter) {
115
    return (str + '').replace(new RegExp('[.\\\\+*?\\[\\^\\]$(){}=!<>|:\\' + (delimiter || '') + '-]', 'g'), '\\$&');
116
}

フレームワークの使い方 – Javascript

1
framework.addClass(framework.nodeElement(document.getElementsByClassName('hoge')[0]), 'class-hoge');

本当にちょっとした時ようです。