zoukankan      html  css  js  c++  java
  • js教程系列32 :javascript-DOM节点操作

    1 DOM节点操作

    1.1 创建节点 createElement()

     var createDiv = document.createElement("div");

    1.2 插入子节点appendChild()

     appendChild() 方法向节点添加最后一个子节点

    -insertBefore(插入的节点,参照节点)

    -insertBefore() 方法 ,如果不是在末尾插入节点,而是想放在特定的位置上,用 这个方法. 该方法接受2个参数,第一个是要插入的节点,第二个是参照节点。如果 第二个参数 为null(不是不写),则默认插入到后面

     可以给某个id 的前面

    1.3 删除节点

    removeChild() 父节点.removeChild(子节点);

    不知道父级的情况下,可以这么写:node.parentNode.removeChild(node);

    1.4 复制节点

     cloneNode() var newNode = oldNode.cloneNode() ;

    用于复制节点, 接受一个布尔值参数, true 表示深复制(复制节点及其所有子节点), false 表示浅复制(复制节点本身,不复制子节点)

    1.5 设置节点属性

    获取:getAttribute(名称)

    设置:setAttribute(名称, 值)

    删除:removeAttribute(名称)

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    
    <div class="box1">
        <div class="box2" id="box2"></div>
        <div class="box3"></div>
    </div>
    
    //节点的操作
        //1.创建
        var aaa = document.createElement("li");
    var bbb = document.createElement("afadsfadsf");
        console.log(aaa);
        console.log(bbb);
    
    ` //2 添加
        var box1 = document.getElementsByClassName("box1")[0];
        box1.appendChild(aaa);
        box1.insertBefore(bbb,aaa);
    
    `//3 删除
        box1.removeChild(bbb);
        aaa.parentNode.removeChild(aaa);//自杀,自己删除自己
    //4 克隆
        var ccc = box1.cloneNode();
        var ddd = box1.cloneNode(true);
        console.log(ccc);
        console.log(ddd);
    
    </script>
    </body>
    </html>
  • 相关阅读:
    多种 网页文本编辑器 分析
    struts2 令牌 实现源代码 JSP
    ibatis 数据库时间 插入数据
    Eclipse/Myeclipse生成serialVersionUID方法
    SSM框架整合遇到的问题
    搭建Elasticsearch5.6.8 分布式集群
    使用SuperWebSocket 构建实时 Web 应用
    HAPROXY
    .NET面试题系列(二)GC
    MongoDB-3.4集群搭建:分片
  • 原文地址:https://www.cnblogs.com/autoXingJY/p/8952754.html
Copyright © 2011-2022 走看看