[javascript]자바스크립트 부모, 자식, 형제 노드 찾기

매번 뭐였지 찾게 되는 자바스크립트 부모, 자식, 형제 찾기.. 처음에는 제이쿼리로 굉장히 익숙한데 자바스크립트로는 어떻게 해야하는지 한참 찾았던 기억이 있어요. 그래서 한번 정리해두려고 합니다.  

 

01. 자바스크립트 자식 찾기 ( childNodes )

 

HTML

<div id="parent">
    <div id="child01"></div>
    <div id="child02"></div>
    <div id="child03"></div>    
</div>

JAVASCRIPT

var first = parent.childNodes;
// 모든 자식들 찾아 변수에 담기
var first = parent.firstChild;
// 첫번째 자식 찾아 변수에 담기
var last = parent.lastChild;
// 마지막 자깃 찾아 변수에 

모든 자식은 .childNodes

첫번째 자식은 .firstChild

마지막 자식은 .lastChild

 

02. 자바스크립트 부모 찾기 ( parentNode )

 

JAVASCRIPT

var child01 = document.getElementById("child01");
//자식(id='child01')하나를 변수에 담기
var parent = child01.parentNode;
// 자식의 부모를 변수에 
 

03. 자바스크립트 형제 찾기 ( Sibling )

JAVASCRIPT

var child02 = document.getElementById("child02");
//자식(id='child01')하나를 변수에 담기
var preSibling = child02.previousSibling;
// 변수에 담은 요소의 이전 형제를 찾아 변수에 담기
var nexSibling = child02.nextSibling;
// 변수에 담은 요소의 다음 형제를 찾아 변수에 담기
 

04. 부모의 이전형제를 찾을땐? 

HTML

<div id="box01">
    <div id="one"></div>
    <div id="two">
        <p id="me">here</p>
    </div>
    <div id="three"></div>    
</div>
 

JAVASCRIPT

var me = document.getElementById("me");
//나를 찾아 변수에 담기
var answer = me.parentNode.previousSibling;
//answer = one

부모의 부모의 경우도 .parentNode.parentNode 요렇게 연속되게 적어주면 된다.