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>