操作DOM对象(重点)
DOM:文档对象模型
浏览器网页就是一个Dom树形结构
更新:更新Dom节点
遍历Dom节点:得到DOM节点
删除:删除一个Dom节点
添加:添加一个新的节点
获得dom节点
要操作一个Dom节点,就必须要先获得这个Dom节点
//对应CSS的选择器
var h1 = document.getElementsByTagName('h1');
console.log(h1);
var p1 = document.getElementById('p1');
console.log(p1);
var p2 = document.getElementsByClassName("p2");
console.log(p2);
var father = document.getElementById("father");
//获取父节点下的所有子节点
var childrens = father.children;
father.firstChild
father.lastChild
father.child(0)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
更新节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id = "id1">
</div>
<script>
document.getElementById('id1');
id1.innerText = "abc";
</script>
</body>
</html>
+