第七周第五天笔记之DOM库

2018-09-05 本文已影响0人果木山

1 DOM库创建

setCss方法

目的：设置元素身上的单一的行间样式
参数：ele：元素，attr：属性名，value：属性值
知识点：
- 核心设置ele.style[attr]=value;
- 针对特殊的进行处理：1）width等属性，属性值为px，但不添加单位时，也可以设置成功；2）针对透明度的兼容处理，最终效果是，但设置属性名为opacity时，封装好兼容的代码；3）浮动问题，针对不同浏览器进行不同的设置；

 <body>
 <div id="div1">美好</div>
 <script>
     var oDiv=document.getElementById("div1");
     function setCss(ele, attr, value) {
         //1.针对 width height left top right bottom margin(Left|Right..) padding lineHeight fontSize borderWidth 给其添加单位
         var reg=/(width|height|left|top|right|bottom|lineHeight|borderWidth|fontSize|((margin|padding)(Left|Right|Top|Bottom)?))/g;
         if(reg.test(attr) && !/(auto|%)/.test(value)){
             value=parseFloat(value)+"px";
         }
         //下面代码更简单
         /*if(reg.test(attr) && !isNaN(value)){
             value=value+"px";
         }*/
         //2. 针对透明度的兼容处理
         if(attr=="opacity"){
             ele.style[attr]=value;
             ele.style.filter="alpha(opacity="+value*100+")";
             return;
         }
         //3. 针对浮动
         if(attr=="float"){
             ele.style.styleFloat=value;//兼容IE
             ele.style.cssFloat=value;//兼容火狐
             return;
         }
         //核心设置
         ele.style[attr]=value;
     }
     setCss(oDiv,"width","50%");
     setCss(oDiv,"lineHeight",200);
     setCss(oDiv,"margin",20);
     setCss(oDiv,"fontSize",30);
     setCss(oDiv,"background","red");
     setCss(oDiv,"opacity",0.3);
     setCss(oDiv,"float","right");
 </script>
 </body>

setGroupCss方法

目的：设置一组行间样式
参数：ele：元素，opt：对象

 <body>
 <div id="div1">美好</div>
 <script src="utils3.js"></script>
 <script>
     var oDiv=document.getElementById("div1");
     function setGroupCss(ele,opt) {
         for(var attr in opt){
             utils.setCss(ele,attr,opt[attr]);
         }
     }
     setGroupCss(oDiv,{
         width:"50%",
         height:100,
         backgroundColor:"green",
         float:"right"
     })
 </script>
 </body>

css方法

目的：三合一，集获取，设置一个，设置一组三者
参数：根据需要添加
思路：
- 判断传入的实参，利用arguments，第一个参数ele,第二个参数（a.字符串attr，b.对象opt),第三个参数属性值；
- 判断条件是传入几个实参，即实参的类型
知识点
- 字符串用typeof判断，对象用{}.toString()==="[object Object]"判断是否为真；

代码：

1）工具库代码：

 css:function (ele) {
         var argTwo=arguments[1];//获取第二个参数
         if(typeof argTwo==="string"){
             var argThree=arguments[2];//获取第三个参数
             if(typeof argThree==="undefined"){
                 return this.getCss(ele,argTwo);
             }else{
                 this.setCss(ele,argTwo,argThree);
             }
         }
         if(argTwo.toString()==="[object Object]"){
             this.setGroupCss(ele,argTwo);
         }
     }

2）验证代码：

 <body>
 <div id="div1">美好</div>
 <script src="utils3.js"></script>
 <script>
     var oDiv=document.getElementById("div1");
     utils.css(oDiv,{
         width:"50%",
         height:100,
         backgroundColor:"green",
         float:"right"
     });
     console.log(utils.css(oDiv,"height"));
     console.log(utils.css(oDiv,"width"));
     utils.css(oDiv,"height",200)
 </script>
 </body>

getChildren方法

目的：获取容器节点下的所有元素子节点集合，并获取指定tagName的元素集合
参数：parent：容器节点，tagName：指定标签名，可传可不传；
知识点：
- 获取元素身上的tagName方法：cur.tagName或cur.nodeName，二者获取的都是大写的标签名
- parent.children，可以获取父级元素下所有的元素子节点，但是在IE8浏览器中，会将注释节点算成元素节点；

代码：

1）工具库代码：

 getChildren:function (parent, tagName) {
     var ary=[];
     var aChilds=parent.childNodes;
     for(var i=0; i<aChilds.length; i++){
         var cur=aChilds[i];
         if(cur.nodeType==1){
             if(typeof tagName==="undefined"){
                 ary.push(cur);
             }else if(cur.nodeName===tagName.toUpperCase()){
                 //获取元素身上的tagName方法：cur.tagName或cur.nodeName，二者获取的都是大写的标签名
                 ary.push(cur);
             }
         }
     }
     return ary;
 }

