DOM CRUD 작업
문서 객체 모델(DOM)은 브라우저가 HTML을 표현하는 방식입니다. DOM은 모든 요소, 속성, 텍스트 조각을 객체로 변환합니다. JavaScript는 이 객체들을 사용하여 화면에 보이는 내용을 변경합니다.
버튼을 클릭했을 때 페이지 새로고침 없이 내용이 업데이트된다면, JavaScript가 DOM을 변경하고 있는 것입니다.
다음 메서드들을 사용하여 CRUD(Create, Read, Update, Delete) 작업을 수행할 수 있습니다.
- 요소 접근하기 (Read) 무언가를 변경하려면 먼저 찾아야 합니다. 다음 메서드들을 사용하세요:
getElementById()getElementsByClassName()getElementsByTagName()querySelector()querySelectorAll()
- 요소 생성하기 (Create) JavaScript를 사용하여 새로운 HTML 요소를 생성할 수 있습니다.
createElement("tagName")은 메모리에 요소를 생성합니다.append()는 부모 요소의 끝에 콘텐츠를 추가합니다.appendChild()는 단일 노드를 마지막 자식으로 추가합니다.prepend()는 부모 요소의 시작 부분에 콘텐츠를 추가합니다.before()는 특정 항목 앞에 요소를 삽입합니다.after()는 특정 항목 뒤에 요소를 삽입합니다.insertBefore()는 특정 자식 요소 앞에 요소를 배치합니다.
참고: 요소는 페이지에 추가하기 전까지 메모리에만 머물러 있습니다.
- 요소 수정하기 (Update) 다음 속성들을 사용하여 기존 콘텐츠를 변경할 수 있습니다:
innerText: 보이는 텍스트만 변경합니다.textContent: 숨겨진 텍스트를 포함한 모든 텍스트를 변경합니다.innerHTML: 콘텐츠를 변경하며 HTML 태그를 추가할 수 있습니다.
- 속성 다루기 (Update) 속성은 요소에 대한 추가 정보를 제공합니다.
setAttribute(name, value): 속성을 설정하거나 교체합니다.getAttribute(name): 속성 값을 가져옵니다.removeAttribute(name): 속성을 삭제합니다.hasAttribute(name): 속성이 존재하는지 확인합니다.
프로 팁: 기존 클래스를 유지하면서 새로운 클래스를 추가하려면 classList.add()를 사용하세요. setAttribute()는 전체 값을 교체합니다.
- 요소 삭제하기 (Delete) 페이지에서 요소를 삭제하려면 다음을 사용하세요:
remove()
CRUD 흐름 요약:
- 생성(Create):
createElement() - 수정(Update):
innerText = "New text" - 추가(Add):
appendChild() - 삭제(Delete):
remove()
이 메서드들을 숙달하면 할 일 목록(to-do list)이나 계산기 같은 인터랙티브한 앱을 만들 수 있습니다. 이는 프론트엔드 개발에 있어 필수적인 기술입니다.
출처: https://dev.to/madhanraj/document-object-model-dom-crud-operations-9ka