[브라우저와 자바스크립트] 12. 노드 삭제와 이동하기

노드를 삭제하거나 이동하는 방법에 대해서 살펴보겠습니다.

노드를 삭제하거나 이동하는 방법은 생각보다 간단한데요. 먼저 노드를 삭제하는 방법은 remove 메소드를 활용하는 겁니다.

// 노드 삭제와 이동
const today = document.querySelector('#today');
const tomorrow = document.querySelector('#tomorrow');

// 노드 삭제하기: Node.remove();
tomorrow.remove();
today.children[2].remove();

원하는 노드를 선택해서 remove라는 메소드를 호출하기만 하면 이렇게 내일 할 일의 목록이 모두 사라진 걸 확인할 수 있는데요. 만약 오늘 할 일의 세 번째 자식 요소 노드를 삭제하고 싶다면 오늘 할 일의 자식 요소들 중에서 세 번째니까 2번 인덱스에 접근하고 나서 remove 저장하고 실행해보면 사라진 것을 확인할 수 있습니다.

 

다음은 노드를 이동하는 방법입니다. 노드를 이동하는 방법도 여러 가지가 있지만 가장 간단한 방법은 요소를 추가할 때 배웠던 네 가지 메소드를 활용하는 겁니다.

// 노드 삭제와 이동
const today = document.querySelector('#today');
const tomorrow = document.querySelector('#tomorrow');

// 노드 이동하기: prepend, append, before, after
today.append(tomorrow.children[1]);

내일 할일의 두 번째 요소를 오늘 할 일의 마지막에 넣어볼 텐데요. 그럼 일단 오늘 할 일의 마지막에 넣을 거니까 today에 append 메소드를 활용하면 됩니다. 그리고 나서 이 안에 파라미터를 그냥 내일 할 일의 자식 요소들 중에서 1번 인덱스를 전달해 주면 되는 겁니다. tomorrow의 children 프로퍼티를 이용해서 1번 인덱스로 접근하는 걸로 두번 째 요소를 선택했는데 꼭 이 방법이 아니더라도 선택하는 방법은 다양하니까 또 어떤 방식으로 선택할 수 있을지 고민해 보면 좋을 것 같습니다. 저장하고 실행해보면 내일 할일의 두 번째 요소가 오늘 할 일의 마지막 요소로 이동한 것을 확인할 수 있습니다.

 

이번에는 오늘 할 일의 두 번째 요소를 내일 할 일의 두번째 요소 다음으로 옮겨봅시다.일단 내일 할 일의 두번 째 요소와 세번째 요소 사이는 내일 할 일의 처음도 아니고 마지막도 아니기 때문에 tomorrow에 append나 prepend로는 옮기기가 조금 어렵기 때문에 tomorrow의 children 중에서 두 번째나 세 번째 기준으로 after나 before로 요소를 옮겨주면 될 것 같은데요. tomorrow의 children 프로퍼티에서 1번 인덱스 요소에 접근해서 after 메소드로 today의 children들 중에서 1번 인덱스 요소를 옮겨주겠습니다. 저장하고 실행해보면 원하는 대로 요소가 잘 움직인것을 확인할 수 있습니다.

이뿐만 아니라 이렇게 다양한 방식으로 요소를 이동할 수가 있는데요.

지금은 그냥 단순한 예시라서 각 방식들이 크게 차이가 없을 수 있지만 나중에 어떤 프로그램을 만들 때는 상황에 따라서 조금 더 적절한 방식이 있을 수 있으니까 여러 가지 방식들을 떠올려서 그 중에 뭐가 더 좋을지 한 번쯤은 고민해 보시기를 권장 드립니다.

// 노드 삭제와 이동
const today = document.querySelector('#today');
const tomorrow = document.querySelector('#tomorrow');

// 노드 이동하기: prepend, append, before, after
tomorrow.children[1].after(today.children[1]);
tomorrow.children[2].before(today.children[1]);
tomorrow.lastElementChild.before(today.children[1]);