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 相关文章推荐
ECMAScript 基础知识
Jun 29 Javascript
关闭浏览器窗口弹出提示框并且可以控制其失效
Apr 15 Javascript
window.onload与$(document).ready()的区别分析
May 30 Javascript
自动完成的搜索框javascript实现
Feb 26 Javascript
JavaScript和jquery获取父级元素、子级元素、兄弟元素的方法
Jun 05 Javascript
javascript正则表达式之分组概念与用法实例
Jun 16 Javascript
JavaScript 轮播图和自定义滚动条配合鼠标滚轮分享代码贴
Oct 28 Javascript
基于jQuery制作小图标上下滑动特效
Jan 18 Javascript
微信小程序实现多个按钮的颜色状态转换
Feb 15 Javascript
Vue.js原理分析之nextTick实现详解
Sep 07 Javascript
vue组件中节流函数的失效的原因和解决方法
Dec 02 Vue.js
手把手教你从零开始react+antd搭建项目
Jun 03 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网站备份程序代码分享
2011/06/10 PHP
PHP实现微信商户支付企业付款到零钱功能
2018/09/30 PHP
jQuery 表格工具集
2010/04/25 Javascript
Javascript简单实现可拖动的div
2013/10/22 Javascript
JS如何判断移动端访问设备并解析对应CSS
2013/11/27 Javascript
清除div下面的所有标签的方法
2014/02/17 Javascript
js实现正方形颜色从下往上升的效果
2014/08/04 Javascript
根据当前时间在jsp页面上显示上午或下午
2014/08/18 Javascript
Javascript MVC框架Backbone.js详解
2014/09/18 Javascript
JavaScript数组Array对象增加和删除元素方法总结
2015/01/20 Javascript
JavaScript获取并更改input标签name属性的方法
2015/07/02 Javascript
JavaScript中的对象与JSON
2015/07/03 Javascript
深入分析jQuery的ready函数是如何工作的(工作原理)
2015/12/17 Javascript
JavaScript程序中的流程控制语句用法总结
2016/05/23 Javascript
基于JS实现的随机数字抽签实例
2016/12/08 Javascript
nodejs连接mysql数据库简单封装示例-mysql模块
2017/04/10 NodeJs
详解JS中的attribute属性
2017/04/25 Javascript
jQuery实现radio第一次点击选中第二次点击取消功能
2017/05/15 jQuery
详解vue渲染函数render的使用
2017/12/12 Javascript
Python中对列表排序实例
2015/01/04 Python
Python中取整的几种方法小结
2017/01/06 Python
Python构建XML树结构的方法示例
2017/06/30 Python
python爬取m3u8连接的视频
2018/02/28 Python
Python基于生成器迭代实现的八皇后问题示例
2018/05/23 Python
pytorch标签转onehot形式实例
2020/01/02 Python
python对象销毁实例(垃圾回收)
2020/01/16 Python
Win10下配置tensorflow-gpu的详细教程(无VS2015/2017)
2020/07/14 Python
CSS3的常见transformation图形变化用法小结
2016/05/13 HTML / CSS
HTML5 FileReader对象的具体使用方法
2020/05/22 HTML / CSS
道路建设实施方案
2014/03/18 职场文书
《山谷中的谜底》教学反思
2014/04/26 职场文书
政府法律服务方案
2014/06/14 职场文书
企业委托书范本
2014/09/13 职场文书
社区端午节活动总结
2015/02/11 职场文书
小学国庆节活动总结
2015/03/23 职场文书
浅谈Java实现分布式事务的三种方案
2021/06/11 Java/Android