노드 삭제 및 교체하기
요소를 안전하게 삭제하고 교체합니다.
노드 삭제 및 교체하기은(는) CoddyKit의 무료 JavaScript Academy 강의입니다. 이것은 4개 중 4번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 JavaScript Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. JavaScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
노드 제거하기
요소를 추가하는 것뿐 아니라 요소를 제거하거나 교체해야 할 때도 많습니다. 최신 DOM 메서드를 사용하면 코드를 간결하고 읽기 쉽게 작성할 수 있습니다.
remove
remove는 부모 참조 없이 요소를 DOM에서 직접 분리합니다.
const alert = document.querySelector(".alert");
alert.remove();removeChild
이전 방식인 removeChild는 부모에서 호출하며, 제거한 노드를 반환하므로 다시 사용할 수 있습니다.
const list = document.querySelector("ul");
const removed = list.removeChild(list.firstElementChild);여러 노드 제거하기
모든 자식을 비우려면 비워질 때까지 반복하거나 innerHTML을 빈 문자열로 설정합니다(빠르지만 참조가 폐기됩니다).
while (list.firstChild) {
list.removeChild(list.firstChild);
}replaceWith
replaceWith는 한 번의 호출로 요소를 하나 이상의 새 노드나 문자열로 교체합니다.
const old = document.querySelector(".placeholder");
const fresh = document.createElement("div");
old.replaceWith(fresh);replaceWith로 여러 노드 교체하기
replaceWith는 여러 인수를 받을 수 있으므로, 하나의 노드를 여러 노드로 교체할 수 있습니다.
old.replaceWith(headerEl, bodyEl);replaceChild
고전적인 replaceChild(newNode, oldNode)는 부모에서 호출합니다. 인수 순서에 주의하세요. 새 노드가 먼저이고 기존 노드가 두 번째입니다.
list.replaceChild(newItem, oldItem);분리된 노드는 유지됩니다
제거된 노드가 삭제되는 것은 아닙니다. 참조를 유지하면 나중에 다시 삽입할 수 있어 표시하거나 숨기는 패턴에 유용합니다.
const saved = panel;
panel.remove();
// later:
container.append(saved);replaceChildren
replaceChildren는 요소의 모든 자식을 한 번에 교체하며, 인수 없이 호출하면 자식을 모두 비웁니다.
list.replaceChildren(itemA, itemB); // set new contents
list.replaceChildren(); // remove everything메모리와 리스너
요소를 제거하면 분리된 동안 해당 요소의 이벤트 리스너도 실행되지 않습니다. 요소를 다시 추가하면 요소 자체에 연결된 리스너는 그대로 유지됩니다.
btn.addEventListener("click", handler);
btn.remove(); // handler will not fire while detached
container.append(btn); // handler works again메서드 선택하기
깔끔한 최신 코드에는 remove와 replaceWith를 우선 사용하세요. 반환된 노드가 필요하거나 매우 오래된 환경을 지원해야 할 때는 removeChild/replaceChild를 사용합니다.
빠른 확인
인수 순서를 확인해 보세요.
복습
최신 방식인 remove나 부모를 기준으로 하는 removeChild로 노드를 제거합니다. replaceWith(최신 방식, 여러 인수 지원) 또는 replaceChild(newNode, oldNode)로 노드를 교체합니다. 모든 자식을 초기화하려면 replaceChildren을 사용합니다. 분리된 노드는 메모리에서 유지되므로 나중에 다시 삽입할 수 있습니다.
자주 묻는 질문
“노드 삭제 및 교체하기” 강의는 무료인가요?
네 — “노드 삭제 및 교체하기” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 JavaScript Academy 강의 전체를 잠금 해제할 수 있습니다. JavaScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“노드 삭제 및 교체하기”에서 뭘 배우나요?
요소를 안전하게 삭제하고 교체합니다. 브라우저에서 직접 실행하는 실습 코드로 JavaScript Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
JavaScript Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 JavaScript Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 4번째 강의입니다.
“노드 삭제 및 교체하기” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 JavaScript Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 JavaScript Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.
이 강의의 모든 강의
- 텍스트와 HTML 콘텐츠 변경하기
- 요소 생성 및 삽입하기
- 속성과 클래스 수정하기
- 노드 삭제 및 교체하기