(86)Wangdao.com第十九天_JavaScript 接口之 ParentNode 和 ChildNode
ParentNode 接口,ChildNode 接口
节点对象除了继承 Node 接口以外,还会继承其他接口。
ParentNode 接口
表示当前节点是一个父节点,提供一些处理子节点的方法。
ChildNode 接口
表示当前节点是一个子节点,提供一些相关方法。
- ParentNode 接口
- 如果当前节点是父节点,就会继承ParentNode接口。
- 由于只有元素节点(element)、文档节点(document)和文档片段节点(documentFragment)拥有子节点
- 因此只有这三类节点会继承 ParentNode 接口。
- 如果当前节点是父节点,就会继承ParentNode接口。
- ParentNode.children 属性
- 成员是当前节点的所有元素子节点,返回一个HTMLCollection实例。
- 该属性只读。
- 只包括元素节点。
- 如果没有元素类型的子节点,返回值 HTMLCollection 实例的 length 属性为 0 。
- 下面是遍历某个节点的所有元素子节点的示例。
for (var i = 0; i < el.children.length; i++) {
// ...
}
- 下面是遍历某个节点的所有元素子节点的示例。
- HTMLCollection 是动态集合,会实时反映 DOM 的任何变化
- ParentNode.children 属性
- ParentNode.firstElementChild 属性
- 返回当前节点的第一个元素子节点。如果没有任何元素子节点,则返回 null
document.firstElementChild.nodeName // "HTML" document 节点的第一个元素子节点是<HTML>
- ParentNode.firstElementChild 属性
- ParentNode.lastElementChild 属性
- 返回当前节点的最后一个元素子节点,如果不存在任何元素子节点,则返回 null
- ParentNode.lastElementChild 属性
- ParentNode.childElementCount 属性
- 表示当前节点的所有元素子节点的数目,返回一个整数。
- 如果不包含任何元素子节点,则返回 0
- ParentNode.childElementCount 属性
- ParentNode.append() ParentNode.prepend()
- append() 为当前节点追加一个或多个子节点,位置是最后一个元素子节点的后面
- prepend() 为当前节点追加一个或多个子节点,位置是第一个元素子节点的前面
- 不仅可以添加元素子节点,还可以添加文本子节点
- 没有返回值
var parent = document.body; var p = document.createElement('p');
p.innerHTML = "这是p"
parent.append(p); // 添加 元素子节点 parent.append('Hello'); // 添加 文本子节点 var p1 = document.createElement('p');
var p2 = document.createElement('p');
p1.innerHTML = "这是p1"
p2.innerHTML = "这是p2"
// 添加多个元素子节点
parent.append(p1, p2); var p3 = document.createElement('p');
p3.innerHTML = "这是p3"
// 添加元素子节点和文本子节点
parent.append('Hello', p3);对应的会生成的 HTML 代码为
- ParentNode.append() ParentNode.prepend()
- ChildNode 接口
- 只要这个节点有父节点,那么该节点就继承了 ChildNode 接口
- ChildNode.remove() 方法
- 从父节点移除当前节点
ele.remove(); // 在 DOM 里移除 ele 节点
- 从父节点移除当前节点
- ChildNode.remove() 方法
- 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.before() ChildNode.after()
- ChildNode.replaceWith()
- 使用参数节点,替换当前节点。参数可以是元素节点,也可以是文本节点。
var span = document.createElement('span');
el.replaceWith(span);
(86)Wangdao.com第十九天_JavaScript 接口之 ParentNode 和 ChildNode的更多相关文章
- (96)Wangdao.com_第二十九天_表单事件
表单事件 input 事件 select 事件 change 事件 invalid 事件 reset 事件 submit 事件 ...
- (59)Wangdao.com第十天_JavaScript 对象在 栈和堆
对象的属性值 如果要使用特殊的属性名,需 对象["属性名"] = 属性值 // 存 对象["属性名"] // 取 obj["1 ...
- (80)Wangdao.com第十六天_JavaScript Object 对象的相关方法
Object 对象的相关方法 Object.getPrototypeOf() 返回参数对象的原型. 这是获取某对象的原型对象的标准方法. var F = function () {}; var f = ...
- (62)Wangdao.com第十天_JavaScript 变量的作用域
在 js 中有两种作用域:全局作用域,局部作用域. 全局作用域 直接写在 <script> 标签中的变量和方法. 在网页打开时创建,在网页关闭时销毁. 全局作用域有一个全局对象 windo ...
- (60)Wangdao.com第十天_JavaScript 函数_作用域_闭包_IIFE_回调函数_eval
函数 实现特定功能的 n 条语句封装体. 1. 创建一个函数对象 var myFunc = new Function(); // typeof myFunc 将会打印 function ...
- (61)Wangdao.com第十天_JavaScript 立即执行函数
1. 立即执行函数 创建完了就执行,只执行完就不再执行了. ( function(){} )(); 例 ( function(a,b){ alert("Hello ,我是一个匿名函数!&qu ...
- (64)Wangdao.com第十天_JavaScript 对象的 toString() 方法改变输出
JavaScript 对象的 toString() 方法改变输出 在平常,我们 console.log(对象); // 会打印 [Object Object] 但是我们想要更详细的输出,此时,我 ...
- (65)Wangdao.com第十天_JavaScript 垃圾回收机制 GC
垃圾积累过多,致使程序运行缓慢,什么是垃圾? 当堆中某个内容,再也没有指针指向它,我们将再也用不了它,此时就是一个垃圾. 出现这种情况是因为 obj = null; 此时,js 中的垃圾回收机制会自动 ...
- (81)Wangdao.com第十六天_JavaScript 严格模式
严格模式 除了正常的运行模式,JavaScript 还有第二种运行模式:严格模式(strict mode).顾名思义,这种模式采用更加严格的 JavaScript 语法 同样的代码,在正常模式和严格模 ...
随机推荐
- MapReduce 概述
定义 Hadoop MapReduce 是一个分布式运算程序的编程框架,用于轻松编写分布式应用程序,以可靠,容错的方式在大型集群(数千个节点)上并行处理大量数据(TB级别),是用户开发 “基于 Had ...
- 【转】Reflector、reflexil、De4Dot、IL相关操作指令合集
PS:CTRL+F 输入你需要的内容,可以快速查找页面上的内容. 名称 说明 Add 将两个值相加并将结果推送到计算堆栈上. Add.Ovf 将两个整数相加,执行溢出检查,并且将结果推送到计算堆栈上. ...
- axd文件
ashx与axd作用相同,ashx一般在本项目内,axd在其它dll中.axd扩展名的必须要在web.config中的<httpHandlers>中进行注册,而ashx直接在项目中当成as ...
- MD1——2 Corner
基本句型 被分为 5 种全然因为[动词] 造成的. 那么补语 就是因为 动词被解释成“是”的时候所需要的一种补足. [补语 Complement 传统的毒瘤说法] 不完全不及物动词 不完全及物动词~~ ...
- sublime 浏览器快捷键设置
之前每次忘掉在哪打开,这次认真记一下 菜单栏Preferences-->Package Settings-->Side Bar-->Key Binding-Users [ // ch ...
- shell 批量获取ip 和主机名
[DNyunwei@YZSJHL24-209 li]$ cat jia.sh #!/bin/bash ip=`cat jia.ip` for i in $ip;do HostName=`ssh -t ...
- LOJ #2116 Luogu P3241「HNOI2015」开店
好久没写数据结构了 来补一发 果然写的时候思路极其混乱.... LOJ #2116 Luogu P3241 题意 $ Q$次询问,求树上点的颜色在$ [L,R]$中的所有点到询问点的距离 强制在线 询 ...
- curl 模拟 GET\POST 请求,以及 curl post 上传文件
curl GET 请求 curl命令 + 请求接口的地址. curl localhost:9999/api/daizhige/article 如上,我们就可以请求到我们的数据了,如果想看到详细的请求信 ...
- Linux Django项目部署
步骤 .数据库的处理 1.1 上传bbs.sql 1.2 在mysql中创建bbs库,并导入数据库SQL脚本 mysql> create database bbs charset utf8mb4 ...
- WPF 10天修炼 第一天- 入门
简介 WPF技术基于DirectX,完美的整合了矢量图形.2D或3D绘图技术.文件及多媒体技术.WPF将开发人员和设计人员的职责清楚的分离,提供了一种声明编程语言XAML.同时Expression B ...