DOM 获取父子节点

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)