DOM操作常用方法

前端
javascript

基于原生js对DOM对象进行操作的部分方法，如查找兄弟元素或子元素等，以及对DOM元素的所有属性或特定属性进行监听的方法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
var Iflat = Iflat || {};
Iflat.DOM = {
    /**
     * 附加监听器，监听DOM元素的属性变化
     * @param ele 附加监听器的DOM元素
     * @param attr 监听的属性，!attr == true 时，监听所有属性
     * @param callback 属性变化后执行函数，参数：ele - 监听的DOM元素对象
     */
    addAttributeListener: function (ele, attr, callback) {
        // 判断浏览器是否支持MutationObserver
        var MutationObserver = window.MutationObserver 
        		|| window.WebKitMutationObserver 
        		|| window.MozMutationObserver;
        var observeMutationSupport = !!MutationObserver;
        if (observeMutationSupport) {
            // 创建观察者对象
            var observer = new MutationObserver(function (mutations) {
                mutations.forEach(function (mutation) {
                    // 定义回调函数时，如果监控属性参数为非，或修改的属性与需要监控的属性相等时，调用回调函数
                    if (callback) {
                        if (!attr || (attr && mutation.attributeName == attr)) {
                            callback(mutation.target);
                        }
                    }
                });
            });
            // 配置观察选项:
            var config = {attributes: true}
            // 传入目标节点和观察选项
            observer.observe(ele, config);
        } else {
            // 回调函数
            var onChange = function (event) {
                // 定义回调函数时，如果监控属性参数为非，或修改的属性与需要监控的属性相等时，调用回调函数
                if (callback) {
                    if (!attr || (attr && event.attrName == attr)) {
                        callback(event.target);
                    }
                }
            };
            if (ele.addEventListener) {
                // Firefox, Opera and Safari
                ele.addEventListener('DOMAttrModified', onChange, false);
            } else if (ele.attachEvent) {
                // 旧版Internet Explorer
                ele.attachEvent('onpropertychange', onChange);
            }
        }
    },

    /* 参数DOM元素的前一个元素 *／
    previousSibling: function (ele) {
        while ((ele = ele.previousSibling)) {
            if (!this.isIgnorable(ele))
                return ele;
        }
        return null;
    },

    /* 参数DOM元素的后一个元素 *／
    nextSibling: function (ele) {
        while ((ele = ele.nextSibling)) {
            if (!this.isIgnorable(ele))
                return ele;
        }
        return null;
    },

    /* 参数DOM元素的第一个子元素 *／
    firstChild: function (ele) {
        while ((ele = ele.firstChild)) {
            if (!this.isIgnorable(ele))
                return ele;
        }
        return null;
    },

    /* 参数DOM元素的最后一个子元素 *／
    lastChild: function (ele) {
        while ((ele = ele.lastChild)) {
            if (!this.isIgnorable(ele))
                return ele;
        }
        return null;
    },

    /* 判断是否是无意义的节点 *／
    isIgnorable: function (node) {
        return (node.nodeType == 8) 
					|| ( (node.nodeType == 3) 
					&& this.isBlankNode(node));
    },

    /* 是否是空白节点，例如回车，空字符串 *／
    isBlankNode: function (node) {
        return !(/[^\t\n\r ]/.test(node.data));
    }
};

demo：

1
2
3
4
5
6
7
8
9
var ele = document.getElementById('test');
var attr = 'src';
// 定义监听器的callback函数，使容器内的audio的src保持同步
var callback = function (element) {
    //  doSomething...
}

// 增加监听器
Iflat.DOM.addAttributeListener(eles, attr, callback);

分享到