HTML5学堂-码匠 HTML5学堂

您当前位于:jQuery与类库搭建 ——> 如何编写自己的JS框架/类库-之三 原生DOM功能函数

如何编写自己的JS框架/类库-之三 原生DOM功能函数

2015/05/02 21:14:04 | 作者:HTML5学堂(码匠) | 分类:jQuery与类库搭建 | 关键词:框架搭建,类库,框架,DOM操作

HTML5-类库系列 原生DOM功能函数

HTML5学堂:今天我们抛开框架,书写一些DOM操作方面的功能。相信用过JQ的人,绝对不会使用原生DOM进行某些效果的实现。原因很简单,在原生DOM当中需要处理各种问题——主要是非标签节点也会成为查找的内容。今天我们就是用原生实现这样几个功能——查找第一个、最后一个子元素、查找父级元素、查找前一个和下一个兄弟级标签、移除一个元素所有的子元素。也借助这个过程理解功能的原理。

1、查找第一个子元素 DOMFirstChild

在进行子元素的查找时,我们都会想到原生DOM方法中的firstChild,那么此时我们需要保证查找到的元素是存在的,同时保证这个元素是一个标签节点(此处我们只需要检测节点类型-nodeType),如果不是,那么我们就在当前标签状态下,继续寻找下一个兄弟级标签。

ele.nodeType == 1 —— 元素节点

ele.nodeType == 2 —— 属性节点

ele.nodeType == 3 —— 文本节点

ele.nodeType == 4 —— CDATA区段

ele.nodeType == 5 —— 实体引用

ele.nodeType == 6 —— 实体

ele.nodeType == 7 —— 处理指令

ele.nodeType == 8 —— 注释节点

ele.nodeType == 9 —— 文档节点

代码实现:

  1. /*
  2. * DOM相关操作
  3. * 作者:独行冰海 - 利利
  4. * 原生DOM指向各种类型,需要处理,令其只指向元素类型
  5. */
  6. function DOMFirstChild(nowEle){
  7.     var targetEle = nowEle.firstChild;
  8.     while (targetEle && targetEle.nodeType != 1) {
  9.         targetEle = targetEle.nextSibling;
  10.     }
  11.     return targetEle;
  12. }

2、查找最后一个子元素 DOMLastChild

先使用lastChild寻找到最后一个子元素,然后检测,如果不是标签节点,则使用previousSibling向前寻找同级元素。

代码实现:

  1. function DOMLastChild(nowEle){
  2.     var targetEle = nowEle.lastChild;
  3.     while (targetEle && targetEle.nodeType != 1) {
  4.         targetEle = targetEle.previousSibling;
  5.     }
  6.     return targetEle;
  7. }

欢迎沟通交流~HTML5学堂

3、可控层数的父级元素查找 DOMParent

这个函数的作用与前两者不同,并非是单纯的筛选节点,而是进行了功能扩充,增加了一个参数,让用户可以控制查找父级元素的层数,如直接查找id名为con的父级的父级元素,在这个函数中也是可以做到的。此处的一个原理在于,每次先对当前元素进行检测,检测是否是根节点(即文档节点,nodeType==9),如果不是根节点,那么使用parentNode进行向上级查找。此时利用第二个参数构成for循环,实现多次的查找父级。

代码实现:

  1. // 操作多层
  2. function DOMParent(nowEle, num) {
  3.     var targetEle = nowEle;
  4.     var num = num || 1;
  5.     for (var i = 0; i < num; i++) {
  6.         if (targetEle.nodeType == 9) { // 根节点
  7.             break;
  8.         } else if (targetEle != null) {
  9.             targetEle = targetEle.parentNode;
  10.         }
  11.     };
  12.     return targetEle;
  13. }

在这个代码中还进行了一处的优化,即第二句 var num = num || 1,也就是说,程序员在查找一级的父级元素时是可以不传第二个参数的。

4、前一个兄弟标签 DOMPre

这个函数功能的原理和最初两个类似,因此直接上代码:

  1. function DOMPre(nowEle) {
  2.     var nowEle = nowEle.previousSibling;
  3.     while(nowEle && nowEle.nodeType != 1) {
  4.         nowEle = nowEle.previousSibling;
  5.     }
  6.     return nowEle;
  7. }

5、下一个兄弟标签 DOMNext

这个函数功能的原理和最初两个类似,因此直接上代码:

  1. function DOMNext(nowEle) {
  2.     var nowEle = nowEle.nextSibling;
  3.     while(nowEle && nowEle.nodeType != 1) {
  4.         nowEle = nowEle.nextSibling;
  5.     }
  6.     return nowEle;
  7. }

6、清空所有子标签 DOMEmpty

好啦,这个是我们今天最后一个功能函数,清空一个元素中的所有子元素(标签)。原理很easy,从当前元素的第一个元素开始找,然后就用removeChild,删啊删啊删啊~~~~看代码:

  1. function DOMEmpty(nowEle) {
  2.     while(nowEle.firstChild) {
  3.         nowEle.removeChild(nowEle.firstChild);
  4.     }
  5. }

欢迎沟通交流~HTML5学堂

微信公众号,HTML5学堂,码匠,原创文章,WEB前端,技术分享

HTML5学堂

原创前端技术分享

HTML5学堂,HTML5,WEB,前端,视频课程,技术视频,学习视频,面试,JS

原创视频课程

用心打造精品课程

微信小程序,决胜前端,面试题,面试题集合,前端,HTML5,真题

小程序-决胜前端

前端面试题宝库

原创书籍,学习书籍,书籍推荐,HTML5布局之路,HTML5,WEB前端

HTML5布局之路

非传统模式讲解前端

iOS,APP,码集,案例交互,JavaScript学习,WEB前端,HTML5

iOS APP 码集

案例交互式学习JS