zoukankan      html  css  js  c++  java
  • 3_2:操作节点 [ 增 删 复制 ]

    知识梳理

    // . 创建节点
    // . 插入节点
    // . 删除节点
    // . 复制节点
    // . 替换节点

    一 插入节点

    1)基本语法

    parentNode.insertBefore(newNode,referenceNode); //在指定元素前面插入元素
    // parentNode 父节点
    // newNode 要插入的节点
    // referenceNode 将要插在这个节点之前
    // 返回被插入节点(newNode)
    
    element.appendChild(aChild);//在元素末尾压入子元素
    //aChild 要追加给父节点(通常为一个元素)的节点

    2)代码范例

    <div>
        <p>你好</p>
    </div>
    <script>
        var div = document.getElementsByTagName('div');
        var newNode = document.createElement('span');
        newNode.innerHTML = '我是新插入的元素';
        var result = div[0].insertBefore(newNode,div[0].children[0]);
        console.log(result);//<span>我是新插入的元素</span>
    </script>

    二 删除子节点

    1)基本语法

    node.removeChild(child);
    // node  父节点
    // child  子节点
    // 返回删除的节点

    2)代码范例

    <div>
        <p>p元素</p>
        <span>span元素</span>
    </div>
    <script>
        var div = document.getElementsByTagName('div');
        var res = div[0].removeChild(div[0].children[0]);
        console.log(res);//<p>p元素</p>
    </script>

    三 复制节点

    1)基本语法

    var dupNode = node.cloneNode();//浅拷贝 只复制节点本身
    var dupNode = node.cloneNode(true);//深拷贝 复制节点本身和所以子节点
    //node 被克隆的对象
    //dupNode 克隆生成的节点副本

    2)代码范例

    <p><span>你好</span></p>
    <script>
        var p = document.getElementsByTagName('p');
        var dup = p[0].cloneNode();//浅拷贝
        var deepDup = p[0].cloneNode(true);//深拷贝
        console.log(dup);//<p></p>
        console.log(deepDup);//<p><span>你好</span></p>
    </script>

    四 替换节点

    1)基本语法

    parentNode.replaceChild(newChild, oldChild);
    //newChild 用来替换 oldChild 的新节点 如果该节点已经存在于 DOM 树中,则它首先会被从原始位置删除
    //oldChild 被替换掉的原始节点。
    //返回被替换的节点

    2)代码范例

    <div>
        <p>你好</p>
    </div>
    <script>
        var div = document.getElementsByTagName('div');
        var newChild = document.createElement('span');
        newChild.innerHTML = '我也好';
        var result = div[0].replaceChild(newChild,div[0].children[0]);
        console.log(result);//<p>你好</p> 返回被替换的节点
    </script>

     

  • 相关阅读:
    [记录点滴] 一个解决Lua 随机数生成问题的办法
    [源码解析] 从TimeoutException看Flink的心跳机制
    [记录点滴] OpenResty中Redis操作总结
    [记录点滴] 小心 Hadoop Speculative 调度策略
    [源码解析] GroupReduce,GroupCombine 和 Flink SQL group by
    第28 章 : 理解容器运行时接口 CRI
    第27 章 : Kubernetes 安全之访问控制
    第26 章 : 理解 CNI 和 CNI 插件
    第25 章 : Kubernetes 网络模型进阶
    第24 章 : Kubernetes API 编程利器:Operator 和 Operator Framework
  • 原文地址:https://www.cnblogs.com/fuyunlin/p/14434597.html
Copyright © 2011-2022 走看看