DOM方法总结及DOM库扩展

分手后的思念是犯贱 2022-06-08 14:08 239阅读 0赞






常用DOM方法

常用DOM方法：






















































































方法 作用
document.getElementById(“id”); 通过元素的ID来获取元素对象
context.getElementsByTagName(“table”); 通过元素的标签名来获取元素对象,把容器中所有子子孙孙的元素都获取到
document.getElementsByName(“abc”); 通过元素的name属性来获取元素对象
context.getElementsByClassName(“abc”); 通过元素的class属性来获取元素对象
document.documentElement 返回文档的根节点
document.body 获取body元素
context.querySelector(“#id”); 移动端获取一个元素，节点集合不存在DOM映射
context.querySelectorAll(“#id”); 移动端获取多个元素，节点集合不存在DOM映射
appendChild(newListItem); 把元素添加到指定的容器中（末尾）
document.createElement(“div”); 创建一个元素标签对象
insertBefore(newItem,existingItem); 把新元素添加到老元素之前
removeChild(); 删除元素
cloneNode(false/true); 克隆元素：false：只克隆当前元素；true：把元素内的子子孙孙都克隆
replaceChild(newnode,oldnode); 替换元素
getAttribute(“target”); 获取元素属性
setAttribute(“type”,”button”); 添加指定的属性，并为其赋指定的值，如：设置input元素的type属性为button，不能修改class属性
removeAttribute(“abc”); 删除属性
document.createDocumentFragment(); 创建文档碎片
innerHTML 获取对象的内容或向对象插入内容

DOM节点和关系属性：










































节点 含义
childNodes 获取所有子节点
children 获取所有元素子节点
parentNode 获取父亲节点
previousSibling 获取上一个哥哥节点（所有节点，包括文本节点）
previousElementSibling 获取上一个哥哥节点（元素节点）
nextSibling 获取弟弟节点
firstChild 获取所有节点中的第一个
lastChild 获取所有节点中的最后一个









































节点 nodeType nodeName nodeValue
元素节点（元素标签） 1 大写的标签名 null
属性节点 2 小写属性名 属性内容
文本节点（文字） 3 #text 文字内容
注释节点（注释） 8 #comment 注释内容
document 9 #document null

DOM的盒子模型：


































名称 含义
clientWidth/clientHeight width+左右padding；height+上下padding
clientTop/clientLeft 上边框的高度；左边框的宽度
offsetWidth/offsetHeight clientWidth+左右边框；clientHeight+上下边框
offsetLeft/offsetTop 当前元素的外边框距离父级参照物的左偏移量；当前元素的外边框距离父级参照物的上偏移量
scrollWidth/scrollHeight 约等于真实内容的宽度(包含溢出的内容)+左padding；约等于真实内容的高度(包含溢出的内容)+上padding
scrollLeft/scrollTop 当前滚动条卷去的宽度；当前滚动条卷去的高度






DOM方法扩展






1.children——作用：获取某一个容器中所有的元素子节点（还可以筛选出指定标签名）

HTML代码：

  1. <div id="div1">
  2.     <div></div>
  3.     <div></div>
  4.     <div>
  5.         <p></p>
  6.         <p></p>
  7.     </div>
  8.     <p id="p1"></p>
  9.     <p></p>
  10.     <p></p>
  11. </div>

获取div1下的所有元素子节点(儿子级别)：

  1. var oDiv = document.getElementById("div1");
  2. console.log(oDiv.children.length); //6

但是children方法在非标准浏览器下不兼容，故需重写children方法
算法分析：首先获取所有的子节点（childNode），在所有的子节点中，把元素节点过滤出来，即nodeType===1。如果多传一个标签名，进行二次筛选，获取指定标签名的集合。代码如下：

  1. function children(curEle, tagName) { 
  2.     var ary = [];
  3.     if (/MSIE (6|7|8)/i.test(navigator.userAgent)) { //判断是不是IE浏览器
  4.         var nodeList = curEle.childNodes;
  5.         for (var i = 0; i < nodeList.length; i++) {
  6.             var curNode = nodeList[i];
  7.             curNode.nodeType === 1 ? ary[ary.length] = curNode : null;
  8.         }
  9.         nodeList = null;
  10.     } else { //标准浏览器中直接使用children
  11.         ary = Array.prototype.slice.call(curEle.children); //children返回的是类数组，为了和上面保持一致，将类数组转为数组
  12.     }
  13.     if (typeof tagName === "string") {
  14.         for (var j = 0; j < ary.length; j++) { //小心数组塌陷
  15.             var curEleNode = ary[j];
  16.             if (curEleNode.nodeName.toLowerCase() !== tagName.toLowerCase()) { //不是想要的那个标签
  17.                 ary.splice(j, 1);
  18.                 j--;
  19.             }
  20.         }
  21.     }
  22.     return ary;
  23. }
  24. var oDiv = document.getElementById("div1");
  25. console.log(children(oDiv,"div")); //Array(3)






2.getElementsByClass——作用：通过元素的样式类名获取一组元素集合（兼容所有浏览器）

jQuery中没有此方法，但jQuery的一部分选择器也是基于这个方法的原理来实现的
getElementsByClassName()原方法：写一个样式类名的话，只要包含这个样式类名就可以；写两个的话，只要同时包含这两个就可以，但和样式的顺序以及中间有多少个空格是没有关系的；如果不写，结果是一个空的集合

  1. var flag = "getComputedStyle" in window; //判断是否兼容
  2. //参数className是要获取的样式类名（可能是多个也可能是一个）
  3. //context是获取的上下文，不传递值的话默认是document
  4. function getElementsByClass(className, context) { 
  5.     context = context || document;
  6.     if (flag) {
  7.         return listToArray(context.getElementsByClassName(className)); //this.listToArray类数组转为数组
  8.     }
  9.     //把传递进来的样式类名的首尾空格去掉，然后在按照中间的空格把里面的每一项拆分成数组
  10.     var ary = [], classNameAry = className.replace(/(^ +| +$)/g, "").split(/ +/g);
  11.     //获取指定上下文元素中的所有的元素标签，循环这些标签，获取每个标签的className的样式类名字符串
  12.     var nodeList = context.getElementsByTagName("*"); //获取所有的元素标签
  13.     for (var i = 0; i < nodeList.length; i++) {
  14.         var curNode = nodeList[i];
  15.         //判断curNode.className是否包含参数，如果两个都包含，curNode就是想要的，否则不是
  16.         var isOK = true; //假设curNode中包含了所有的样式
  17.         for (var j = 0; j < classNameAry.length; j++) { //循环classNameAry这个数组
  18.             var reg = new RegExp("(^| +)" + classNameAry[j] + "( +|$)");
  19.             if (!reg.test(curNode.className)) {
  20.                 isOK = false;
  21.                 break;
  22.             }
  23.         }
  24.         if (isOK) { //拿每一个标签分别和所有样式类名比较后，如果结果还是true，说明当前元素标签包含了所有的样式，也是想要的
  25.             ary[ary.length] = curNode;
  26.         }
  27.     }
  28.     return ary;
  29. }






3.获取上一个哥哥元素节点（prev）、获取下一个弟弟元素节点（next）、获取所有的哥哥元素节点（prevAll）、获取所有的弟弟元素节点（nextAll）、获取相邻的两个元素节点（sibling）、获取所有的兄弟元素节点（siblings）

获取上一个哥哥元素节点（prev）：
prev算法分析：首先获取当前元素的上一个哥哥节点，判断是否为元素节点，不是的话基于当前的继续找上面的哥哥节点，一直找到哥哥元素节点为止，如果没有哥哥节点，返回null。代码如下：

  1. var flag = "getComputedStyle" in window; //判断是否兼容
  2. function prev(curEle) { 
  3.     if (flag) {
  4.         return curEle.previousElementSibling;
  5.     }
  6.     var pre = curEle.previousSibling;
  7.     while (pre && pre.nodeType !== 1) {
  8.         pre = pre.previousSibling;
  9.     }
  10.     return pre;
  11. }
  12. var op = document.getElementById("p1");
  13. console.log(prev(op));

获取下一个弟弟元素节点（next）：
代码如下：

  1. var flag = "getComputedStyle" in window; //判断是否兼容
  2. function next(curEle) { 
  3.     if (flag) {
  4.         return curEle.nextElementSibling;
  5.     }
  6.     var nex = curEle.nextSibling;
  7.     while (nex && nex.nodeType !== 1) {
  8.         nex = nex.nextSibling;
  9.     }
  10.     return nex;
  11. }
  12. var op = document.getElementById("p1");
  13. console.log(next(op));

获取所有的哥哥元素节点（prevAll）：
代码如下，prev方法见上：

  1. function prevAll(curEle) { 
  2.     var ary = [];
  3.     var pre = prev(curEle);
  4.     while (pre) {
  5.         ary.unshift(pre); //放到开头，防止倒序
  6.         pre = prev(pre);
  7.     }
  8.     return ary;
  9. }

获取所有的弟弟元素节点（nextAll）：
代码如下，next方法见上：

  1. function nextAll(curEle) { 
  2.     var ary = [];
  3.     var nex = next(curEle);
  4.     while (nex) {
  5.         ary.push(nex);
  6.         nex = next(nex);
  7.     }
  8.     return ary;
  9. }

获取相邻的两个元素节点（sibling）：
prev和next方法见上：

  1. function sibling(curEle) { 
  2.     var pre = this.prev(curEle);
  3.     var nex = this.next(curEle);
  4.     var ary = [];
  5.     pre ? ary.push(pre) : null;
  6.     nex ? ary.push(nex) : null;
  7.     return ary;
  8. }

获取所有的兄弟元素节点（siblings）：
prevAll和nextAll方法见上：

  1. function siblings(curEle) { 
  2.     return this.prevAll(curEle).concat(this.nextAll(curEle));
  3. }






4.获取第一个元素子节点（firstChild）、获取最后一个元素子节点（lastChild）

这两个方法jQuery中没有
获取第一个元素子节点（firstChild）：

  1. function firstChild(curEle) { 
  2.     var chs = this.children(curEle);
  3.     return chs.length > 0 ? chs[0] : null;
  4. }

获取最后一个元素子节点（lastChild）：

  1. function lastChild(curEle) { 
  2.     var chs = this.children(curEle);
  3.     return chs.length > 0 ? chs[chs.length-1] : null;
  4. }






5.获取当前元素索引（index）

有几个哥哥索引就是几，代码如下：

  1. function index(curEle) { 
  2.     return this.prevAll(curEle).length;
  3. }






6.prepend——作用：增加到某一个容器的开头（与appendChild对应）

append：向指定容器的末尾追加元素（重新appendChild方法）：

  1. function append(newEle,container) { 
  2.     container.appendChild(newEle);
  3. }

prepend：增加元素到某一个容器的开头
算法分析：把新的元素添加到容器中第一个子元素节点的前面，如果一个元素子节点都没有，就放在末尾即可

  1. function prepend(newEle, container) { 
  2.     var fir = this.firstChild(container);
  3.     if (fir) {
  4.         container.insertBefore(newEle, fir);
  5.         return;
  6.     }
  7.     container.appendChild(newEle);
  8. }






7.insertAfter——作用：增加到容器中某一个元素的后面（与insertBefore对应）

重写insertBefore：追加到指定元素的前面

  1. function insertBefore(newEle, oldEle) { 
  2.     oldEle.parentNode.insertBefore(newEle, oldEle);
  3. }

insertAfter相当于追加到oldEle弟弟元素的前面，如果弟弟不存在，也就是当前元素已经是最后一个了，把新的元素放在最末尾即可

  1. function insertAfter(newEle, oldEle) { 
  2.     var nex = this.next(oldEle);
  3.     if (nex) {
  4.         oldEle.parentNode.insertBefore(newEle, nex);
  5.         return;
  6.     }
  7.     oldEle.parentNode.appendChild(newEle);
  8. }






8.hasClass——作用：判断是否存在某一个样式类名 
  1. function hasClass(curEle, clasName) { 
  2.     var reg = new RegExp("(^| +)" + clasName + "( +|$)");
  3.     return reg.test(curEle.clasName);
  4. }






9.removeClass——作用：删除样式类名 
  1. function removeClass(curEle, className) { 
  2.     var ary = className.replace(/(^ +| +$)/g,"").split(/ +/g);
  3.     for (var i = 0; i < ary.length; i++) {
  4.         var curName = ary[i];
  5.         if (this.hasClass(curEle, curName)) {
  6.             var reg = new RegExp("(^| +)" + curName + "( +|$)", "g");
  7.             curEle.className = curEle.className.replace(reg, " ");
  8.         }
  9.     }
  10. }






10.addClass——作用：给元素增加样式类名 
  1. function addClass(curEle, className) { 
  2.     //为了防止className传递进来的值包含多个类名，把传递进来的值以一个或多个空格拆分成数组
  3.     var ary = className.replace(/(^ +| +$)/g,"").splice(/ +/g);
  4.     //循环数组，一项一项进行验证增加
  5.     for (var i = 0; i < ary.length; i++) {
  6.         var curName = ary[i];
  7.         if (!this.hasClass(curEle, className)) {
  8.             curEle.className += " " + curName;
  9.         }
  10.     }
  11. }






11.getCss、setCss、setGroupCss获取/设置/批量设置css

jQuery中统一叫css方法
getCss代码：

  1. function getCss(curEle, attr) { 
  2.     //处理带单位的问题
  3.     var reg = /^-?\d+(\.\d+)?(?:px|em|pt|deg|rem)?$/;
  4.     var val = null;
  5.     if (/MSIE (?:6|7|8)/.test(window.navigator.userAgent)) {
  7.         //这里处理filter的滤镜问题 alpha(opacity=40);
  8.         if (attr === 'opacity') {
  9.             //alpha(opacity=40)
  10.             val = curEle.currentStyle['filter'];
  11.             var reg1 = /^alpha\(opacity=(\d+(\.\d+)?)\)/;
  12.             return reg1.test(val) ? RegExp.$1 / 100 : 1;
  13.         }
  14.         val = curEle.currentStyle[attr];
  15.     } else {
  16.         val = window.getComputedStyle(curEle, null)[attr];
  17.     }
  18.     return reg.test(val) ? parseFloat(val) : val; //如果正则验证通过，寿命返回值是带单位的，那么我们就要人为去掉这个单位。否则不变
  19. }

JS中给元素设置属性值，只能通过curEle.style[attr] = value这种方式给当前元素设置属性
setCss：给当前元素的某一个样式属性设置值（增加在行内样式上），代码如下：

  1. function setCss(curEle, attr, value) {
  2.     if (attr === "float") { //浮动的兼容问题
  3.         curEle["style"]["cssFloat"] = value;
  4.         curEle["style"]["styleFloat"] = value;
  5.         return;
  6.     }
  7.     if (attr === "opacity") { //透明度的兼容问题
  8.         curEle["style"]["opacity"] = value;
  9.         curEle["style"]["filter"] = "alpha(opacity=" + value * 100 + ")";
  10.         return;
  11.     }
  12.     //对于某些样式属性，如果传递来的属性没有加单位，需要把单位默认的补上
  13.     var reg = /^(width|height|top|bottom|left|right|((margin|padding)(Top|Bottom|Left|Right)?))$/;
  14.     if (reg.test(attr)) {
  15.         if (!isNaN(value)) { //判断传递进来的value是否是一个有效数字
  16.             value += "px";
  17.         }
  18.     }
  19.     curEle["style"][attr] = value;
  20. }

setGroupCss：批量设置css属性
代码如下：

  1. function setGroupCss(curEle, options) { 
  2.     options = options || 0;
  3.     //通过检测options的数据类型，如果不是一个对象，则不能进行批量的设置
  4.     if (options.toString() !== "[object][Object]") {
  5.         return;
  6.     }
  7.     //遍历对象中的每一项，调取setCss方法一个个的进行设置
  8.     for (var key in options) {
  9.         if(options.hasOwnProperty(key)){
  10.             this.setCss(curEle, key, options[key]);
  11.         }
  12.     }
  13. }
  14. setGroupCss(box, {
  15.     width: 20,
  16.     backgroundColor: "red",
  17.     float: "right",
  18.     padding: 10
  19. });

css:此方法实现了获取、单独设置、批量设置元素的样式值
代码如下：

  1. function css(curEle) { 
  2.         var argTwo = arguments[1];
  3.         if (typeof argTwo === "string") { //第二个参数是一个字符串，这样的话很有可能就是在获取样式（还需要判断第三个参数）
  4.             var argThree = arguments[2];
  5.             if (!argThree) { //第三个参数不存在
  6.                 return this.getCss.apply(this, arguments);
  7.             }
  8.             //第三个参数存在则为单独设置
  9.             this.setCss.apply(this, arguments);
  10.         }
  11.         argTwo = argTwo || 0;
  12.         if (argTwo.toString() === "[object Object]") {
  13.             //批量设置样式属性值
  14.             this.setGroupCss.apply(this, arguments);
  15.         }
  16.     }






公共方法库 
  1. var utils = (function () { 
  2.     var flag = "getComputedStyle" in window;
  4.     //->listToArray:把类数组集合转换为数组
  5.     function listToArray(likeAry) { 
  6.         if (flag) {
  7.             return Array.prototype.slice.call(likeAry, 0);
  8.         }
  9.         var ary = [];
  10.         for (var i = 0; i < likeAry.length; i++) {
  11.             ary[ary.length] = likeAry[i];
  12.         }
  13.         return ary;
  14.     }
  16.     //->formatJSON:把JSON格式字符串转换为JSON格式对象
  17.     function formatJSON(jsonStr) { 
  18.         return "JSON" in window ? JSON.parse(jsonStr) : eval("(" + jsonStr + ")");
  19.     }
  21.     //->offset:获取页面中任意元素距离BODY的偏移
  22.     function offset(curEle) { 
  23.         var disLeft = curEle.offsetLeft, disTop = curEle.offsetTop, par = curEle.offsetParent;
  24.         while (par) {
  25.             if (navigator.userAgent.indexOf("MSIE 8") === -1) {
  26.                 disLeft += par.clientLeft;
  27.                 disTop += par.clientTop;
  28.             }
  29.             disLeft += par.offsetLeft;
  30.             disTop += par.offsetTop;
  31.             par = par.offsetParent;
  32.         }
  33.         return {left: disLeft, top: disTop};
  34.     }
  36.     //->win:操作浏览器的盒子模型信息
  37.     function win(attr, value) { 
  38.         if (typeof value === "undefined") {
  39.             return document.documentElement[attr] || document.body[attr];
  40.         }
  41.         document.documentElement[attr] = value;
  42.         document.body[attr] = value;
  43.     }
  45.     //->children:获取所有的元素子节点
  46.     function children(curEle, tagName) { 
  47.         var ary = [];
  48.         if (!flag) {
  49.             var nodeList = curEle.childNodes;
  50.             for (var i = 0, len = nodeList.length; i < len; i++) {
  51.                 var curNode = nodeList[i];
  52.                 curNode.nodeType === 1 ? ary[ary.length] = curNode : null;
  53.             }
  54.             nodeList = null;
  55.         } else {
  56.             ary = this.listToArray(curEle.children);
  57.         }
  58.         if (typeof tagName === "string") {
  59.             for (var k = 0; k < ary.length; k++) {
  60.                 var curEleNode = ary[k];
  61.                 if (curEleNode.nodeName.toLowerCase() !== tagName.toLowerCase()) {
  62.                     ary.splice(k, 1);
  63.                     k--;
  64.                 }
  65.             }
  66.         }
  67.         return ary;
  68.     }
  71.     //->prev:获取上一个哥哥元素节点
  72.     //->首先获取当前元素的上一个哥哥节点,判断是否为元素节点,不是的话基于当前的继续找上面的哥哥节点...一直到找到哥哥元素节点为止,如果没有哥哥元素节点,返回null即可
  73.     function prev(curEle) { 
  74.         if (flag) {
  75.             return curEle.previousElementSibling;
  76.         }
  77.         var pre = curEle.previousSibling;
  78.         while (pre && pre.nodeType !== 1) {
  79.             pre = pre.previousSibling;
  80.         }
  81.         return pre;
  82.     }
  84.     //->next:获取下一个弟弟元素节点
  85.     function next(curEle) { 
  86.         if (flag) {
  87.             return curEle.nextElementSibling;
  88.         }
  89.         var nex = curEle.nextSibling;
  90.         while (nex && nex.nodeType !== 1) {
  91.             nex = nex.nextSibling;
  92.         }
  93.         return nex;
  94.     }
  96.     //->prevAll:获取所有的哥哥元素节点
  97.     function prevAll(curEle) { 
  98.         var ary = [];
  99.         var pre = this.prev(curEle);
  100.         while (pre) {
  101.             ary.unshift(pre);
  102.             pre = this.prev(pre);
  103.         }
  104.         return ary;
  105.     }
  107.     //->nextAll:获取所有的弟弟元素节点
  108.     function nextAll(curEle) { 
  109.         var ary = [];
  110.         var nex = this.next(curEle);
  111.         while (nex) {
  112.             ary.push(nex);
  113.             nex = this.next(nex);
  114.         }
  115.         return ary;
  116.     }
  118.     //->sibling:获取相邻的两个元素节点
  119.     function sibling(curEle) { 
  120.         var pre = this.prev(curEle);
  121.         var nex = this.next(curEle);
  122.         var ary = [];
  123.         pre ? ary.push(pre) : null;
  124.         nex ? ary.push(nex) : null;
  125.         return ary;
  126.     }
  128.     //->siblings:获取所有的兄弟元素节点
  129.     function siblings(curEle) { 
  130.         return this.prevAll(curEle).concat(this.nextAll(curEle));
  131.     }
  133.     //->index:获取当前元素的索引
  134.     function index(curEle) { 
  135.         return this.prevAll(curEle).length;
  136.     }
  138.     //->firstChild:获取第一个元素子节点
  139.     function firstChild(curEle) { 
  140.         var chs = this.children(curEle);
  141.         return chs.length > 0 ? chs[0] : null;
  142.     }
  144.     //->lastChild:获取最后一个元素子节点
  145.     function lastChild(curEle) { 
  146.         var chs = this.children(curEle);
  147.         return chs.length > 0 ? chs[chs.length - 1] : null;
  148.     }
  150.     //->append:向指定容器的末尾追加元素
  151.     function append(newEle, container) { 
  152.         container.appendChild(newEle);
  153.     }
  155.     //->prepend:向指定容器的开头追加元素
  156.     //->把新的元素添加到容器中第一个子元素节点的前面,如果一个元素子节点都没有,就放在末尾即可
  157.     function prepend(newEle, container) { 
  158.         var fir = this.firstChild(container);
  159.         if (fir) {
  160.             container.insertBefore(newEle, fir);
  161.             return;
  162.         }
  163.         container.appendChild(newEle);
  164.     }
  166.     //->insertBefore:把新元素(newEle)追加到指定元素(oldEle)的前面
  167.     function insertBefore(newEle, oldEle) { 
  168.         oldEle.parentNode.insertBefore(newEle, oldEle);
  169.     }
  171.     //->insertAfter:把新元素(newEle)追加到指定元素(oldEle)的后面
  172.     //->相当于追加到oldEle弟弟元素的前面,如果弟弟不存在,也就是当前元素已经是最后一个了,我们把新的元素放在最末尾即可
  173.     function insertAfter(newEle, oldEle) { 
  174.         var nex = this.next(oldEle);
  175.         if (nex) {
  176.             oldEle.parentNode.insertBefore(newEle, nex);
  177.             return;
  178.         }
  179.         oldEle.parentNode.appendChild(newEle);
  180.     }
  183.     //->hasClass:验证当前元素中是否包含className这个样式类名
  184.     function hasClass(curEle, className) { 
  185.         var reg = new RegExp("(^| +)" + className + "( +|$)");
  186.         return reg.test(curEle.className);
  187.     }
  189.     //->addClass:给元素增加样式类名
  190.     function addClass(curEle, className) { 
  191.         var ary = className.replace(/(^ +| +$)/g, "").split(/ +/g);
  192.         for (var i = 0, len = ary.length; i < len; i++) {
  193.             var curName = ary[i];
  194.             if (!this.hasClass(curEle, curName)) {
  195.                 curEle.className += " " + curName;
  196.             }
  197.         }
  198.     }
  200.     //->removeClass:给元素移除样式类名
  201.     function removeClass(curEle, className) { 
  202.         var ary = className.replace(/(^ +| +$)/g, "").split(/ +/g);
  203.         for (var i = 0, len = ary.length; i < len; i++) {
  204.             var curName = ary[i];
  205.             if (this.hasClass(curEle, curName)) {
  206.                 var reg = new RegExp("(^| +)" + curName + "( +|$)", "g");
  207.                 curEle.className = curEle.className.replace(reg, " ");
  208.             }
  209.         }
  210.     }
  212.     //->getElementsByClass:通过元素的样式类名获取一组元素集合
  213.     function getElementsByClass(strClass, context) { 
  214.         context = context || document;
  215.         if (flag) {
  216.             return this.listToArray(context.getElementsByClassName(strClass));
  217.         }
  218.         //->IE6~8
  219.         var ary = [], strClassAry = strClass.replace(/(^ +| +$)/g, "").split(/ +/g);
  220.         var nodeList = context.getElementsByTagName("*");
  221.         for (var i = 0, len = nodeList.length; i < len; i++) {
  222.             var curNode = nodeList[i];
  223.             var isOk = true;
  224.             for (var k = 0; k < strClassAry.length; k++) {
  225.                 var reg = new RegExp("(^| +)" + strClassAry[k] + "( +|$)");
  226.                 if (!reg.test(curNode.className)) {
  227.                     isOk = false;
  228.                     break;
  229.                 }
  230.             }
  231.             if (isOk) {
  232.                 ary[ary.length] = curNode;
  233.             }
  234.         }
  235.         return ary;
  236.     }
  238.     //->getCss:获取元素的样式值
  239.     function getCss(attr) { 
  240.         var val = null, reg = null;
  241.         if (flag) {
  242.             val = window.getComputedStyle(this, null)[attr];
  243.         } else {
  244.             if (attr === "opacity") {
  245.                 val = this.currentStyle["filter"];
  246.                 reg = /^alpha\(opacity=(\d+(?:\.\d+)?)\)$/;
  247.                 val = reg.test(val) ? reg.exec(val)[1] / 100 : 1;
  248.             } else {
  249.                 val = this.currentStyle[attr];
  250.             }
  251.         }
  252.         reg = /^(-?\d+(\.\d+)?)(px|pt|em|rem)?$/;
  253.         return reg.test(val) ? parseFloat(val) : val;
  254.     }
  256.     //->setCss:给当前元素的某一个样式属性设置值(增加在行内样式上的)
  257.     function setCss(attr, value) { 
  258.         if (attr === "float") {
  259.             this["style"]["cssFloat"] = value;
  260.             this["style"]["styleFloat"] = value;
  261.             return;
  262.         }
  263.         if (attr === "opacity") {
  264.             this["style"]["opacity"] = value;
  265.             this["style"]["filter"] = "alpha(opacity=" + value * 100 + ")";
  266.             return;
  267.         }
  268.         var reg = /^(width|height|top|bottom|left|right|((margin|padding)(Top|Bottom|Left|Right)?))$/;
  269.         if (reg.test(attr)) {
  270.             if (!isNaN(value)) {
  271.                 value += "px";
  272.             }
  273.         }
  274.         this["style"][attr] = value;
  275.     }
  277.     //->setGroupCss:给当前元素批量的设置样式属性值
  278.     function setGroupCss(options) { 
  279.         for (var key in options) {
  280.             if (options.hasOwnProperty(key)) {
  281.                 setCss.call(this, key, options[key]);
  282.             }
  283.         }
  284.     }
  286.     //->css:此方法实现了获取、单独设置、批量设置元素的样式值
  287.     function css(curEle) { 
  288.         var argTwo = arguments[1], ary = Array.prototype.slice.call(arguments, 1);
  289.         if (typeof argTwo === "string") {
  290.             if (!arguments[2]) {
  291.                 return getCss.apply(curEle, ary);
  292.             }
  293.             setCss.apply(curEle, ary);
  294.         }
  295.         argTwo = argTwo || 0;
  296.         if (argTwo.toString() === "[object Object]") {
  297.             setGroupCss.apply(curEle, ary);
  298.         }
  299.     }
  301.     //->把外界需要使用的方法暴露给utils
  302.     return {
  303.         win: win,
  304.         offset: offset,
  305.         listToArray: listToArray,
  306.         formatJSON: formatJSON,
  307.         children: children,
  308.         prev: prev,
  309.         next: next,
  310.         prevAll: prevAll,
  311.         nextAll: nextAll,
  312.         sibling: sibling,
  313.         siblings: siblings,
  314.         index: index,
  315.         firstChild: firstChild,
  316.         lastChild: lastChild,
  317.         append: append,
  318.         prepend: prepend,
  319.         insertBefore: insertBefore,
  320.         insertAfter: insertAfter,
  321.         hasClass: hasClass,
  322.         addClass: addClass,
  323.         removeClass: removeClass,
  324.         getElementsByClass: getElementsByClass,
  325.         css: css
  326.     }
  327. })();

发表评论

表情：
评论列表 （有 0 条评论，239人围观）

还没有评论，来说两句吧...

相关阅读

    相关 Dom属性方法

    一、javascript的三大核心 　　1.ECMAScript js的语法标准 　　2.DOM Document object Model 文档对象模型，提供的方法可

    女爷i女爷i/ 0 赞/ 172 阅读

    相关 Dom对象方法

      节点的分类：             元素节点 html标签  img body input div             文本节点 文字部分        

    青旅半醒青旅半醒/ 0 赞/ 170 阅读

    相关 DOM方法

    一、什么是 DOM？ DOM 定义了访问和操作 HTML 文档的标准方法 1、DOM 是 Document Object Model（文档对象模型）的缩写。 2、

    ╰半夏微凉°╰半夏微凉°/ 0 赞/ 229 阅读

    相关 DOM扩展的那些事儿

    前言：关于DOM的扩展，之前自己也接触了一些，但是没有系统的去看，这次有机会系统的学习JavaScript，所以就把这些知识好好的总结一下。 1、选择符的扩展 在没

    超、凢脫俗超、凢脫俗/ 0 赞/ 188 阅读

    相关 Jquery-Dom总结

    1、对Dom标签操作  ![70][] 内部插入节点       \   append(content) :向每个匹配的元素的内部的结尾处追加内容       \  

    心已赠人心已赠人/ 0 赞/ 205 阅读