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);
}
}
- 用最简单的图文带你看懂区块链
- 微信小游戏正式上线!小程序的一个类目,即点即玩!
- CentOS7安装GitLab、汉化、邮箱配置及使用
- Bootstrap源码分析之transition、affix
- Redis从单机到集群,一步步教你环境部署以及使用
- C++内存管理学习堆和栈
- 人人公司宣布收购美国卡车社区平台Trucker Path
- Mysql字符串截取总结:left()、right()、substring()、substring_index()
- c++程序的内存格局
- SpringMVC中利用@InitBinder来对页面数据进行解析绑定
- 门罗盘点:2017年那些AI击败人类的瞬间
- sizeof和strlen的区别
- mysql索引使用技巧及注意事项
- 条码支付新规,微信支付宝还好么?
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例