자바스크립트 계층 이동하는 방법

웹 페이지에서 DOM을 다룰 때, 때로는 요소의 위치를 이동해야하는 경우가 있습니다. 이를 위해 자바스크립트에서는 계층 이동(hierarchy traversal) 메서드를 제공합니다. 이들 메서드는 요소를 찾거나, 요소의 위치를 변경하거나, 그 하위 요소들을 다루는 데 사용됩니다.

 

 

사용법

 

다음은 계층 이동 메서드들입니다.

 

parentNode

부모 요소를 선택합니다.

예시: element.parentNode

 

parentElement

parentNode와 같지만, 요소노드만 선택합니다.

예시: element.parentElement

 

childNodes

모든 자식 요소를 선택합니다.

예시: element.childNodes

 

 

children

자식 요소노드만 선택합니다.

예시: element.children

 

firstChild

첫 번째 자식 요소를 선택합니다.

예시: element.firstChild

 

lastChild

마지막 자식 요소를 선택합니다.

예시: element.lastChild

 

 

nextSibling

다음 형제 요소를 선택합니다.

예시: element.nextSibling

 

previousSibling

이전 형제 요소를 선택합니다.

예시: element.previousSibling

 

firstElementChild

첫 번째 자식 요소노드를 선택합니다.

예시: element.firstElementChild

 

lastElementChild

마지막 자식 요소노드를 선택합니다.

예시: element.lastElementChild

 

 

이들 메서드를 이용하여 요소의 위치를 변경할 수도 있습니다. 예를 들어, parentNode와 insertBefore를 조합하여 요소를 이동시킬 수 있습니다.

 

let movedElement = document.getElementById('moved');
let parentElement = document.getElementById('parent');

// 요소를 이동시킵니다.
parentElement.insertBefore(movedElement, parentElement.firstChild);

 

위 코드는 parent 요소 안에 있는 moved 요소를 parent의 첫 번째 자식 요소로 이동시키는 예시입니다.

 

요소의 위치를 변경할 때는, 반드시 이동시키려는 요소가 현재 DOM에 포함되어 있는 요소여야 합니다. 이를 확인하기 위해, appendChild 메서드를 이용하여 이동시키려는 요소를 새로운 요소로 추가하는 것이 좋습니다.

 

계층 이동 메서드는 DOM 다루기에 매우 유용하며, 요소의 위치를 변경하거나 특정 요소를 찾는 등 다양한 용도로 사용됩니다.