原生JavaScript常用工具函数与技巧汇总

DOM查询简化

第1步：封装ID选择器

为了简化代码并支持多参数输入，可以封装一个 $() 函数。它支持传入单个ID返回元素，或传入多个ID返回元素数组：

function $() {
    var elements = [];
    for (var i = 0; i < arguments.length; i++) {
        var element = arguments[i];
        if (typeof element == 'string')
            element = document.getElementById(element);
        if (arguments.length == 1)
            return element;
        elements.push(element);
    }
    return elements;
}

第2步：智能定位相邻兄弟节点

由于原生API不提供直接获取上一个/下一个同类型（Element）节点的方法，需递归跳过文本或注释节点：

获取下一个元素节点

function nextElem(node) {
    if (node.nodeType == 1) return node;
    if (node.nextSibling) return nextElem(node.nextSibling);
    return null;
}

获取上一个元素节点

function prevElem(node) {
    if (node.nodeType == 1) {
        return node;
    } else if (node.previousSibling) {
        return nextElem(node.previousSibling);
    } else {
        return null;
    }
}

第3步：实现 insertAfter 方法

浏览器仅内置 insertBefore，未提供 insertAfter。利用 parentNode 和 nextSibling 可轻松实现：

function insertAfter(newChild, refChild) {
    var parElem = refChild.parentNode;
    if (parElem.lastChild == refChild) {
        refChild.appendChild(newChild);
    } else {
        parElem.insertBefore(newChild, refChild.nextSibling);
    }
}

样式操作与管理

第4步：安全添加 CSS 类名

在 DOM 元素上追加类名（类似 jQuery 的 .addClass()），避免覆盖原有样式：

function addClass(elem, value) {
    if (!elem.className) {
        elem.className = value;
    } else {
        var oValue = elem.className;
        oValue += " ";
        oValue += value;
        elem.className = oValue;
    }
}

第5步：读取元素的计算样式

兼顾旧版 IE 和新标准浏览器的兼容性方案，支持动态读取内联或外部样式值：

function getStyle(id, stylename) {
    var elem = $(id);
    var realStyle = null;
    if (elem.currentStyle) {
        realStyle = elem.currentStyle[stylename];
    } else if (window.getComputedStyle) {
        realStyle = window.getComputedStyle(elem, null)[stylename];
    }
    return realStyle;
}

第6步：精确删除已存在的类名

利用正则表达式确保只匹配完整的单词，防止意外修改其他包含部分字符的类名：

function hasClass(element, className) {
    var reg = new RegExp('(^|\\s)' + className + '(\\s|$)');
    return element.className.match(reg);
}

function removeClass(element, className) {
    if (hasClass(element, className)) {
        var reg = new RegExp('(^|\\s)' + className + '(\\s|$)');
        element.className = element.className.replace(reg, ' ');
    }
}

事件系统与页面初始化

第7步：安全的 onload 事件堆叠

原生 window.onload 只能挂载一个函数。此工具函数支持多次调用，将新函数追加至执行队列末尾：

function iLoad(func) {
    var oLoad = window.onload;
    if (typeof window.onload != 'function') {
        window.onload = func;
    } else {
        window.onload = function() {
            oLoad();
            func();
        }
    }
}

第8步：编写跨浏览器的事件监听器

解决现代 addEventListener 与老版 IE attachEvent 之间的差异：

function addEventSamp(obj, evt, fn) {
    if (obj.addEventListener) {
        obj.addEventListener(evt, fn, false);
    } else if (obj.attachEvent) {
        obj.attachEvent('on' + evt, fn);
    }
}

function removeEventSamp(obj, evt, fn) {
    if (obj.removeEventListener) {
        obj.removeEventListener(evt, fn, false);
    } else if (obj.detachEvent) {
        obj.detachEvent('on' + evt, fn);
    }
}

第9步：快速切换显示隐藏状态

实现简易的 toggle 效果，通过判断当前 display 属性切换为 none：

function toggle(obj) {
    var el = document.getElementById(obj);
    el.style.display = (el.style.display != "none" ? "none" : "");
}

以上就是本文介绍的关于一些常用且实用的原生JavaScript函数的详细内容，更多关于JavaScript函数应用与DOM处理的资料请关注本站其它相关文章！