几个JS DOM操作的函数

以前很多时候为了快速开发,都是直接使用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;
        }
    }
}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值