ParentNode 接口，ChildNode 接口

节点对象除了继承 Node 接口以外，还会继承其他接口。

ParentNode 接口

表示当前节点是一个父节点，提供一些处理子节点的方法。

ChildNode 接口

表示当前节点是一个子节点，提供一些相关方法。

  • ParentNode 接口

    • 如果当前节点是父节点，就会继承ParentNode接口。

      • 由于只有元素节点（element）、文档节点（document）和文档片段节点（documentFragment）拥有子节点
      • 因此只有这三类节点会继承 ParentNode 接口。
    • ParentNode.children 属性

      • 成员是当前节点的所有元素子节点，返回一个HTMLCollection实例。
      • 该属性只读。
      • 只包括元素节点。
      • 如果没有元素类型的子节点，返回值 HTMLCollection 实例的 length 属性为 0 。
        • 下面是遍历某个节点的所有元素子节点的示例。

          for (var i = 0; i < el.children.length; i++) {
          
    // ...
          
}
      • HTMLCollection 是动态集合，会实时反映 DOM 的任何变化
    • ParentNode.firstElementChild 属性

      • 返回当前节点的第一个元素子节点。如果没有任何元素子节点，则返回 null
      • document.firstElementChild.nodeName    // "HTML"    document 节点的第一个元素子节点是<HTML>
    • ParentNode.lastElementChild 属性

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

      • 表示当前节点的所有元素子节点的数目，返回一个整数。
      • 如果不包含任何元素子节点，则返回 0
    • 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 代码为

  • ChildNode 接口
    • 只要这个节点有父节点，那么该节点就继承了 ChildNode 接口
    • ChildNode.remove() 方法

      • 从父节点移除当前节点

        ele.remove();    // 在 DOM 里移除 ele 节点 
    • 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() 方法用于在当前节点前面，插入一个或者多个同级节点。与当前节点拥有同一父元素。
  • ChildNode.replaceWith()

    • 使用参数节点，替换当前节点。参数可以是元素节点，也可以是文本节点。
    • var span = document.createElement('span');
      
el.replaceWith(span); 

(86)Wangdao.com第十九天_JavaScript 接口之 ParentNode 和 ChildNode的更多相关文章

  1. (96)Wangdao.com_第二十九天_表单事件

    表单事件 input 事件        select 事件        change 事件        invalid 事件        reset 事件         submit 事件 ...

  2. (59)Wangdao.com第十天_JavaScript 对象在 栈和堆

    对象的属性值 如果要使用特殊的属性名,需 对象["属性名"] = 属性值       // 存 对象["属性名"]       // 取 obj["1 ...

  3. (80)Wangdao.com第十六天_JavaScript Object 对象的相关方法

    Object 对象的相关方法 Object.getPrototypeOf() 返回参数对象的原型. 这是获取某对象的原型对象的标准方法. var F = function () {}; var f = ...

  4. (62)Wangdao.com第十天_JavaScript 变量的作用域

    在 js 中有两种作用域:全局作用域,局部作用域. 全局作用域 直接写在 <script> 标签中的变量和方法. 在网页打开时创建,在网页关闭时销毁. 全局作用域有一个全局对象 windo ...

  5. (60)Wangdao.com第十天_JavaScript 函数_作用域_闭包_IIFE_回调函数_eval

    函数        实现特定功能的 n 条语句封装体. 1. 创建一个函数对象 var myFunc = new Function(); // typeof myFunc 将会打印 function ...

  6. (61)Wangdao.com第十天_JavaScript 立即执行函数

    1. 立即执行函数 创建完了就执行,只执行完就不再执行了. ( function(){} )(); 例 ( function(a,b){ alert("Hello ,我是一个匿名函数!&qu ...

  7. (64)Wangdao.com第十天_JavaScript 对象的 toString() 方法改变输出

    JavaScript 对象的 toString() 方法改变输出 在平常,我们 console.log(对象);    // 会打印 [Object Object] 但是我们想要更详细的输出,此时,我 ...

  8. (65)Wangdao.com第十天_JavaScript 垃圾回收机制 GC

    垃圾积累过多,致使程序运行缓慢,什么是垃圾? 当堆中某个内容,再也没有指针指向它,我们将再也用不了它,此时就是一个垃圾. 出现这种情况是因为 obj = null; 此时,js 中的垃圾回收机制会自动 ...

  9. (81)Wangdao.com第十六天_JavaScript 严格模式

    严格模式 除了正常的运行模式,JavaScript 还有第二种运行模式:严格模式(strict mode).顾名思义,这种模式采用更加严格的 JavaScript 语法 同样的代码,在正常模式和严格模 ...

随机推荐

  1. Fiddler--Filters

    本篇主要介绍Fiddler中Filters(过滤器)选项功能. 先看看Filters的界面: 一.模块一 当勾选“Use Filters”,Filters才开始工作:否则Filters中的设置内容将无 ...

  2. 基于Rabbit实现的RPC

    最近在学习项目中的通用技术,其中一个是在项目中会经常使用的基于RabbitMQ实现的RPC.这里一共有三个点要学习,分别是:RPC是什么?RabbitMQ是什么?如何使用RabbitMQ实现RPC.奔 ...

  3. Javaweb学习笔记——（二十八）——————Servlet3.0、动态代理、类加载器

    web最后一天:完了. Servlet3.0          一.要求         1.MyEclipse10.0或以上版本         2.发布到Tomcat7.0或以上版本 二.步骤   ...

  4. hibernate之Configuration对象

    任务:读取主配置信息 1.  Configuration config = new Configuration();      使用hibernate,但并没有读取 2.  config.config ...

  5. iTOP-开发板-MiniLinux-C程序调用shell命令

    本文档介绍的是在 linux 系统环境下 linux-C 调用 shell 命令实验步骤,和文档压缩包一起的“iTOP-开发板-MiniLinux-SHELL_V1.0.zip”是 c 程序源码.Li ...

  6. html 超链接标签 锚点 a标签伪类

    一个简易的连接 <a href="01.html">01</a> <body> <a href="01.html" t ...

  7. codeblocks更改颜色主题

    链接:http://www.cnblogs.com/wenbosheng/p/5899483.html

  8. PCA，到底在做什么

    很久以前写过一篇 PCA 的小白教程,不过由于当时对 PCA 的理解流于表面,所以只是介绍了一下 PCA 的算法流程.今天在数图课上偶然听到 PCA 在图像压缩上的应用,突然明白了一点实质性的东西,这 ...

  9. 错误：　H.264 bitstream malformed, no startcode found,

    使用命令 ffmpeg -i hbg.flv -c copy hbg.ts 时遇到如下错误: ffmpeg version 2.8.15-0ubuntu0.16.04.1 Copyright (c) ...

  10. Windows下ToroiseSVN基本使用&&在Visual studio中使用SVN

    首先在 https://tortoisesvn.net/downloads.html 下载svn客户端 下载并安装好之后再开始菜单会出现如下图标: 现在可以开始使用TortoiseSVN了,选择一个本 ...