将HTML文档做为元素树进行遍历
# 做为元素树的文档
## 1. Element对象树
* 通常我们只关心HTML文档中的元素,而不是文本
* 将文档看成对象树,忽略`Text`文本节点和`Comment`注释节点很有必要
--------------------------------------------------------
## 2. children 属性
* 该属性在`Element`对象上调用, 返回该对象下面的所有子元素对象
* 返回值类型是: `HTEMCollection`
* 类似于节点对象的`ChildNodes`属性,但过滤掉了文本/注释节点
* 文本类节点是没有子元素的,没有`children`属性
## 3. parentElement
* `parentElement`: 返回当前节点的父元素
* 可以在文本节点上调用
* 返回的父元素类型必须是: `Element` 或 `Document` 或`DocumentFragment`
--------------------------------------------------------
## 4. firstElementChild / lastElementChild
* `firstElementChild`: 返回元素对象的第一个子元素对象
* `lastElementChild` : 返回元素对象的最后一个子元素对象
--------------------------------------------------------
## 5. nextElementSibling / previousElementSibling
* `nextElementSibling`: 当前元素对象的下一个兄弟元素对象
* `previousElementSibling`: 当前元素对象的前一个兄弟元素对象
--------------------------------------------------------
## 6. 示例源码
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>做为元素树的文档</title>
</head>
<body>
<ul>
<li>list1</li>
<li>list2</li>
<li>list3</li>
<li>list4</li>
</ul>
<script>
var ul = document.getElementsByTagName('ul')[0];
// 1.childElementCount: 查看子元素数量
console.log(ul.childElementCount);
// 2. children: 获取全部子元素: HTMLCollection
console.log(ul.children);
// 根据索引获取子元素集合中的某一个
console.log(ul.children[1]);
// 3. parentElement: 获取父元素
console.log(ul.children[1].parentElement);
// 4. firstElementChild: 获取第一个子元素
console.log(ul.firstElementChild);
// 5. lastElementChild: 获取最后一个子元素
console.log(ul.lastElementChild);
// 获取第3个<li>
var thirdChild = ul.children.item(2);
console.log(thirdChild);
// 6. nextElementSibling: 下一个兄弟元素
console.log(thirdChild.nextElementSibling);
// 7. previousElementSibling: 前一个兄弟元素
console.log(thirdChild.previousElementSibling);
</script>
</body>
</html>
```
