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; } } }
8、给最前面的元素插入一条元素
/***************************************************************************************************************** * 八：给最前面的元素插入一条元素 * beforeChild(obj, ele) * 思路： * 1、获取第一个子元素firstChild * 2、父元素.insertBefore(要插入的元素,firstChild); * 参数说明： * 1、obj：父元素； * 2、ele：要插入的元素 * */ function beforeChild(obj, ele) { var first = getFirstChild(obj); obj.insertBefore(ele, first); };
9、给某个元素后面插入一条子元素；
/************************************************************************************************************************ * 九：给某个元素后面插入一条子元素 * insertAfter(obj,ele,type) * 思路： * 1、首先获取第一个兄弟节点，调用之前的getNext(obj, type)函数; * 2、看是否有下一个兄弟节点，如果有，往下一个兄弟节点的前面插入元素。如果没有，直接插入到父元素的后面； * 参数说明： * 1、obj：要插入的位置； * 2、ele：要插入的元素； * 3、type： * true：忽略文本（元素节点和false是getNext(obj, type)返回的值） * false：不能忽略文本； * */ function insertAfter(obj, ele, type) { // 初始化参数 var type = type == undefined ? true : type, next = getNext(obj, true), parent = obj.parentNode; if(next) { // next == true时，将ele插入到next后面； parent.insertBefore(ele, next); } else { // next == false时，将ele直接插入到parent即可； parent.appendChild(ele); } }
10、获取上一个兄弟节点；与获取下一个兄弟节点类似。
/************************************************************************************************ * 十、获取上一个兄弟节点； * getPrevious(obj, type); * */ function getPrevious(obj, type) { var type = type == undefined ? true : type, next = obj.previousSibling; checkNext(next); if(type) { // 忽略文本 // 当next的类型是一个注释或是文本时，继续往下循环； while(next.nodeType == 8 || next.nodeType == 3) { next = next.previousSibling; checkNext(next); } return next; } else { // 不忽略文本 // 当next的类型是一个注释或是文本时，继续往下循环； while(next.nodeType == 8 || (next.nodeType == 3 && !(next.nodeValue.replace(/^s+|s+$/g, '')))) { next = next.previousSibling; checkNext(next); } return next; } // 判断next的函数 function checkNext(nextObj) { if(nextObj = null) { return false; } }; }
11、