【JavaScript】Parent, Children, Silbing

選取母元素

#parentBox
 .child A Box
 .child B Box

#parentBox
 width: 500px
 height: 500px
 background-color: #eee
 text-align: center
 line-height: 500px

 
.child
 width: 100px
 height: 100px
 display: inline-block
 line-height: 100px
 background-color: #beddcd

const childs=document.querySelectorAll(".child");
childs[0].parentNode; //會選到parentBox

選取子元素

※HTML, CSS 沿用上例

children Method 是 NodeList 形式（即便只有一個子元素），所以要向使用 querySelectorAll 的時候一樣，指定 index

parentBox.children[0]; //會選到A Box

選取相鄰元素

※HTML, CSS 沿用上例

Native JavaScript 沒有辦法直接指定相鄰元素（jQuery 的話可以使用sibling()），所以只能先回到母元素→再指定子元素

const childs=document.querySelectorAll(".child");

childs[0].parentNode.children[1]; //會選到B Box