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. MySQL学习笔记（五）并发时经典常见的死锁原因及解决方法

    MySQL都有什么锁? MySQL有三种锁的级别:页级.表级.行级. 表级锁:开销小,加锁快:不会出现死锁:锁定粒度大,发生锁冲突的概率最高,并发度最低. 行级锁:开销大,加锁慢:会出现死锁:锁定粒度 ...

  2. cookie小栗子-实现简单的身份验证

    关于Cookie Cookie是一种能够让网站Web服务器把少量数据储存到客户端的硬盘或内存里,或是从客户端的硬盘里读取数据的一种技术. 用来保存客户浏览器请求服务器页面的请求信息,可以在HTTP返回 ...

  3. unix域字节流回射程序

    一.服务端程序 #include <stdio.h> #include <errno.h> #include <stdlib.h> #include <uni ...

  4. Trie树的二三事QWQ

    写在前面 Trie,又称字典树,是一种用于实现字符串快速检索的多叉树结构.Trie的每个结点都拥有若干字符指针,若在插入或检索字符串时扫描到一个字符c,就沿着当前节点的c这个字符指针,走向该指针指向的 ...

  5. token的设置与获取

    以用户登录为例: application-resources.yml: #用户session在redis中保存的key REDIS_STU_SESSION_KEY: REDIS_USER_SESSIO ...

  6. spring事务源码分析结合mybatis源码(三)

    下面将结合mybatis源码来分析下,这种持久化框架是如何对connection使用,来达到spring事务的控制. 想要在把mybatis跟spring整合都需要这样一个jar包:mybatis-s ...

  7. Bootstrap3 模态框 select2搜索框无法输入

    <div class="modal fade" role="dialog" aria-hidden="true" data-backd ...

  8. vue 动态变量值不变化

    caseData = { lists:[] }; vm = new Vue({ el: '.hs-mt', data: caseData }); function getlist(pid,id){ $ ...

  9. RDay1-Problem 1 A

    题目描述 给定一个长度为n的正整数序列a[i],计算出有多少个i<j的数对,a[i]+a[j]为二的次幂,也就是说存在一个正整数x满足a[i]+a[j]==2^x. 输入 输入文件A.in. 第 ...

  10. 爬虫请求库之selenium模块

    一 安装 #安装:selenium+chromedriver pip3 install selenium 下载chromdriver.exe放到python安装路径的scripts目录中即可,注意最新 ...