→ DOM이란 무엇인가?
- Document Object Model = 문서 객체 모델
- HTML 요소를 자바스크립트 객체(Object)처럼 조작할 수 있게 만든 모델/구조
- 즉, DOM을 이용해서 HTML로 구성된 웹페이지를 동적으로 움직이게 제작 가능
DOM에서 사용되는 CRUD 메서드
document 객체의 다음 메서드들을 사용하여 HTML 요소들을 조작할 수 있다.
✓ CREATE
createElement : HTML 요소 생성
let element = document.createElement(tagName[, options]);✓ READ
querySelector : 1개의 태그를 css 선택자를 기반으로 가져옴
querySelectorAll : 여러 개의 태그를 css 선택자를 기반으로 가져옴
queryElementById : css ID 선택자를 기반으로 가져옴
queryElementByClassName : css Class 선택자를 기반으로 가져옴
✓ UPDATE
getAttribute : HTML 태그의 속성값을 가져올때 사용
setAttribute : HTML 태그의 속성값을 설정할때 사용 (업데이트)
classList : 해당 엘리먼트의 클래스 목록에 읽기, 추가(add), 삭제(remove), 교체(replace), 존재 여부(contains, toggle)
✓ DELETE
remove :
removeChild :
innerHTML :
✓ADD
appendChild : 부모 노드의 자식 노드 리스트 중 마지막 자식으로 추가
append() : append 메서드는 appendChild와 같이 Node 객체로 자식 요소를 설정할 수 있을 뿐만 아니라, text를 같이 사용할 수도 있음
✓Extra
preventDefault() : 현재 이벤트의 기본 동작을 중지시킬 때 사용
offsetTop() : 선택된 영역의 상단까지의 거리를 절대 좌표로 반환하는 메서드
window.scrollTo() : 원하는 위치로 스크롤 이동을 시킬 때 사용되는 메서드
