(86)Wangdao.com第十九天_JavaScript 接口之 ParentNode 和 ChildNode

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 代码为

          • (86)Wangdao.com第十九天_JavaScript 接口之 ParentNode 和 ChildNode
  • 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); 
上一篇:(65)Wangdao.com第十天_JavaScript 垃圾回收机制 GC


下一篇:《深入理解Java虚拟机》-----第2章 Java内存区域与内存溢出异常