JS - DOM
Vue.js 나 React.js 등의 프레임워크을 통해 js 에 접하게 되면 개인적인 생각에 DOM 객체를 사용할 일이 많지 않은 것 같다.
그런 의미에서 DOM(Document Object Model)에 대해 간단하게 정리해보려한다.
DOM
웹 페이지 내의 모든 콘텐츠를 표현하는 객체이다. document 라는 객체를 통해 기본적인 접근이 가능하다.
태그로 만들어진 요소만을 생각 할 수 있는데 이는 요소 노드(Element node) 문자만 적혀 있을 경우 텍스트 노드, 주석의 경우 주석 노드 등 총 12개의 노드 타입이 있다
원하는 노드 검색하기
원하는 노드만을 선택하는 경우는 아래와 같은 방법을 사용할 수 있다.
요소를 반환하는지 컬렉션을 반환하는지 주의할 필요가 있다.
| 찾는 노드, 기준 | 방법 |
|---|---|
document |
document |
html |
document.documentElement |
head |
document.head |
body |
document.body |
CSS 선택자 |
querySelector, querySelectorAll |
id |
getElementById |
name |
getElementsByName |
class |
getElementsByClassName |
tag |
getElementsByTagName |
getElementsBy로 시작하는 메서드 포함 살아있는 컬렉션을 반환하는 메소드가 있어 문서의 변동 내역이 자동으로 갱신되니 주의
인접한 노드, 요소 노드 탐색하기
그냥 노드만 가지고 탐색할 경우 문자노드, 주석노드 등 모든 노드가 탐색되므로 요소 노드만 탐색하는 메서드가 따로 있다.
탐색방법
| 관계 | 노드 | 요소 노드 |
|---|---|---|
| 부모 | parentNode | parentElement |
| 자식 | childNodes | children |
| 첫째 자식 | firstChild | firstElementChild |
| 마지막 자식 | lastChild | lastElementChild |
| 앞의 형제 | previousSibling | previousElementSibling |
| 뒤의 형제 | nextSibling | nextElementSibling |
기타 메서드
matches: 호출한 요소와 CSS 선택자와 일치하는지 여부 확인closest: 자신과 조상 요소 중 CSS 선택자와 일치하는 가장 가까운 요소를 반환contains: 인자로 받은 요소 호출한 요소의 후손이거나 일치하는지 여부 확인
참조자료
하단 링크 글의 일부를 정리한 게시글이며, 자세한 내용은 아래의 링크에서 찾아보기를 권장드립니다.