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 相关文章推荐
javascript的事件描述
Sep 08 Javascript
js css后面所带参数含义介绍
Aug 18 Javascript
JavaScript程序员应该知道的45个实用技巧
Mar 04 Javascript
JS 使用for循环遍历子节点查找元素
Sep 06 Javascript
浅析Javascript中“==”与“===”的区别
Dec 23 Javascript
深入理解JavaScript系列(19):求值策略(Evaluation strategy)详解
Mar 05 Javascript
学习Bootstrap组件之下拉菜单
Jul 28 Javascript
向JavaScript的数组中添加元素的方法小结
Oct 24 Javascript
jQuery 插件实现随机自由弹跳气泡样式
Jan 12 Javascript
详解vue+vueRouter+webpack的简单实例
Jun 17 Javascript
Bootstrap图片轮播效果详解
Oct 17 Javascript
JS实现小球的弹性碰撞效果
Nov 11 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
Discuz!下Memcache缓存实现方法
2010/05/28 PHP
PHP中$_SERVER使用说明
2015/07/05 PHP
thinkPHP框架中执行原生SQL语句的方法
2017/10/25 PHP
PHP排序算法之希尔排序(Shell Sort)实例分析
2018/04/20 PHP
PHP _construct()函数讲解
2019/02/03 PHP
JavaScript实现x秒后自动跳转到一个页面
2013/01/03 Javascript
jquery $.trim()方法使用介绍
2014/05/21 Javascript
js的toLowerCase方法用法实例
2015/01/27 Javascript
javascript实现图片自动和可控的轮播切换特效
2015/04/13 Javascript
浅谈Javascript线程及定时机制
2015/07/02 Javascript
详解JavaScript逻辑And运算符
2015/12/04 Javascript
使用jQuery mobile库检测url绝对地址和相对地址的方法
2015/12/04 Javascript
文本框只能输入数字的实现方法(兼容IE火狐)
2016/06/25 Javascript
Angular 常用指令实例总结整理
2016/12/13 Javascript
有关JS中的0,null,undefined,[],{},'''''''',false之间的关系
2017/02/14 Javascript
nodeJS实现简单网页爬虫功能的实例(分享)
2017/06/08 NodeJs
详解如何实现一个简单的Node.js脚手架
2017/12/04 Javascript
解决Jquery下拉框数据动态获取的问题
2018/01/25 jQuery
浅谈webpack devtool里的7种SourceMap模式
2019/01/14 Javascript
微信小程序仿今日头条导航栏滚动解析
2019/08/20 Javascript
layui将table转化表单显示的方法(即table.render转为表单展示)
2019/09/24 Javascript
解决$store.getters调用不执行的问题
2019/11/08 Javascript
javascript实现京东登录显示隐藏密码
2020/08/02 Javascript
python的类方法和静态方法
2014/12/13 Python
python中实现php的var_dump函数功能
2015/01/21 Python
python初学之用户登录的实现过程(实例讲解)
2017/12/23 Python
python实现Zabbix-API监控
2018/09/17 Python
canvas简易绘图的实现(海绵宝宝篇)
2018/07/04 HTML / CSS
英国儿童图书网站:Scholastic
2017/03/26 全球购物
美国环保妈妈、儿童和婴儿用品购物网站:The Tot
2019/11/24 全球购物
《诚实与信任》教学反思
2014/04/10 职场文书
有子女的离婚协议书怎么写(范本)
2014/09/29 职场文书
保留意见审计报告
2015/06/05 职场文书
2016元旦文艺汇演主持词
2015/07/06 职场文书
用python实现监控视频人数统计
2021/05/21 Python
python中的class_static的@classmethod的巧妙用法
2021/06/22 Python