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>