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. H5取经之路——CSS基础语法

    一.CSS常用选择器 [选择器的命名规则] * 1.只能有字母数字下划线组成,不能有其他任何字符 * 2.开头不能是数字 [通用选择器] * 1.写法:*{} * 2.选中页面中的所有标签 * 3.优 ...

  2. LOJ #556. 「Antileaf's Round」咱们去烧菜吧

    好久没更博了 咕咕咕 现在多项式板子的常数巨大...周末好好卡波常吧.... LOJ #556 题意 给定$ m$种物品的出现次数$ B_i$以及大小$ A_i$ 求装满大小为$[1..n]$的背包的 ...

  3. 弄懂promise

    ECMAscript 6 原生提供了 Promise 对象. Promise 对象代表了未来将要发生的事件,用来传递异步操作的消息 有了 Promise 对象,就可以将异步操作以同步操作的流程表达出来 ...

  4. Angular7_获取异步方法里面的数据

    1.回调函数 getName() { return '张三'; } getAsyncName() { setTimeout(() => { return 'async_张三'; }, ); } ...

  5. 激活函数——tanh函数（理解）

    0 - 定义 $tanh$是双曲函数中的一个,$tanh()$为双曲正切.在数学中,双曲正切“$tanh$”是由基本双曲函数双曲正弦和双曲余弦推导而来. $$tanhx=\frac{sinhx}{co ...

  6. Django模型层-单表操作

    ORM介绍 MVC或者MVC框架中包括一个重要的部分,就是ORM,它实现了数据模型与数据库的解耦,即数据模型的设计不需要依赖于特定的数据库,通过简单的配置就可以轻松更换数据库,这极大的减轻了开发人员的 ...

  7. Linux Django项目测试

    步骤 django项目: 依赖包 [root@web01 ~]# yum install openssl-devel bzip2-devel expat-devel gdbm-devel readli ...

  8. php-beast 代码加密

    https://github.com/liexusong/php-beast 修改php.ini配置 extension_dir = "/usr/lib/php/20151012/" ...

  9. 使用Java API操作HDFS文件系统

    使用Junit封装HFDS import org.apache.hadoop.conf.Configuration; import org.apache.hadoop.fs.*; import org ...

  10. IDEA上创建 Maven SpringBoot + zookeeper +dubbo 实例

    概述 首先声明,本文是学习总结类型的博客内容,如有雷同纯属学习.本位主要结合zookeeper和dubbo做个简单实例.目前来说,一般网站架构随着业务的发展,逻辑越来越复杂,数据量越来越大,交互越来越 ...