DOM 是以樹狀結構排列的，所以父子關系是相對的，當li為我們的目標節點的時候，ul為其父節點，其他li為它的兄弟節點，li里面包含的標簽為子節點，以此類推。
-
那我們如何找父節點？
-
元素.parentNode，直接得到DOM對象
<ul><li id="box"></li><li></li><li></li> </ul> let dom = document.getElementById('box') console.log(dom.parentNode)
-
-
如何找子節點？
-
父元素.childNodes，包含標簽、文本、注釋等
-
得到偽數組
<ul id="box"><li></li><li></li><li></li> </ul> let dom = document.getElementById('box') console.log(dom.childNodes) // NodeList(7) [text, li, text, li, text, li, text] text是換行文本
-
-
如何找子元素？
-
父元素.children，這個只會找到標簽
-
得到偽數組
<ul id="box"><li></li><li></li><li></li> </ul> let dom = document.getElementById('box') console.log(dom.children) // HTMLCollection(3) [li, li, li] 只會有元素，這個更常用
-
-
如何找兄弟元素（同級）？
-
找上一個兄弟節點，元素.previousSibling或元素.previousElementSibling
-
找下一個兄弟節點，元素.nextSibling 或元素.nextElementSibling
-
<ul><li>1</li><li id="box">2</li><li>3</li>
</ul>
let dom = document.getElementById('box')
console.log(dom.previousSibling)
console.log(dom.previousElementSibling)
console.log(dom.nextSibling)
console.log(dom.nextElementSibling)
)
