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>
