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学堂