1.节点操作
1.1 删除节点
- node.removeChild() 方法从node节点中删除一个子节点,放回删除的节点.
ul.removeChild(ul.children[0]);
1.1.2 案例：删除留言
// 删除的是 li 当前a所在的li this.parentNode;
ul.removeChild(this.parentNode);
1.2 复制节点(克隆节点)
- 1.node.cloneNode()方法返回调用该方法的节点的一个副本.也称为克隆节点/拷贝节点
注意:1.如果括号参数为空或者为false,则是浅拷贝
2.如果括号参数为true,则是深度拷贝,会复制节点本身以及里面所有的子节点.
node.cloneNode();
二维数组
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// var arr = [1,2,3];
var arr = [ [1, 2, 3],
[4, 5, 6],
[7, 8, 9]
]
for (var i = 0; i < arr.length; i++) {
for (var j = 0; j < arr[i].length; j++) {
console.log(arr[i][j]);
}
}
</script>
</body>
</html>
1.3 创建元素的三种方式
1.31三种创建元素方式区别
- 1.
document.write()创建元素,如果页面文档流加载完毕,再调用这句话会导致页面重绘 - 2.innerHTML创建元素
- 3.
document.createElement()创键元素
1.4 innerHTML和createElement效率对比
innerHTML字符串拼接方式(效率低)
innerHTML数组方式(效率高)
createElement方式(效率一般)
1.5 DOM的和核心总结
关于DOM操作,我们主要针对元素的操作.主要有创建,增,删,改,查,属性操作,事件操作.
