<span>我是span</span>
<ul>
<li>我是li</li>
<li>我是li</li>
<li>我是li</li>
<li>我是li</li>
<li>我是li</li>
</ul>
<div class="box">
<span class="erweima">
</span></div>
<script> -->
// 节点之间的关系：父子兄
// 1.父节点
// 父节点：通过子元素可获取父节点,避免了重复获取父元素的操作。然后进行一系列父元素的操作 语法:子元素.parentNode
// let erweima = document.querySelector('.erweima')
// 通过子元素可获取到父元素,然后对父元素进行相关的操作
// erweima.parentNode
// 2.子节点
// 子节点：通过父元素可获得子节点，然后进行相关的操作
// 获取子节点的两种两种方法,两种获取方式得到的都是伪数组，需要遍历才能进行相关操作
// 方法一 父元素.childNodes ,获取到的是包含了元素、文本、换行等子节点(了解)
// let ul = document.querySelector('ul')
// ul.childNodes
// 方法二 父元素.children ,获取到的只是元素节点(开发常用)
// ul.children
//通过父元素获取子元素的最后一个节点和第一个节点,获取不到结果返回值都是null
// 方法一 父元素.firstChild 和 父元素.lastChild 此操作获取的是父元素的第一个子节点 包括 文本、换行、元素等(了解)
// ul.firstChild ul.lastChild
// 方法二 父元素.firstElementChild 和 lastElementChild 此操作获得的是父元素的第一个和最后一个元素子节点
// ul.firstElementChild ul.lastElementChild
// 方法三 父元素.children[0]和父元素.children[父元素.children.length-1] 实际开发的写法
// ul.children[0] ul.children[ul.children.length-1]
// 3.兄弟节点
// 兄弟节点 取不到值返回值都是null
// let div = document.querySelector('.div')
// 兄弟节点.nextSibling 与兄弟节点.previousSibling 获取到的是上下一个兄弟节点 包含文本、属性、换行等(了解)
// div.nextSibling 与div.previousSibling
// 兄弟节点.nextElementSibling 与兄弟节点.previousElementSibling 获取的才是真正的上下一个元素节点(重点掌握)
// div.nextElementSibling 与 div.previousElementSibling
