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、