Javascript ParentNode和ChildNode接口原理解析


Posted in Javascript onMarch 16, 2020

ParentNode 接口,ChildNode 接口

节点对象除了继承 Node 接口以外,还拥有其他接口。ParentNode接口表示当前节点是一个父节点,提供一些处理子节点的方法。ChildNode接口表示当前节点是一个子节点,提供一些相关方法。

ParentNode 接口

如果当前节点是父节点,就会混入了(mixin)ParentNode接口。由于只有元素节点(element)、文档节点(document)和文档片段节点(documentFragment)拥有子节点,因此只有这三类节点会拥有ParentNode接口。

ParentNode.children
children属性返回一个HTMLCollection实例,成员是当前节点的所有元素子节点。该属性只读。

下面是遍历某个节点的所有元素子节点的示例。

for (var i = 0; i < el.children.length; i++) {
 // ...
}

注意,children属性只包括元素子节点,不包括其他类型的子节点(比如文本子节点)。如果没有元素类型的子节点,返回值HTMLCollection实例的length属性为0。

另外,HTMLCollection是动态集合,会实时反映 DOM 的任何变化。

ParentNode.firstElementChild

firstElementChild属性返回当前节点的第一个元素子节点。如果没有任何元素子节点,则返回null。

document.firstElementChild.nodeName
// "HTML"

上面代码中,document节点的第一个元素子节点是<HTML>。

ParentNode.lastElementChild
lastElementChild属性返回当前节点的最后一个元素子节点,如果不存在任何元素子节点,则返回null。

document.lastElementChild.nodeName
// "HTML"

上面代码中,document节点的最后一个元素子节点是<HTML>(因为document只包含这一个元素子节点)。

ParentNode.childElementCount
childElementCount属性返回一个整数,表示当前节点的所有元素子节点的数目。如果不包含任何元素子节点,则返回0。

document.body.childElementCount // 13

ParentNode.append(),ParentNode.prepend()

append方法为当前节点追加一个或多个子节点,位置是最后一个元素子节点的后面。

该方法不仅可以添加元素子节点,还可以添加文本子节点。

var parent = document.body;

// 添加元素子节点
var p = document.createElement('p');
parent.append(p);

// 添加文本子节点
parent.append('Hello');

// 添加多个元素子节点
var p1 = document.createElement('p');
var p2 = document.createElement('p');
parent.append(p1, p2);

// 添加元素子节点和文本子节点
var p = document.createElement('p');
parent.append('Hello', p);

注意,该方法没有返回值。

prepend方法为当前节点追加一个或多个子节点,位置是第一个元素子节点的前面。它的用法与append方法完全一致,也是没有返回值。

ChildNode 接口

如果一个节点有父节点,那么该节点就拥有了ChildNode接口。

ChildNode.remove()
remove方法用于从父节点移除当前节点。

el.remove()

上面代码在 DOM 里面移除了el节点。

ChildNode.before(),ChildNode.after()
before方法用于在当前节点的前面,插入一个或多个同级节点。两者拥有相同的父节点。

注意,该方法不仅可以插入元素节点,还可以插入文本节点。

var p = document.createElement('p');
var p1 = document.createElement('p');

// 插入元素节点
el.before(p);

// 插入文本节点
el.before('Hello');

// 插入多个元素节点
el.before(p, p1);

// 插入元素节点和文本节点
el.before(p, 'Hello');

after方法用于在当前节点的后面,插入一个或多个同级节点,两者拥有相同的父节点。用法与before方法完全相同。

ChildNode.replaceWith()
replaceWith方法使用参数节点,替换当前节点。参数可以是元素节点,也可以是文本节点。

var span = document.createElement('span');
el.replaceWith(span);

