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)