DOM CRUD 작업
Document Object Model (DOM)은 HTML을 위한 트리 구조입니다. JavaScript는 이를 사용하여 페이지의 모든 요소, 속성 및 텍스트 조각에 접근하고 변경합니다.
버튼을 클릭했을 때 페이지 새로고침 없이 내용이 업데이트된다면, 그것이 바로 DOM 조작이 작동하는 모습입니다.
CRUD(Create, Read, Update, Delete) 작업을 수행하는 방법은 다음과 같습니다.
- Read: 요소에 접근하기 페이지에서 요소를 찾으려면 다음 메서드들을 사용하세요:
- getElementById()
- getElementsByClassName()
- getElementsByTagName()
- querySelector()
- querySelectorAll()
- Create: 새로운 요소 만들기 JavaScript를 사용하여 새로운 HTML 요소를 생성할 수 있습니다.
- createElement(): 메모리에 새로운 태그를 생성합니다.
- append(): 부모 요소의 끝에 콘텐츠를 추가합니다.
- appendChild(): 단일 노드를 마지막 자식으로 추가합니다.
- prepend(): 부모 요소의 시작 부분에 콘텐츠를 추가합니다.
- before(): 특정 대상 앞에 요소를 삽입합니다.
- after(): 특정 대상 뒤에 요소를 삽입합니다.
- insertBefore(): 기존 자식 요소 앞에 새로운 요소를 배치합니다.
- Update: 콘텐츠 변경하기 사용자가 화면에서 보는 내용을 수정합니다:
- innerText: 보이는 텍스트만 업데이트합니다.
- textContent: 숨겨진 텍스트를 포함한 모든 텍스트를 업데이트합니다.
- innerHTML: 콘텐츠를 업데이트하며 HTML 태그를 추가할 수 있게 해줍니다.
- Attributes: 속성 관리하기 속성은 태그에 추가 정보를 더합니다.
- setAttribute(): 속성에 새로운 값을 설정합니다. 이 작업은 기존 값을 대체한다는 점에 유의하세요.
- getAttribute(): 현재 값을 가져옵니다.
- removeAttribute(): 속성을 삭제합니다.
- hasAttribute(): 속성이 존재하는지 확인합니다.
Pro tip: 현재 클래스를 삭제하지 않고 클래스를 추가하려면 classList.add()를 사용하세요. 사용자 정의 속성에는 setAttribute()를 사용하세요.
- Delete: 요소 제거하기 페이지에서 요소를 제거하려면 다음을 사용하세요:
- remove()
CRUD 흐름 요약:
- Create:
document.createElement("p") - Update:
p.innerText = "Hello" - Read:
document.getElementById("p") - Delete:
p.remove()
이러한 메서드들을 숙달하면 할 일 목록(to-do list), 계산기, 폼 검증기(form validator)와 같은 대화형 도구를 만들 수 있습니다. 이는 현대적인 웹 프레임워크를 배우기 위한 필수적인 단계입니다.
출처: https://dev.to/madhanraj/document-object-model-dom-crud-operations-9ka
선택 사항 학습 커뮤니티: https://t.me/GyaanSetuAi