[자바스크립트] DOM(문서 객체 모델)

DOM이란?

• 자바스크립트를 이용하여 웹 문서에 접근하고 제어할 수 있도록 객체를 사용해 웹 문서를 체계적으로 정리하는 방법
• 웹 문서를 구조화한 DOM tree 와 이벤트 등을 정리한 표준

DOM이 필요한 이유?
- 웹에서 JS 사용하는 이유 : 어떤 조건이 주어지거나 사용자의 동작이 있을 때 웹 문서를 동적으로 반응하게 하기 위해서
- 그리고 그렇게 하려면 웹 문서의 모든 요소를 따로 제어할 수 있어야 함 → 그래서 DOM을 사용!

 

 

---

DOM 트리

• 웹 문서에 있는 요소들 간의 부모 자식 관계를 계층 구조로 표시한 것
• 노드 : DOM 트리에서 가지가 갈라져 나간 항목
• 루트 노드 : DOM 트리의 시작부분(html)

 

 

• 문서의 요소 뿐만 아니라, 각 요소의 내용과 속성도 자식으로 나타냄

 

---

DOM 트리와 노드

• DOM에는 단순히 태그에 해당하는 요소 노드뿐만 아니라 여러 종류의 노드가 있다.
• 노드 : DOM 트리에서 가지가 갈라져 나가는 부분  
• 루트 노드 : DOM 트리의 시작 부분, 즉 html 노드

 

노드를 구성하는 원칙

• 모든 HTML 태그는 요소 노드가 됨
• HTML 태그에서 사용하는 텍스트 내용은 자식 노드인 텍스트 노드가 됨
• HTML 태그에 있는 속성은 모두 자식 노드인 속성노드가 됨
• 주석들은 주석노드가 됨

 

노드 리스트

• querySelectorAll() 메서드를 사용하면 여러 개의 노드를 한꺼번에 가져올 수 있는데, 가져온 여러 개의 노드 정보를 저장한 것을 노드 리스트라고 함
• 노드 리스트는 배열과 비슷하게 생겼고 배열처럼 사용할 수 있음 (배열은 아님!)

 

노드 관련 메서드 정리

메서드	설명
createElement()	- 형태 : document.createElement(요소명) - 요소 노드를 생성함
createTextNode()	- 형태 : document.createTextNode(텍스트) - 텍스트 노드를 생성함
appendChild()	- 형태 : 부모_노드.appendChild(자식_노드) - 부모 노드와 자식 노드를 연결함
createAttribute()	- 형태 : document.createAttribute(속성명) / 노드명.value = 속성값 - createAttribute() 메서드 : 속성 노드를 생성함 - value 프로퍼티 : 속성의 값 지정 (1) createAttribute() 메서드를 사용해서 속성 노드를 만들고, (2) 속성의 값은value프로퍼티를 사용해서 지정한다.
setAttributeNode()	- 형태 : 요소 노드.setAttributeNode(속성 노드) - 속성 노드를 연결함  - setAttribute()와 헷갈리기 쉬우니 주의
insertBefore()	형태 : document.body.insertBefore(새 노드, 기준 노드) - 기존에 존재하는 특정 노드 앞에 새 요소를 추가함
remove()	- 형태 : 요소 노드.remove() - 노드 삭제
removeChild()	- 형태 : 노드명.parentNode - 자식 노드 삭제함, 이를 위해선 부모 노드를 먼저 찾아야 함

 

---

웹 요소에 접근하기

• 웹 문서에서 원하는 요소를 찾아가는 것을 접근한다(access)고 함

 

querySelector & querySelectorAll

• CSS의 선택자를 활용하여 요소에 접근하는 방법

메서드	설명
querySelector(선택자)	- 선택자에 해당하는 값 중 가장 먼저 나온 하나의 값만 반환
querySelectorAll(선택자)	- 선택자에 해당하는 값 모두 반환 (Nodelist 형태임)

• 선택자 관련 포스팅 : [CSS] Selector(선택자) 정리

 

getElement

• 예전부터 사용하던 방법
• id, class, 태그명 등을 사용하여 접근

메서드	설명
getElementById("id명")	- HTML 요소 중 id 속성이 "id명"인 요소 선택   - 단일 요소만 선택
getElementsByClassName("클래스명")	- HTML 요소 중 class 이름이 "클래스명"인 요소들 선택   - 복수 요소 선택
getElementsByTagName("태그명")	- HTML 요소 중 태그명이 "태그명"인 요소들 선택   - 복수 요소를 선택
getElementsByName("이름")	- HTML 요소 중 name 속성이 "이름"인 요소들 선택   - 복수 개의 요소를 선택

 

getElement와 querySelector의 차이

• querySelector를 사용할 경우, 둘 이상의 선택자를 조합해서 접근 가능

 

---

웹 요소 내용 가져오기 및 수정하기

프로퍼티	설명
innerText	- 순수 텍스트를 가져오거나, 해당 요소에 텍스트 지정
innerHTML	- 태그와 함께 텍스트를 가져오거나, 해당 요소에 태그와 함께 텍스트 지정
textContent	- 텍스트를 가져오되, 화면에 보이는대로가 아니라 소스에 있는대로 가져옴 - 화면에서 감춘 요소 가져옴 - 공백이 여러 개일 경우 그 공백도 모두 가져옴

* innerHTML과 innerText의 차이?
- innerHTML : element 안의 HTML이나 XML을 가져옴
- innerText : element 안의 text 값들만을 가져옴

 

---

CSS 속성에 접근하기

• 자바스크립트를 이용하면 스타일 속성의 값을 가져오거나 원하는 값으로 수정할 수 있음 → 웹 문서에서 다양한 효과를 만들 수 있음!

요소.style.속성명 // 속성명 중 background-color처럼 하이픈으로 연결된 경우, backgroundColor 등으로 써줌

 

---

classList 프로퍼티

• 두 개 이상의 class 스타일이 적용되었을 겅우 class 스타일 정보를 담아두는 프로퍼티
• classList를 사용해서 적용중인 class 스타일을 제거하거나, 새로운 class스타일을 추가할 수 있음

메서드	설명
요소.classList.add(클래스명)	- 특정 클래스 스타일 추가
요소.classList.remove(클래스명)	- 특정 클래스 스타일 제거
요소.classList.contains(클래스명)	- 특정 클래스 스타일이 있는지 확인 - true 혹은 false 반환
요소.classList.toggle(클래스명)	- 특정 클래스 스타일 토글(해당 요소에 클래스 스타일이 없으면 추가, 있으면 제거) - 특정 클래스를 추가하거나 삭제하길 반복하는 경우, toggle을 활용하는것이 더 편리함