HTML5-类库系列 原生DOM功能函数
在前一篇博文中，我们探讨了“类名操作方面的类库搭建”。今天，我们将抛开类相关内容，专注于实现一些 DOM 操作方面的功能。相信有过 jQuery 使用经验的开发者，往往不太愿意使用原生 DOM 来实现某些效果。这是因为在原生 DOM 操作中，需要处理诸多问题，其中一个主要问题是，非标签节点也会成为查找的内容。
本文将使用原生 JavaScript 实现以下几个功能：查找第一个子元素、查找最后一个子元素、查找可控层数的父级元素、查找前一个兄弟级标签、查找下一个兄弟级标签以及移除一个元素的所有子元素。通过这个过程，我们也能深入理解这些功能的实现原理。
1. 查找第一个子元素：DOMFirstChild
在查找子元素时，我们通常会想到原生 DOM 方法中的 firstChild。但在使用时，我们需要确保查找到的元素存在，并且该元素是一个标签节点。这里我们可以通过检测节点类型（nodeType）来实现。如果当前元素不是标签节点，我们就在当前标签状态下，继续寻找下一个兄弟级标签。
以下是不同 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—— 文档节点
代码实现
/*
* DOM 相关操作
* 作者：独行冰海 - 利利
* 原生 DOM 指向各种类型，需要处理，令其只指向元素类型
*/
function DOMFirstChild(nowEle) {
var targetEle = nowEle.firstChild;
while (targetEle && targetEle.nodeType !== 1) {
targetEle = targetEle.nextSibling;
}
return targetEle;
}
2. 查找最后一个子元素：DOMLastChild
我们可以先使用 lastChild 寻找到最后一个子元素，然后检测该元素是否为标签节点。如果不是标签节点，则使用 previousSibling 向前寻找同级元素。
代码实现
function DOMLastChild(nowEle) {
var targetEle = nowEle.lastChild;
while (targetEle && targetEle.nodeType !== 1) {
targetEle = targetEle.previousSibling;
}
return targetEle;
}
3. 可控层数的父级元素查找：DOMParent
这个函数与前面两个函数不同，它并非单纯的筛选节点，而是对功能进行了扩充。该函数增加了一个参数，允许用户控制查找父级元素的层数。例如，我们可以直接查找 id 名为 con 的父级的父级元素。其实现原理是，每次先对当前元素进行检测，判断是否为根节点（即文档节点，nodeType === 9）。如果不是根节点，则使用 parentNode 进行向上级查找。利用第二个参数构成 for 循环，实现多次查找父级元素的功能。
代码实现
// 操作多层
function DOMParent(nowEle, num) {
var targetEle = nowEle;
num = num || 1;
for (var i = 0; i < num; i++) {
if (targetEle.nodeType === 9) { // 根节点
break;
} else if (targetEle !== null) {
targetEle = targetEle.parentNode;
}
}
return targetEle;
}
在上述代码中，我们进行了一处优化，即 num = num || 1。这意味着，当程序员查找一级父级元素时，可以不传递第二个参数。
4. 前一个兄弟标签：DOMPre
这个函数的实现原理与前面查找第一个和最后一个子元素的函数类似。以下是具体代码：
function DOMPre(nowEle) {
var prevEle = nowEle.previousSibling;
while (prevEle && prevEle.nodeType !== 1) {
prevEle = prevEle.previousSibling;
}
return prevEle;
}
5. 下一个兄弟标签：DOMNext
该函数的实现原理同样与前面查找第一个和最后一个子元素的函数类似。以下是具体代码：
function DOMNext(nowEle) {
var nextEle = nowEle.nextSibling;
while (nextEle && nextEle.nodeType !== 1) {
nextEle = nextEle.nextSibling;
}
return nextEle;
}
6. 清空所有子标签：DOMEmpty
这是我们今天要实现的最后一个功能函数，用于清空一个元素中的所有子元素（标签）。其原理很简单，从当前元素的第一个子元素开始，使用 removeChild 方法逐个删除子元素。
代码实现
function DOMEmpty(nowEle) {
while (nowEle.firstChild) {
nowEle.removeChild(nowEle.firstChild);
}
}
欢迎大家互相学习交流。独行冰海