第七周第四天笔记之DOM库

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

1 复习DOM相关的知识

获取元素的几种形式：
- id: var oele=document.getElementById("id");
- tagname: var aele=document.getElementsByTagName("tagname");
- classname: var aele=document.getElementsByClassName(classname);
- name: var aele=document.getElementsByName("name");
- clientWidth
- querySelector
- querySelectorAll
DOM节点属性

节点	nodeName	nodeValue	nodeType
元素节点	大写的标签名	null	1
文本节点	#text	文本内容	3
注释节点	#comment	注释内容	8
文档节点	#document	null	9

节点关系
- parentNode
- childNodes
- children
- firstChild
- lastChild
- previousSibling
- nextSibling
DOM动态操作
- 创建
  - 创建元素节点：document.createElement("tagname");
  - 创建文本节点：document.createTextNode("文本内容");
  - 克隆节点：obj.cloneNode(boolean是否深度克隆)
- 动态插入
  - appendChild:parentnode.appendChild(newnode)插入到父级节点所有子节点最后一项;
  - insertBefore:parentnode.insertBefore(newnode,oldnode)插入到父级节点指点定子节点的前面；
- 动态删除，替换
  - removeChild:parentnode.removeChild(oldnode)删除父级节点中的指定子节点；
  - replaceChild:parentnode.replaceChild(newnode,oldnode)替换父级节点中的制定子节点；
属性操作
- 通过点和[];
- attribute系列
  - 获取：elenode.getAttribute("attr")
  - 设置：elenode.setAttribute("attr","value")
  - 删除：elenode.removeAttribute("attr")

2 DOM库

获取元素
- getByClass 通过class名来获取元素
- hasClass 判断元素是否已存在某个class名
- addClass 添加class，判断元素上不存在某个class名，然后再设置
- removeClass 移除class
- win 盒子模型的封装
- offset 盒子模型偏移量的封装
设置样式
- getCss 获取非行间样式，非行间样式只能用添加class名来添加
- setCss 设置一个行间样式，不能设置非行间样式
- setGroupCss 设置一组行间样式
- css 三合一，将getCss,setCss,setGroupCss合并为一组
节点关系
- getChildren 获取当前节点的子元素节点集合
- prevNode 获取上一个哥哥元素节点
- prevNodeAll 获取所有的哥哥元素节点集合
- nextNode 获取下一个弟弟元素节点
- nextNodeAll 获取所有的弟弟元素节点集合
- sibling 获取相邻兄弟元素节点
- siblings 获取所有的兄弟元素节点集合
- firstEleChild 第一个子元素节点
- lastEleChild 最后一个子元素节点
- index 当前元素的索引
动态插入
- appendChild 插入容器末尾
- prependChild 插入容器开头
- insertBefore 插入到指定元素的前面
- insertAfter 插入到指定元素的后面

3 工具库

makeArray: 类数组转数组
jsonParse: josn格式的字符串转为json格式的对象
rnd: 随机数获取
getCss: 获取元素身上的属性值
win: 获取浏览器的可视区域宽高及卷去的长度
offset: 获取元素相对于body的偏移量

4 DOM库创建

getByClass方法
- 目的：通过指定的一组class名，获取包含其的一组元素，返回一个数组
- 参数：strClass:指定一组class名字符串； parent:父级元素；返回值：数组
- 思路：
  - 判断浏览器种类，标准浏览器下可以使用document.getElementsByClassName(strClass)来获取所有元素集合，但是需要将类数组转成数组；
  - IE6,7,8浏览器下，自己封装方法
  - 获取父级元素下的所有元素集合
  - 新建空数组ary
  - 将strClass字符串一定要加工，去掉其前后的空格，所以要添加strClass.replace(/(^ +)|( +$)/g,""),将字符串开头和结尾的空格替换为空字符，即删除掉，然后再利用split进行分割；
  - 将strClass字符串利用空格分割成数组aryClass，正则表达式：/\s+/g，其中全局属性g，可有可无；
  - 遍历元素集合，获得每个元素的class名，然后遍历aryClass数组，利用正则判断元素的class名中是否存在aryClass数组中所有项，只要有一项不存在，就阻断数组遍历，不合格；
  - 如何判断什么样的元素可以插入到新建的空数组中，利用一个开关bOk，在元素集合遍历时，给其赋值为true，当数组遍历校验中，如果有一项不匹配，那么给bOk赋值为false，并添加break中断for循环；待数组遍历完成，判断bOk的布尔值，如果为true，代表所有数组遍历中均匹配，满足条件，将此元素插入到数组ary中，如果为false，则不插入；
  - 待元素集合遍历完成后，返回ary;
