JavaScript-DOM-获取节点父、兄、子节点or元素
首先先来解释一下节点与元素的区别，不然真的会看的很懵啊！
什么是节点？
DOM规定：整个文档是一个文档节点，每个标签就是一个元素节点，也就是我们这里所说的元素，元素包含的文本是文本节点，元素的属性是属性节点，注释属于注释节点，等等这些都称之为节点。
那什么是元素？
元素就是节点中的元素节点，也就是文档中的标签。
上一篇文章中介绍了
document对象访问元素的三种方法
。那当我们获取到相应的元素对象后又想获得其父、兄、子节点or元素的信息该当如何获取？那接下来就分别来介绍一下都有哪些方法及属性可以帮我们获取想要的信息。
获取子节点
| 方法/属性 | 描述 |
|---|---|
| getElementsByTagName() | 返回当前节点的指定标签名后代节点 |
| childNodes | 返回当前节点的所有子节点（是一个nodeList类数组对象，使用Array.prototype.slice()方法可以转换为数组，就可以调用数组的相关方法） |
| firstChild | 返回当前节点的首个子节点 |
| lastChild | 返回当前节点的最后一个子节点 |
获取父兄节点
| 属性 | 描述 |
|---|---|
| parentNode | 返回当前节点的父节点 |
| previousSibling | 返回当前节点的前一兄弟节点 |
| nextSibling | 返回当前节点的后一兄弟节点 |
获取子元素
| 属性 | 描述 |
|---|---|
| childElementCount | 返回当前元素的子元素个数 |
| children | 返回当前元素的所有子元素 |
| firstElementChild | 返回第一个子元素 |
| lastElementChild | 返回最后一个子元素 |
获取兄弟元素
| 属性 | 描述 |
|---|---|
| previousElementSibling | 返回当前元素的前一兄弟元素 |
| nextElementSibling | 返回当前元素的后一兄弟元素 |
亲自试一试
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>DOM-元素节点示例</title>
<script>
window.onload = function(){
let demo1=document.getElementById('demo1');
// nextSibling属性获取下一个相邻节点
let next = demo1.nextSibling;
// 这里demo1的下一相邻节点为换行，所以打印信息为undefined
console.log(next.innerText);
// nextSibling属性获取下一个相邻元素
let nextElement = demo1.nextElementSibling;
// 这里demo1的下一相邻节点为换行，所以打印信息为“欲穷千里目”
console.log(nextElement.innerText);
}
</script>
</head>
<body>
<ul>
<li>白日依山尽</li>
<li id="demo1">黄河入海流</li>
<li>欲穷千里目</li>
<li>更上一层楼</li>
</ul>
</body>
</html>