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. Servlet中转发和重定向的路径问题【转】

    转发和重定向的路径问题 Servlet中有两种方式获得转发对象(RequestDispatcher):一种是通过HttpServletRequest的getRequestDispatcher()方法获 ...

  2. 第十二节：Lambda、linq、SQL的相爱相杀(1)

    一. 谈情怀  Lambda.Linq.SQL伴随着我的开发一年又一年,但它们三者并没有此消彼长,各自占有这一定的比重,起着不可替代的作用. 相信我们最先接触的应该就是SQL了,凡是科班出身的人,大学 ...

  3. Newton's Dark Secrets《牛顿探索》

    1643年1月4日,在英格兰林肯郡小镇沃尔索浦的一个自耕农家庭里,牛顿诞生了.牛顿是一个早产儿,出生时只有三磅重,接生婆和他的亲人都担心他能否活下来.谁也没有料到这个看起来微不足道的小东西会成为了一位 ...

  4. FTP主动及被动模式效果图

  5. 转-filebeat 源码分析

    背景 在基于elk的日志系统中,filebeat几乎是其中必不可少的一个组件,例外是使用性能较差的logstash file input插件或自己造个功能类似的轮子:). 在使用和了解filebeat ...

  6. 【原创】大叔问题定位分享（3）Kafka集群broker进程逐个报错退出

    kafka0.8.1 一 问题现象 生产环境kafka服务器134.135.136分别在10月11号.10月13号挂掉: 134日志 [2014-10-13 16:45:41,902] FATAL [ ...

  7. Django 序列化-token

    幂等性 幂等性:多次操作的结果和一次操作的结果是一样的 ,put请求是幂等的 post请求不是幂等的 序列化组件 全局和局部钩子函数 异常信息抛出过程 认证 路由里的,login.as_view() ...

  8. Python--可迭代对象,迭代器,生成器

    记得在刚开始学Python的时候,看到可迭代对象(iterable).迭代器(iterator)和生成器(generator)这三个名词时,完全懵逼了,根本就不知道是啥意识.现在以自己的理解来详解下这 ...

  9. robot framework 上个用例的输出作为下个用例的输入 （Set Global Variable的用法）

    变量的作用域 通常情况下,每个变量默认都是局部变量. 一个case里的变量,作用域在这个case内部: 一个userkeyword里的变量,作用域在这个userkeyword内部: 一个文件型suit ...

  10. Vertx eventbus模块解析

    eventbus 事件總線 協議棧 TCP分包,粘包解決採用方案: 消息定长(定義消息体總长度),消息分为消息头和消息体 dataType bytes description int 4 包体总大小 ...