代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="father">
<h1>标题</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>
</div>
<script>
//操作DOM对象
/*
* 核心
* 浏览器网页就是一个DOM树形结构!
* 1、更新:更新DOM节点
* 2、遍历DOM节点:得到DOM节点
* 3、删除:删除一个DOM节点
* 4、添加:添加一个新的节点
* 要操作一个DOM节点,就必须先要获得这个DOM节点
* */
//对应css选择器
var h1 = document.getElementsByTagName("h1");
var p1 = document.getElementById("p1");
var p2 = document.getElementsByClassName("p2")
var father = document.getElementById("father");
var childrens = father.children;//获取父节点下的所有子节点
//father.firstChild
//father.lastChild
//以上都是原生代码,之后尽量使用JQuery
</script>
</body>
</html>