DOM树结构关系
一 概念
```html
<div class="sup">
<div class="sub1"></div>
<div class="sub2"></div>
<div class="sub3"></div>
</div>
<script>
var sub2 = document.querySelector('.sub2');
// 父级标签
console.log(sub2.parentElement);
// 上一个标签
console.log(sub2.previousElementSibling);
// 下一个标签
console.log(sub2.nextElementSibling);
var sup = document.querySelector('.sup');
// 所有子标签
console.log(sup.children);
// 第一个子标签
console.log(sup.firstElementChild);
// 最后一个子标签
console.log(sup.lastElementChild);
</script>
```二 代码示范
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>DOM树结构关系</title>
</head>
<body>
<div class="sup">
<div class="sub1"></div>
<div class="sub2"></div>
<div class="sub3"></div>
</div>
</body>
<script type="text/javascript">
var body = document.querySelector('body');
console.log(body);
</script>
<script>
var sub2 = document.querySelector('.sub2');
// 父级标签
console.log("sub2父标签:", sub2.parentElement);
// 上一个标签
console.log("sub2上兄弟标签:", sub2.previousElementSibling);
// 下一个标签
console.log("sub2下兄弟标签:", sub2.nextElementSibling);
var sup = document.querySelector('.sup');
// 所有子标签
console.log("sup子标签们:", sup.children);
// 第一个子标签
console.log("sup第一个子标签:", sup.firstElementChild);
// 最后一个子标签
console.log("sup最后一个子标签:", sup.lastElementChild);
</script>
</html>
