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 —— 文档节点

代码实现:

/*
* 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;
var num = num || 1;
for (var i = 0; i < num; i++) {
if (targetEle.nodeType == 9) { // 根节点
break;
} else if (targetEle != null) {
targetEle = targetEle.parentNode;
}
};
return targetEle;
}

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

4、前一个兄弟标签 DOMPre

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

function DOMPre(nowEle) {
var nowEle = nowEle.previousSibling;
while(nowEle && nowEle.nodeType != 1) {
nowEle = nowEle.previousSibling;
}
return nowEle;
}

5、下一个兄弟标签 DOMNext

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

function DOMNext(nowEle) {
var nowEle = nowEle.nextSibling;
while(nowEle && nowEle.nodeType != 1) {
nowEle = nowEle.nextSibling;
}
return nowEle;
}

6、清空所有子标签 DOMEmpty

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

function DOMEmpty(nowEle) {
while(nowEle.firstChild) {
nowEle.removeChild(nowEle.firstChild);
}
}

原文发布于微信公众号 - HTML5学堂(h5course-com)

原文发表时间:2015-12-15

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏老司机的技术博客

宝宝都能学会的python编程教程7:元祖(tuple)

元祖 元祖看起来和列表很相似,但是不包括方括号,因此,一般这样定义和使用元祖: >>> tuple=1,2,3 >>> tuple (1, 2, 3) >>> ...

3278
来自专栏Golang语言社区

Golang语言社区--Go语言基础第四节类型

大家好,我是Golang语言社区主编彬哥,这节给大家讲解Go语言中的类型。

4495
来自专栏Golang语言社区

深入剖析Golang语言编程中switch语句的使用

switch语句可以让一个变量对反对值的列表平等进行测试。每个值被称为一个的情况(case),变量被接通检查每个开关盒(switch case)。 在Go编程,...

3584
来自专栏linjinhe的专栏

Go语言:map使用笔记

Go 的 map 是 hash map; C++ 的 map 是 tree (主流实现是红黑树); C++ 的 hash map 是unordered_ma...

5695
来自专栏coding for love

ES6常用新特性学习4-箭头函数

这样的写法。但是ES6 提供了新的函数定义方法,即箭头函数。不仅在写法上简化了代码量,而且更重要的是提供了新的this指向。大家可以对比我之前的文章JS入门难点...

1291
来自专栏IMWeb前端团队

解析javascript关键字this

this是javascript语言的一个关键字。它可以是全局对象、当前对象或者任意对象,这完全取决于函数的调用方式。下面我们将按照调用方式的不同,分别讨论 th...

1969
来自专栏前端知识分享

第39天:字符串连接、截取操作

一、网址编码 encodeURIComponent() 函数可把字符串作为 URI 组件进行编码 decodeURIComponent() 函数可把字符串作为 ...

1131
来自专栏Golang语言社区

厚土Go学习笔记 | 18. 数组

数组由一组数据类型相同的值组成。 定义一个整数数组 var a [10]int 这个数组由10个整数组成的。 数组的长度是其类型的一部分,因此数组不能改变大小。...

3465
来自专栏全沾开发(huā)

如何在ES5与ES6环境下处理函数默认参数

1584
来自专栏Java帮帮-微信公众号-技术文章全总结

JavaWeb03-轻松理解JS(Java真正的全栈开发)

? 一.js常用对象 ljs中的常见对象有以下几个: Boolean Number String Array 数组 Date 日期 Math 数学 RegEx...

29412

扫码关注云+社区

领取腾讯云代金券