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. C++回顾day02---<运算符重载>

    一:运算符重载的限制 (一)可以重载的运算符: + - * / % ^ & | ~ ! = < > += -= *= /= %= ^= &= |= << > ...

  2. LFYZ-OJ ID: 1016 输油管道问题

    分析 根据之前的证明,我们已经知道最佳输油管线的y位置就是所有油井y坐标序列的中位数,故解题过程为: 1. 读入n个y数据 2. 对n个y数据进行排序(升序或降序) 3. 求中位数zws 4. 计算输 ...

  3. html - 表单form

    一.表单 功能:表单用于向服务器传输数据,从而实现用户与Web服务器的交互 表单能够包含input系列标签,比如文本字段.复选框.单选框.提交按钮等等. 表单还可以包含textarea.select. ...

  4. 如何使用多数据源,同时使用jpa和jdbctemplate

    spring: datasource: first: type: com.alibaba.druid.pool.DruidDataSource url: jdbc:mysql://xx.xx.xx.x ...

  5. 【webpack】中file-loader和url-loader使用方法

    file-loader 可以指定要复制和放置资源文件的位置,以及如何使用版本哈希命名以获得更好的缓存.此外,这意味着 你可以就近管理图片文件,可以使用相对路径而不用担心部署时 URL 的问题.使用正确 ...

  6. unity 网页加载AB问题

    下载一次后会缓存,清理一下就能加载新的同名AB了 AssetBundle.onload

  7. 微信小程序语音与讯飞语音识别接口（Java），Kronopath/SILKCodec，ffmpeg处理silk，pcm，wav转换

    项目需求,需要使用讯飞的语音识别接口,将微信小程序上传的录音文件识别成文字返回 首先去讯飞开放平台中申请开通语音识别功能 在这里面下载sdk,然后解压,注意appid与sdk是关联的,appid在初始 ...

  8. VMware虚拟机下安装CentOS6.5

    点击创建虚拟机 选择典型—>下一步 选择安装iso映像文件—>点击浏览选择下载好的centos 镜像文件—>下一步 设置用户和密码—>下一步 设置虚拟机的名字和位置 指定磁盘大 ...

  9. SpringBoot之hello world!

    哈哈哈,还是在元旦这一天对你下手了.麻溜的给自己充电,在这个寒冬,不断听到裁员的消息或者新闻,可对于我这个外包和外派的人来说,好像并没有受到什么影响.可能是人手不够可能是项目很忙.对于明年的三月金四月 ...

  10. Postgresql/Greenplum中将数字转换为字符串TO_CHAR函数前面会多出一个空格

    -- 问题1..Postgresql中将数字转换为字符串前面多出一个空格. SELECT TO_CHAR(, '); -- 解决1.使用如下,参数二前面加上fm就可以去掉空格了,如下: SELECT ...