- 知识点：
  - var aEle=parent.getElementsByTagName("*");代码代表获取parent父级元素下的所有元素集合；
  - strClass=strClass.replace(/(^ +)|( +$)/g,""),过滤传入的实参strClass,将其前后空格删除，其中正则表达式/(^ +)|( +$)/g,代表的含义是："开头为一个或多个空格"或"结尾为一个或多个空格"，进行全局查找替换；正则表达式可以写成：/(^\s+)|(\s+$)/g;
  - var reg=new RegExp("\\b"+aryClass[j]+"\\b");正则创建为实例创建，需要加引号，需要转义，可以进行变量拼接；其中\b代表开头，结尾，空格；而字面量创建，不需要加引号，不需要转义，不能进行变量拼接；
  - bOk思想的运用，解决for循环中的不满足情况问题；
- 注意点：
  - 添加的参数strClass字符串中，开头结尾不能有空格，不然会被split分割成空元素，添加到数组中，在验证时，虽然结果不会影响，但是不利于代码优化，所以在传入实参后，必须对其进行过滤，将开头与结尾的空格去除掉；
```
 <body>
 <div class="wrap" id="wrap">
     <div class="div1 div2 div3 div4">1</div>
     <div class="div1 div2 div3">2</div>
     <div class="div1 div2">3</div>
     <div class="div1">4</div>
     <p class="div1 div2 div3">5</p>
     <span>6</span>
 </div>
 <script>
     //传入的strClass不能有前后空格，所以要删除，才能转化为数组
     var oWrap=document.getElementById("wrap");
     function getByClass(strClass,parent) {
         parent=parent || document;
         //标准浏览器
         if("getComputedStyle" in window){
             //类数组转数组
             return Array.prototype.slice.call(parent.getElementsByClassName(strClass));
         }
         //IE6,7,8浏览器
         var ary=[];
         var aEle=parent.getElementsByTagName("*");//*代表获取左右的元素
         var aryClass=strClass.replace(/(^ +)|( +$)/g,"").split(/\s+/);//正则也可以写成/空格+/,split中正则的全局g可有可无；
         for(var i=0; i<aEle.length; i++){
             var bOk=true;
             //目的，strClass中的字符串转为数组，然后遍历每一项，去比较aEle[i]中的class是否存在，有一项不存在就终止
             var curEle=aEle[i];
             var strEleClass=curEle.className;
             for(var j=0; j<aryClass.length; j++){
                 var reg=new RegExp("\\b"+aryClass[j]+"\\b");//实例创建：需要加引号，需要转义，可以变量拼接
                 if(!reg.test(strEleClass)){
                     bOk=false;
                     break;
                 }
             }
             if(bOk){
                 ary.push(curEle);
             }
         }
         return ary;
     }
     console.log(getByClass("  div1   div2    div3        ",oWrap));
 </script>
 </body>
```
hasClass方法
- 目的：判断元素身上，是否存在某一个指定的class名
- 参数：ele:元素； cName:指定class名；返回值：布尔值
- 注意点：
  - cName=cName.replace(/(^\s+)|(\s+$)/g,"");给传入的实参字符串class过滤掉前后空格；
  - var reg=new RegExp("\\b"+cName+"\\b");代码中的正则表达式添加前后\\b的目的是为了防止元素的class名上会包含被检测字符，必须加上前后\\b,其中\b代表：开头、结尾、空格，在实例创建中，需要转义；
  - var reg=new RegExp("(^|\\s+)"+cName+"(\\s+|$)")，代码为上述正则表达式的严格写法，其中\s代表空格，需要转义，(^|\\s+)指的是开头或多个空格；
  - 例：如果cName为"div1",而元素身上的class名为"divdiv1 div2 div3",如果不添加\\b，那么验证就会成功，进而出错；
