DOM(Document Object Model)
DOM(Document Object Model) 이란, HTML 문서를 객체로 표현한 것으로 JS 에서 HTML 을 제어할 수 있게 해준다.
노트(Node)
요소, 텍스트, 주석 등의 각 구조를 의미한다.
요소(Element)
노드의 하위 객체로 요소를 의미한다.
따라하기
검색과 탐색
document.querySelector(선택자)
선택자로 검색한 요소를 하나 반환한다. 만약 검색자가 없으면, null을 반환한다.
따라하기
document.querySelectorAll(선택자)
선택자로 검색한 모든 요소를 NodeList 객체로 반환한다.
따라하기
NodeList 객체는 유사배열이며, .forEach() 메소드는 내장되어 있지만, 기타 배열 메소드는 사용할 수 없다.
document.getElementById(아이디)
html id 속성(Attributes) 값으로 검색한 요소를 하나 반환한다. 만약 검색 결과가 없다면, null 을 반환한다.
따라하기
노드.parentElement
노드의 부모요소를 반환한다.
따라하기
요소.previousElementSibling / nextElementSibling
요소의 이전 형제 요소/다음 형제 요소를 반환한다.
따라하기
요소.children
요소의 모든 자식 요소를 반환한다.
요소.firstElementChild / 요소.lastElementChild
요소의 첫 번째/마지막 자식 요소를 반환한다.
따라하기
DOM - 생성, 조회, 수정
document.createElement(태그이름)
html 요소를 메모리상에 생성해 반환한다.
따라하기
요소.prepend(노드1, 노드2, ...)
하나 이상의 노드를 요소의 첫 번째 자식으로 삽입한다.
요소.append(노드1, 노드2, ...)
하나 이상의 노드를 요소의 마지막 자식으로 삽입한다.
노드.appendChild(노드1)
하나 이상의 노드를 마지막 자식으로 삽입하고 삽입한 노드를 반환한다.
따라하기
요소.remove()
요소를 제거한다.
따라하기
노드.contains()
주어진 노드가 대상 노드를 포함한 후손인지 확인한다.
따라하기
노드.textContent
노드의 모든 텍스트를 확인(get)하거나 지정(set)한다.
따라하기
요소.innerHTML
요소의 내부 html을 확인(Get)하거나 지정(Set)한다.
따라하기
요소.dataset
요소의 data- 속성을 확인(Get)하거나 지정(Set)한다.
따라하기
따라하기(다른유형의 .dataset)
요소.classList / 요소.classList.add() / 요소.classList.remove() / 요소.classList.toggle() / 요소.classList.contains()
요소의 class 속성을 제어한다.
따라하기
요소.style
요소의 style 속성을 확인(Get)하거나 지정(Set)한다.
따라하기
따라하기(다른유형의)
요소.getAttribute(속성) / 요소.setAttribute(속성, 값) / 요소.hasAttribute(속성) / 요소.removeAttribute(속성)
요소.getAttribute(속성) - 요소의 속성을 확인한다.
요소.setAttribute(속성) - 요소의 속성과 값을 지정한다.
요소.hasAttribute(속성) - 요소의 속성이 있는지 확인한다.
요소.removeAttribute(속성) - 요소의 속성을 제거한다.
따라하기
DOM - 크기와 좌표
window.innerWidth / window.innerHeight / window.scrollX / window.scrollY
window.innerWidth - 화면(Viewport)의 너비를 얻는다.
window.innerHeight - 화면의 높이를 얻는다.
window.scrollX - 화면에서 스크롤된 X축의 위치를 얻는다.
window.scrollY - 화면에서 스크롤된 Y축의 위치를 얻는다.
따라하기
window.scrollTo(), 요소.scrollTo()
지정된 좌표로 대상을 스크롤한다.
간단한 예시
// 첫 번째 방식
대상.scrollTo(x좌표, y좌표);
// 두 번째 방식
대상.scrollTo({
left: x좌표,
top: y좌표,
behavior: "smooth", // 자연스럽게 이동
});따라하기
요소.offsetWidth / 요소.offsetHeight / 요소.clientWidth / 요소.clientHeight / 요소.scrollWidth / 요소.scrollHeight
요소.offsetWidth - 테두리 선을 포함한 요소의 너비를 얻는다.
요소.offsetHeight - 테두리 선을 포함한 요소의 높이를 얻는다.
요소.clientWidth - 테두리 선을 제외한 요소의 너비를 얻는다.
요소.clientHeight - 테두리 선을 제외한 요소의 높이를 얻는다.
요소.scrollWidth - 테두리 선을 제외한 요소의 스크롤 영역 너비를 얻는다.
요소.scrollHeight - 테두리 선을 제외한 요소의 스크롤 영역 높이를 얻는다.
따라하기
