DOM操作的增强版功能JS函数

前端之家收集整理的这篇文章主要介绍了DOM操作的增强版功能JS函数前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

下面是编程之家 jb51.cc 通过网络收集整理的代码片段。

编程之家小编现在分享给大家,也给大家做个参考。

/**
 * 将一个DOM节点、HTML字符串混合型参数
 * 转化为原生的DOM节点数组
 *
 * */
function checkElem(a) {
    var r = [];

    if (a.constructor != Array) {
        //如果不是参数数组,则强行转换
        a = [a];
    }

    for (var i = 0; i < a.length; i++) {
        //如果是字符串,例如"<li>aa</li>"
        if (a[i].constructor == String) {
            //使用一个临时元素来存放HTML
            var div = document.createElement("div");
            //注入HTML,转换成DOM结构
            div.innerHTML = a[i];

            for (var j = 0; j < div.childNodes.length; j++) {
                r[r.length] = div.childNodes[j];
            }

        } else if (a[i].length) {
            //假定是DOM节点数组
            for (var j = 0; j < a[i].length; j++) {
                r[r.length] = a[i][j];
            }
        } else {
            //DOM节点
            r[r.length] = a[i];
        }
    }

    return r;
}

/**
 * 在parent执行环境下,在before元素下前面添加elem元素
 * */
function before(parent,before,elem) {
    //检查是否提供parent节点参数
    if (elem == null) {
        elem = before;
        before = parent;
        parent = before.parentNode;
    }
    //获取元素的新数组
    var elems = checkElem(elem);

    /**
     * 向后遍历数组,
     * 因为我们向前插入元素
     * */
    for (var i = elems.length - 1; i >= 0; i--) {
        parent.insertBefore(elem[i],before);
    }

}
/**
 * 为parent追加一个子元素的辅助函数
 *
 * */
function append(parent,elem) {
    var elems  = checkElem(elem);

    for(var i = 0; i <= elems.length; i++){
        parent.appendChild(elems[i]);
    }
}
/**
 * 删除elem节点函数
 *
 * */
function remove(elem) {
    if(elem) {
        elem.parentNode.removeChild(elem);
    }
}
/**
 * 从一个元素中删除所有子节点的函数
 *
 * */
function empty(elem) {
    while(elem.firstChild) {
        remove(elem.firstChild);
    }
}

以上是编程之家(jb51.cc)为你收集整理的全部代码内容,希望文章能够帮你解决所遇到的程序开发问题。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

猜你在找的jQuery相关文章