자바스크립트 부모, 자식, 형제 노드 찾는 방법

 

 

 

 

 

자바스크립트를 연습하다보면 생각보다 자주 사용되는 스크립트 중 하나인것 같다.

매번 찾았다가 이번에는 이해한것을 정리해서 올려놓으려고 한다.

 

 

 

 

 

01_ 자바스크립을 이용한 자식요소 찾기(childNodes)

---

HTML

<ul id="list-wrap">
    <li id="list-1">aaa</li>
    <li id="list-2">bbb</li>
    <li id="list-3">ccc</li>
  </ul>

JS

    let parent = document.querySelector('#list-wrap')
    // 변수에 parent 요소를 저장

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

    console.log(allChildren);
    console.log(first);
    console.log(last);

 

 

 

 

 

 

02_자바스크립트를 이용한 부모요소 찾기 (parentNode)

---

HTML

<ul id="list-wrap">
    <li id="list-1">aaa</li>
    <li id="list-2">bbb</li>
    <li id="list-3">ccc</li>
  </ul>

JS

    let childFirst = document.querySelector("#list-1"); 
    //자식요소를 선택해 변수에 저장
    let parent = childFirst.parentNode; 
    //변수 설정한 자식요소의 부모를 찾는다.

    console.log(parent);

 

 

 

 

 

 

03_자바스크립트 형제 찾기 (sibling)

---

HTML

<ul id="list-wrap">
    <li id="list-1">aaa</li>
    <li id="list-2">bbb</li>
    <li id="list-3">ccc</li>
  </ul>

JS

    let second = document.querySelector("#list-2");
    // 두번째 자식을 변수에 담는다.
    let preSibling = second.previousElementSibling;   
    // 변수에 담은 요소의 이전 형제를 찾아 변수에 저장
    let nexSibling = second.nextSibling;
    // 변수에 담은 요소의 다음 형제를 찾아 변수에 저장
    // * 이전/다음 형제에 다른 메소드를 이용해서 console.log 차이점을 비교해봤다.

    console.log(preSibling);
    console.log(nexSibling);

 

 

 

 

 

04_부모요소의 이전 형제를 찾을때

---

HTML

  <ul id="box01">
    <li id="one">one</li>
    <li id="two">
      two
      <p id="current" style="color: chocolate;">here</p>
    </li>
    <li id="three">three</li>
  </ul>

JS

    let me = document.querySelector("#current"); 
    //현재 위치한 영역을 찾아 변수 me에 담기
    let answer = me.parentNode.previousElementSibling; //answer = one
    // me의 부모 요소의 형제요소 찾아 answer 변수에 담기

    console.log(answer);