以前很多时候为了快速开发,都是直接使用jQuery等框架。

直到有一天由于网络原因jQuery官网打不开手边又没带U盘,于是写起了原生JS,手下各种不顺。

从来只是用,却没思考过JQuery是怎么实现那些方便快捷的DOM操作,到了这个时候也不得不思考一下了。

于是写了几个函数应急,在此记录一下姿势水平。

等到将来我学习了一个,回过头来再看吧。

'use strict'


function prevSiblings(element, attributeName, attributeValue) {
    //arguments:element[, attributeName, attributeValue]
    //typeof attributeName == 'string'&& typeof attributeValue == 'string'
    var t = [];
    var p = element.previousElementSibling;
    if (p) {
        if (attributeName && attributeValue) {
            if (attributeName.toLowerCase() === 'class') {
                if (hasClass(element, attributeValue)) {
                    t.unshift(p);
                    prevSiblings(p, attributeName, attributeValue);
                }
                else {
                    prevSiblings(p, attributeName, attributeValue);
                }
            }
            else if (p.getAttribute(attributeName) === attributeValue) {
                t.unshift(p);
                prevSiblings(p, attributeName, attributeValue);
            }
            else {
                prevSiblings(p, attributeName, attributeValue);
            }
        }
        else {
            t.unshift(p);
            prevSiblings(p);
        }
    }
    return t;
}

function nextSiblings(element, attributeName, attributeValue) {
    //arguments:element[, attributeName, attributeValue]
    //typeof attributeName == 'string' && typeof attributeValue == 'string'
    var t = [];
    var p = element.nextElementSibling;
    if (p) {
        if (attributeName && attributeValue) {
            if (toLowerCase(attributeName) === 'class') {
                if (hasClass(element, attributeValue)) {
                    t.push(p);
                    nextSiblings(p, attributeName, attributeValue);
                }
                else {
                    nextSiblings(p, attributeName, attributeValue);
                }
            }
            else if (p.getAttribute(attributeName) === attributeValue) {
                t.push(p);
                nextSiblings(p, attributeName, attributeValue);
            }
            else {
                nextSiblings(p, attributeName, attributeValue);
            }
        }
        else {
            t.push(p);
            nextSiblings(p);
        }
    }
    return t;
}

function elementChildren(element, attributeName, attributeValue) {
    //arguments:element[, attributeName, attributeValue]
    //typeof attributeName == 'string' && typeof attributeValue == 'string'
    var t = [];
    if (element && element.hasChildNodes()) {
        var c = element.childNodes;
        for (var i = 0; i < c.length; i++) {
            if (c[i].nodeName.indexOf('#') == -1) {
                if (attributeName && attributeValue) {
                    if (toLowerCase(attributeName) === 'class' && hasClass(c[i], attributeValue)) {
                        t.push(c[i]);
                    }
                    else if (c[i].getAttribute(attributeName) === attributeValue) {
                        t.push(c[i]);
                    }
                }
                else {
                    t.push(c[i]);
                }
            }
        }
    }
    return t;
}

function hasClass(element, classStr) {
    //arguments:element[, classStr, classStr, ...]
    //typeof classStr == 'string'
    if (element.className === null || undefined || '') {
        return false;
    }
    else {
        var t = element.split(' ');
        for (var i = 0; i < t.length; i++) {
            if (t[i] === classStr) {
                return true;
                break;
            }
        }
        return false;
    }
}

function removeClass(element, classStr) {
    //arguments:element[, classStr, classStr, ...]
    //typeof classStr == 'string'
    if (!hasClass(element, classStr)) {
        return;
    }
    else {
        var t = element.className.split(' ');
        if (t.length > 0) {
            for (var i = 0; i < t.length; i++) {
                if (t[i] == classStr) {
                    t.splice(i, 1);
                    element.className = t.join(' ');
                    return;
                    break;
                }
            }
            return;
        }
    }
}