关于js的函数

Posted 2020-09-19 tanxiang6690

1、获取内容的兼容函数

/*
 * 一： 获取内容的兼容函数
 * setText(obj, str)
 * 思路：
 *  1、首先判断浏览器；
 *  2、如果是IE浏览器，就用innerText；
 *  3、如果是非IE浏览器，就用textContent;
 * 参数说明：
 *  1、如果是一个参数，这个函数将会用来获取内容
 *  2、如果是两个参数，这个函数将会用来设置内容
 * */
function getText(obj, str) {
    // 判断是否是IE浏览器，如果obj.innerText == ture，则是IE浏览器，否则是非IE浏览器
    if(obj.innerText) {
        // 判断是否传入str,如果传入，就将传入的参数赋值给对象；如果没有传入，就直接返回对象的内容，
        if(str) {
            obj.innerText = str;
        } else {
            return obj.innerText;
        }
    } else {
        if(str) {
            obj.textContent = str;
        } else {
            return obj.textContent;
        }
    }
}

 

2、获取样式的兼容函数；

/*************************************************************************************************************
 * 二：获取样式的兼容函数
 * getStyle(obj, attr)；
 * 思路：
 *  1，首先判断浏览器，
 *  2，如果是IE浏览器，就用obj.currentStyle[attr];
 *  3，如果是非IE浏览器，就用document.defaultView.getComputedStyle(obj, null)[attr];
 * 参数说明：
 *  参数1：是要获得样式的对象;
 *  参数2：要从对象里面获取的样式，要以字符串的形式传入;
 * */
function getStyle(obj, attr) {
    // 判断是不是IE浏览器，如果obj.currentStyle == true，说明是IE浏览器，否则是非IE浏览器
    if(obj.currentStyle) {
        return obj.currentStyle[attr];
    } else {
        return document.defaultView.getComputedStyle(obj, null)[attr];
    }
};

 

3、获取指定元素的子元素的集合和有意义的文本,默认情况为获取元素的节点；

/*************************************************************************************************************
 * 三：获取指定元素的子元素的集合和有意义的文本,默认情况为获取元素的节点；
 * getChild(obj, type);
 * 思路：
 *   获取obj的所有的子元素
 *   挑选：obj.nodeType == 1说明就是元素集合，否则就是文本元素的集合
 * 参数说明：
 *   参数1：指定的元素；
 *   参数2：指定获取元素的类型；
 *   true：只获取元素的节点；
 *   false：获取元素的节点和有意义的文本节点；
 * */
function getChild(obj, type) {
    var type = type == undefined ? true : false,
        arr = [];
    var child = obj.childNodes;
    if(type) { //type==true||undefined的时候执行；
        for(var i = 0; i < child.length; i++) {
            if(child[i].nodeType == 1) {
                arr.push(child[i]);
            };
        };
        return arr;
    } else {
        for(var i = 0; i < child.length; i++) {
            //replace.();把空白替换掉：str="a b c"-------str=["a","b","c"]
            if(child[i].nodeType == 1 || (child[i].nodeType == 3 && child[i].nodeValue.replace(/^\s+|\s+$/g, "") != "")) {
                arr.push(child[i]);
            };
        };
        return arr;
    };
};

 

4、获取第一个子元素

/************************************************************************************************************
 * 四：获取第一个子元素；
 * */
function getFirstChild(obj) {
    return getChild(obj)[0];
};

 

5、获取最后一个子元素

/***********************************************************************************************************
 * 五：获取最后一个子元素；
 * */
function getLastChild(obj) {
    var length = getChild(obj).length;
    return getChild(obj)[length - 1];
}

 

6、获取任意的子元素

/**********************************************************************************************************************
 * 六：获取任意的子元素；
 * */
function getRandomChild(obj, num){
    return getChild(obj)[num-1];
}

 

7、获得目标对象的下一个兄弟节点，如果有下一个兄弟节点的话，如果没有，返回false；

/***************************************************************************************************************
 * 七：获得目标对象的下一个兄弟节点，如果有下一个兄弟节点的话
 * getNext(obj, type);
 * 思路：
 *      1、判断是否有下一个兄弟节点，如果没有的话，返回false，如果有的话，继续往下进行；
 *      2、判读next是否是一个有意思的文本节点或者元素节点；
 *      3、更新next，即给next赋值。继续往下寻找下一个兄弟节点；
 *      4、判断next是否是一个空值，如果为空，返回false，如果不为空，继续进行第二步；
 * 参数说明：
 *      1、obj：指定的对象；
 *      2、type为true时：忽略文本，也是默认值；type为false时，不能忽略文本；
 * */
function getNext(obj, type) {
    var type = type == undefined ? true : type;
    var next = obj.nextSibling;
    checkNext(next);
    if(type) {
        // 忽略文本
        // 当next是一个注释节点或者文本节点时，继续往下循环；
        while(next.nodeType == 3 || next.nodeType == 8) {
            next = next.nextSibling;
            checkNext(next);
        }
        return next;
    } else {
        // 不能忽略文本
        // 当next的类型是一个注释或是文本时，继续往下循环；
        while(next.nodeType == 8 || (next.nodeType == 3 && next.nodeValue.replace(/^\s+|\s+$/g, ‘‘) != ‘‘)) {
            next = next.nextSibling;
            checkNext(next);
        }
    }

    // 返回false封装成方法
    function checkNext(nextObj) {
        if(nextObj == null) {
            return false;
        }
    }
}

View Code

 

7、给最前面的元素插入一条元素

/*****************************************************************************************************************
 * 七：给最前面的元素插入一条元素
 * beforeChild(obj, ele)
 * 思路：
 *      1、获取第一个子元素firstChild
 *      2、父元素.insertBefore(要插入的元素,firstChild);
 * 参数说明：
 *      1、obj：父元素；
 *      2、ele：要插入的元素
 * */
function beforeChild(obj, ele) {
    var first = getFirstChild(obj);
    obj.insertBefore(ele, first);
};

 

8、给某个元素后面插入一条子元素