核心
浏览器网页就是一个Dom树形结构！
- 更新： 更新Dom节点
- 遍历dom节点：得到Dom节点
- 删除： 删除一个Dom节点
- 添加： 添加一个新的节点
要操作一个Dom节点，就必须要先获得这个Dom节点
获得dom节点
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="father"><h1>标题1</h1><h1>标题2</h1><p id="p1">p1</p><p class="p2">p2</p>
</div>
<script>// 对应css 选择器let h1 = document.getElementsByTagName('h1')let p1 = document.getElementById('p1')let p2 = document.getElementsByClassName('p2')let father = document.getElementById('father')console.log(h1)console.log(p1)console.log(p2)console.log(father)// 获取父节点下的所有子节点let childrens = father.childrenconsole.log(childrens)// 获取父节点的第一个子节点console.log(father.firstChild)console.log(father.firstElementChild)// 获取父节点的最后一个子节点console.log(father.lastChild)console.log(father.lastElementChild)
</script>
</body>
</html>
https://www.bilibili.com/video/BV1JJ41177di?p=20