上面代码中,el节点将被span节点替换。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery 源码分析笔记(6) jQuery.data
Jun 08 Javascript
javascript的事件触发器介绍的实现
Jun 05 Javascript
javascript实现页面刷新时自动清空表单并选中的方法
Jul 18 Javascript
JavaScript函数的一些注意要点小结及js匿名函数
Nov 10 Javascript
基于Javascript实现返回顶部按钮
Feb 29 Javascript
jquery 获取select数组与name数组长度的实现代码
Jun 20 Javascript
让浏览器崩溃的12行JS代码(DoS攻击分析及防御)
Oct 10 Javascript
webpack实现热更新(实施同步刷新)
Jul 28 Javascript
详解Nuxt.js部署及踩过的坑
Aug 07 Javascript
浅谈Vue3.0之前你必须知道的TypeScript实战技巧
Sep 11 Javascript
jquery实现图片无缝滚动 蒙版遮蔽效果
Jan 11 jQuery
详解Typescript里的This的使用方法
Jan 08 Javascript
JS手写一个自定义Promise操作示例
Mar 16 #Javascript
JS函数参数的传递与同名参数实例分析
Mar 16 #Javascript
vue css 引入asstes中的图片无法显示的四种解决方法
Mar 16 #Javascript
JS函数本身的作用域实例分析
Mar 16 #Javascript
JavaScript实现tab栏切换效果
Mar 16 #Javascript
vue-cli3使用mock数据的方法分析
Mar 16 #Javascript
vue-cli3.0实现一个多页面应用的历奇经历记录总结
Mar 16 #Javascript
You might like
php使用mb_check_encoding检查字符串在指定的编码里是否有效
2013/11/07 PHP
php禁用cookie后session设置方法分析
2016/10/19 PHP
php7安装mongoDB扩展的方法分析
2017/08/02 PHP
php实现支付宝当面付(扫码支付)功能
2018/05/30 PHP
laravel框架学习笔记之组件化开发实现方法
2020/02/01 PHP
javascript高亮效果的二种实现方法
2008/09/14 Javascript
jQuery生成asp.net服务器控件的代码
2010/02/04 Javascript
JavaScript 空位补零实现代码
2010/02/26 Javascript
javascript+xml实现简单图片轮换(只支持IE)
2012/12/23 Javascript
JS自定义对象实现Java中Map对象功能的方法
2015/01/20 Javascript
jquery实现图片随机排列的方法
2015/05/04 Javascript
JS三级可折叠菜单实现方法
2016/02/29 Javascript
Linux下为Node.js程序配置MySQL或Oracle数据库的方法
2016/03/19 Javascript
微信小程序(应用号)简单实例应用及实例详解
2016/09/26 Javascript
javascript 显示全局变量与隐式全局变量的区别
2017/02/09 Javascript
jquery仿苹果的时间/日期选择效果
2017/03/08 Javascript
详解如何将 Vue-cli 改造成支持多页面的 history 模式
2017/11/20 Javascript
vue中实现methods一个方法调用另外一个方法
2018/02/08 Javascript
JS几个常用的函数和对象定义与用法示例
2020/01/15 Javascript
web.py中调用文件夹内模板的方法
2014/08/26 Python
Android应用开发中Action bar编写的入门教程
2016/02/26 Python
详解python 字符串和日期之间转换 StringAndDate
2017/05/04 Python
用Python实现数据的透视表的方法
2018/11/16 Python
Python实现钉钉发送报警消息的方法
2019/02/20 Python
python实现矩阵和array数组之间的转换
2019/11/29 Python
Python根据URL地址下载文件并保存至对应目录的实现
2020/11/15 Python
定义css设备类型-Media Queries图表简介及使用方法
2013/01/21 HTML / CSS
Rhone官方网站:男士运动服装、健身服装和高级运动服
2019/05/01 全球购物
如何提高SQL Server的安全性
2016/07/25 面试题
餐饮加盟计划书
2014/01/10 职场文书
2014社区健康教育工作总结
2014/12/16 职场文书
驳回起诉裁定书
2015/05/19 职场文书
党员证明模板
2015/06/19 职场文书
2015年学校少先队工作总结
2015/07/20 职场文书
PHP基本语法
2021/03/31 PHP
如何使用pdb进行Python调试
2021/06/30 Python