177. 부모자식형제잡기

   <div id="parent">
        <div class="child" id="child00">자식0</div>
        <div class="child" id="child01">자식1</div>
        <div class="child" id="child02">자식2</div> 
    </div>

.child {
    width: 100px;
    height: 100px;
    background-color: pink;
    margin: 50px; 
 }

자식요소 개수 : parent.childElementCount

- 요소 - 
  우리 눈에 보이는 DOM 구조 그대로 인식하면 됨
  이전요소 : 나.previousElementSibling
  다음요소 : 나.nextElementSibling

  부모찾기 : 자식요소.parentElement
  첫번째자식 : 부모.fistElementChild
  마지막자식 : 부모.lastElementChild

  - 노드 - 
  빈칸들도 노드로 치키 때문에 사용할 때 애매함
  자식 노드들 다 잡기 : parent.childNodes;
  이전노드 : 요소잡기.previousSibling
  다음노드 : 요소잡기.nextSibling


let parent = document.getElementById('parent');
let child = document.getElementsByClassName('child');
해설 : 각 변수에 id 값과 className이 'parent', 'child' 인 요소 저장시키기.


parent.style.border = "1px solid";
parent.style.backgroundColor = "skyblue";
parent.style.boxShadow = " 0 0 5px 0 #000"
해설: 자바스크립트로 css 적용시키기.

for(let i =0; i<parnet.childElementCount; i++){
  chile[i].style.border="1px solid";
  chile[i].style.background="skyblue";
  chile[i].style.boxShadow="0 0 5px 0";
}
  
 해설 : i 가 부모의 자식 수보다 작을 떄까지 i값에 1을 더해라
 child[0] / child[1] / child[2] 에게 해당 css 적용됨

[자식 0 기준으로 자식 2 배경색 파란색으로 변경]

child[0].parentElement.lastElementChild.style.background="red";
child[0].next.ElementSibling.nestElementSibling.style.background = "blue";