✅ DOM
Document Object Model(문서 객체 모델)의 약자
웹 페이지에 나타나는 HTML 문서 전체를 객체로 표현한 것
이때 각 객체를 노드(Node)라는 용어로 표현하고, 태그는 요소 노드, 문자는 텍스트 노드로 구분된다.
HTML의 작은 부분까지 접근할 수 있고 DOM을 이용해 HTML로 구성된 웹페이지를 동적으로 움직이게 만들 수 있다.
🌠 log는 값 자체에, dir은 객체의 속성에 . . .
log와 dir 메소드의 가장 큰 차이는 DOM 객체를 다룰 때다.
DOM구조를 조회할 때에는 console.dir이 유용하다.
| 구분 | log | dir |
|---|---|---|
| 기능 | 값을 그대로 출력 (콘솔에서 값 자체를 확인) | 객체를 트리 구조로 출력 (객체의 속성들을 살펴보고 싶다면) |
| 주 용도 | 변수 값, 문자열, 숫자 등 일반 출력 | 객체의 속성 구조 탐색 |
| 출력 | 객체를 내용+타입 정보를 함께 | 객체를 트리처럼 |
| DOM 객체 출력 | 요소의 HTML 형태 | 요소의 JS 객체 속성 |
✅ DOM 트리
HTML의 계층 구조는 DOM에서도 반영되는데 이러한 계층구조를 나무에 비유해서 DOM 트리라고 부른다.
각 노드 간의 관계는 부모, 자식, 형제라는 용어로 표현한다.
✅ Node
DOM 안에서 하나의 단위(요소)를 뜻하는 말
웹 페이지를 구성하는 모든 것 (태그, 텍스트, 주석 등)
e.g.) 이 경우 DOM 트리 구조는 . .
<body>
<h1>Hello</h1>
</body>document (Document Node) >
body (Element Node) > h1 (Element Node) >
Hello (Text Node)
✅ DOM 이동 시 활용 가능한 프로퍼티
element
| 프로퍼티 | 유형 | 결과 |
|---|---|---|
| element.children | 자식 요소 노드 | element의 자식 요소 모음 (HTMLCollection) |
| element.firstElementChild | 자식 요소 노드 | element의 첫 번째 자식 요소 하나 |
| element.lastElementChild | 자식 요소 노드 | element의 마지막 자식 요소 하나 |
| element.parentElement | 부모 요소 노드 | element의 부모 요소 하나 |
| element.previousElementSibling | 형제 요소 노드 | element의 이전(previous) 혹은 좌측(left)에 있는 요소 하나 |
| element.nextElementSibling | 형제 요소 노드 | element의 다음(next) 혹은 우측(right)에 있는 요소 하나 |
node
| 프로퍼티 | 유형 | 결과 |
|---|---|---|
| node.childNodes | 자식 노드 | node의 자식 노드 모음(NodeList) |
| node.firstChild | 자식 노드 | node의 첫 번째 자식 노드 하나 |
| node.lastChild | 자식 노드 | node의 마지막 자식 노드 하나 |
| node.parentNode | 부모 노드 | node의 부모 요소 하나 |
| node.previousSibling | 형제 노드 | node의 이전(previous) 혹은 좌측(left)에 있는 노드 하나 |
| node.nextSibling | 형제 노드 | node의 다음(next) 혹은 우측(right)에 있는 노드 하나 |
✅ 주요 요소 노드 프로퍼티
| 프로퍼티 | 내용 | 참고사항 |
|---|---|---|
| element.innerHTML | 요소 노드 내부의 HTML코드 문자열로 리턴 | 요소 안의 정보를 확인할 수도 있지만, 내부의 HTML 자체를 수정할 때 좀 더 자주 활용 |
| element.outerHTML | 요소 노드 자체의 전체적인 HTML 코드를 문자열로 리턴 | outerHTML은 새로운 값을 할당하면 요소 자체가 교체되어 버리기 때문에 주의 |
| element.textContent | 요소 노드 내부의 내용들 중에서 HTML을 제외하고 텍스트만 리턴 | textContent는 말그대로 텍스트만 다루기 때문에HTML태그를 쓰더라도 모두 텍스트로 처리됨 |
✅ 요소 노드 다루기
| 프로퍼티 | 내용 |
|---|---|
| document.createElement('태그이름') | 요소 노드 만들기 |
| element.textContent, element.innerHTML, ... | 요소 노드 꾸미기 |
| element.prepend, element.append, element.after, element.before | 요소 노드 추가/이동 |
| element.remove() | 요소 노드 삭제 |
✅ HTML 속성 다루기
표준 속성이 아닌 경우에는 프로퍼티로 변환이 안 되는데, 아래 메소드를 활용하면 표준이 아닌 HTML 속성들도 다룰 수 있다.
| 프로퍼티 | 내용 |
|---|---|
| element.getAttribute('속성') | 속성에 접근하기 |
| element.setAttribute('속성', '값') | 속성 추가(수정)하기 |
| element.removeAttribute('속성') | 속성 제거하기 |
✅ 스타일 다루기
자바스크립트로 태그의 스타일을 다루는 방법
- style 프로퍼티 활용하기:
element.style.styleName = 'value'; - class 변경을 통해 간접적으로 스타일 적용하기:
element.className,element.classList
classList의 유용한 메소드
| 메소드 | 내용 | 참고사항 |
|---|---|---|
| classList.add | 클래스 추가 | 여러 개의 값을 전달하면 여러 클래스 추가 가능 |
| classList.remove | 클래스 삭제 | 여러 개의 값을 전달하면 여러 클래스 삭제 가능 |
| classList.toggle | 클래스 없으면 추가, 있으면 삭제하기 | 하나의 값만 적용 가능하고, 두 번째 파라미터로 추가 또는 삭제 기능을 강제할 수 있음 |
✅ 태그 선택
| 메소드 | 의미/결과 |
|---|---|
| document.getElementById('id') | id 선택 |
| document.getElementsByClassName('class') | class 선택 |
| document.getElementsByTagName('tag') | tag 선택 |
| document.querySelector('css') | 태그 선택 (가장 첫번째 태그 하나) |
| document.querySelectorAll('css') | 태그 선택 (선택한 태그 전체 모음(NodeList)) |
참고자료
코드잇 | 인터랙티브 자바스크립트
기술 블로그