```
 <script>
     function hasClass(ele, cName) {
         cName=cName.replace(/(^\s+)|(\s+$)/g,"");
         var reg=new RegExp("\\b"+cName+"\\b");//严格写法：("(^|\\s+)"+cName+"(\\s+|$)"),实例创建中"\s"需要转义；
         return reg.test(ele.className);
     }
 </script>
```

addClass方法

目的：给元素身上添加一组class名，要先判断元素身上是否已存在需添加class名
参数：ele：元素； strClass：待添加的class名返回值：无；
注意点：
- strClass=strClass.replace(/(^\s+)|(\s+$)/g,"")开始对传入的实参strClass进行过滤
- ele.className=ele.className.replace(/(^\s+)|(\s+$)/g,"").replace(/\s+/," ")，在拼接之前规范原有的字符串；
- ele.className+=" "+aryClass[i];字符串拼接时，要拼接空格；

 <script>
     function addClass(ele,strClass) {
         strClass=strClass.replace(/(^\s+)|(\s+$)/g,"");//把传进来的strClass进行过滤，删除开头结尾空格
         var aryClass=strClass.split(/\s+/g);
         for(var i=0; i<aryClass.length; i++){
             if(!this.hasClass(ele,aryClass[i])){
                 //1 开头结尾去掉空格 2 中间多个空格，变为一个空格
                 ele.className=ele.className.replace(/(^\s+)|(\s+$)/g,"").replace(/\s+/," ")；//在拼接之前删除原来字符串的开头结尾空格，将中间多个空格，变为一个空格；
                 ele.className+=" "+aryClass[i];//拼接新的class名，前面拼接上一个空格；
             }
         }
     }
 </script>

removeClass方法

目的：删除元素身上的class名，要判断元素身上是否已存在要删除的class;
参数：ele:元素； strClass：待删除的class名返回值：无；
注意点：
- strClass=strClass.replace(/(^\s+)|(\s+$)/g,"")开始对传入的实参strClass进行过滤；
- ele.className=ele.className.replace(aryClass[i]," ").replace(/(^\s+)|(\s+$)/g,"").replace(/\s+/," ");，在验证要删除的class名元素身上存在后，利用replace进行替换删除，替换为空格，然后再对替换完的字符串进行规范：1）删除开头结尾空格，2）将字符中间的多个空格，替换为一个空格；

 <body>
 <div class="wrap" id="wrap">
     <div class="div1 div2 div3 div4">1</div>
     <div class="div1 div2 div3">2</div>
     <div class="div1 div2">3</div>
     <div class="div1">4</div>
     <p class="div1 div2 div3">5</p>
     <span>6</span>
 </div>
 <script src="utils2.js"></script>
 <script>
      var oWrap=document.getElementById("wrap");
      var aDiv=oWrap.getElementsByTagName("div");
      function  removeClass(ele,strClass){
          strClass=strClass.replace(/(^\s+)|(\s+$)/g,"");
          var aryClass=strClass.split(/\s+/g);
          for(var i=0; i<aryClass.length; i++){
              if(utils.hasClass(ele,aryClass[i])){
                  ele.className=ele.className.replace(aryClass[i]," ").replace(/(^\s+)|(\s+$)/g,"").replace(/\s+/," ");
              }
          }
      }
      removeClass(aDiv[0],"div1      div3  ");
      console.log("("+aDiv[0].className+")")//结果为："(div2 div4)"
 </script>
 </body>

第七周第四天笔记之DOM库

1 复习DOM相关的知识

2 DOM库

3 工具库

4 DOM库创建

猜你喜欢

热点阅读