2）验证代码：

 <body>
 <div id="wrap">
     <div></div><!--dd-->
     <div></div>
     <div></div>
     <div></div>
     <div></div>
     <p></p>
     <p></p>
     <span></span>
 </div>
 <script src="utils3.js"></script>
 <script>
     var oWrap=document.getElementById("wrap");
     var achilds=utils.getChildren(oWrap);
     console.log(achilds.length);//结果为8；
     var achilds1=utils.getChildren(oWrap,"div");
     console.log(achilds1.length);//结果为5；
     var achilds2=utils.getChildren(oWrap,"span");
     console.log(achilds2.length);//结果为1；
 </script>
 </body>

prevNode方法，nextNode方法，sibling方法

preNode方法：获取元素的上一个哥哥元素节点
nextNode方法：获取元素下一个弟弟元素节点
sibling方法：获取元素相邻的兄弟元素节点集合
知识点：
- previousElementSibling与nextElementSibling两者在标准浏览器中支持，在IE5-8浏览器中不支持；
工具库代码：

 //1 元素上一个哥哥元素节点
 prevNode:function (ele) {
     if(frg){
         return ele.previousElementSibling;
     }
     pre=ele.previousSibling;
     while(pre && pre.nodeType !==1){
         pre=pre.previousSibling;
     }
     return pre;
 },
 //2 元素的下一个弟弟元素节点
 nextNode:function (ele) {
     if(frg){
         return ele.nextElementSibling;
     }
     var nex=ele.nextSibling;
     while(nex && nex.nodeType !==1){
         nex=nex.nextSibling;
     }
     return nex;
 },
 //3 元素的相邻元素节点（包含哥哥和弟弟元素节点）
 sibling:function (ele) {
     var pre=this.prevNode(ele);
     var next=this.nextNode(ele);
     var ary=[];
     if(pre) ary.push(pre);
     if(next) ary.push(next);
     return ary;
 }

prevNodeAll方法，nextNodeAll方法，siblings方法

preNodeAll方法：获取元素所有的哥哥元素节点集合
nextNodeAll方法：获取元素所有的弟弟元素节点集合
siblings方法：获取元素所有的兄弟元素节点集合
工具库代码：

 //4 获取元素所有的哥哥元素节点集合
 prevNodeAll:function (ele){
     var ary=[];
     var pre=this.prevNode(ele);
     while(pre){
         //unshift的目的是使元素按着dom顺序插入数组；
         ary.unshift(pre);
         pre=this.prevNode(pre);
     }
     return ary;
 },
 //5 获取元素所有的弟弟元素节点集合
 nextNodeAll:function (ele){
     var ary=[];
     var nex=this.nextNode(ele);
     while(nex){
         ary.push(nex);
         nex=this.nextNode(nex);
     }
     return ary;
 },
 //6 元素的所有的相邻元素节点
 siblings:function (ele) {
     return this.prevNodeAll(ele).concat(this.nextNodeAll(ele));
 }

index方法
- 目的：获取当前元素在容器所有子节点中的位置，即索引值（从0开始）
- 获取：索引值等于当前元素所有哥哥元素的个数
- 工具库代码：
```
 index:function (ele) {
     return this.prevNodeAll(ele).length;
 }
```

firstEleChild方法，lastEleChild方法

firstEleChild方法：获取父级元素中第一个元素节点
lastEleChild方法：获取父级元素中最后一个元素节点
工具库代码：

 //1 firstChild 所有子节点中第一个元素节点
 firstEleChild:function (parent) {
     return this.getChildren(parent)[0];
 },
 //2 lastChild 所有子节点中最后一个元素节点
 lastEleChild:function (parent) {
     var ary=this.getChildren(parent);
     return ary[ary.length-1];
 },

appendChild方法，prependChild方法，insertBefore方法，insertAfter方法

appendChild方法：插入父级元素所有子元素节点的最后一个
prependChild方法：插入父级元素所有子元素节点的第一个
insertBefore方法：插入指定子元素节点的前面
insertAfter方法：插入指定子元素节点的后面

  //1 appendChild 插在父级元素所有子元素的后面
 appendChild:function (parent,newold){
     parent.appendChild(newold);
 },
 //2 prependChild 插在父级元素所有子元素的前面
 prependChild:function (parent,newnode) {
     var firstNode=this.firstChild(parent);
     if(firstNode){
         parent.insertBefore(newnode,firstNode);
     }else{
         parent.appendChild(newnode);
     }
 },
 //3 insertBefore 插入到指定子元素节点的前面
 insertBefore:function (newnode,oldnode) {
     oldnode.parentNode.insertBefore(newnode,oldnode);
 },
 //4 insertAfter 插入到指定子元素节点的后面
 insertAfter:function (newnode,oldnode) {
     var nexnode=this.nextNode(oldnode);
     if(nexnode){
         this.insertBefore(newnode,nexnode);
     }else{
         this.appendChild(oldnode.parent,newold);
     }
 }

第七周第五天笔记之DOM库

1 DOM库创建

猜你喜欢

热点阅读