▶ DOM (Document Object Model, 문서 객체 모델)
- 문서의 각 부분들을 객체로 표현한 API로, 문서의 구조화된 표현을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공해 문서 구조, 스타일, 내용을 변경할 수 있도록 한다.
- 웹 문서를 하나의 객체로 정의, 웹 문서를 이루는 텍스트, 이미지, 표 등 모든 자식 요소도 각각 객체로 정의
ex) 웹 문서 전체 → document 객체, 삽입한 이미지 → image 객체
- 웹 페이지의 구조를 표현하는 방법으로, 자바스크립트와 같은 스크립트 언어로 웹 페이지의 요소를 조작할 수 있게 해준다.
▶ DOM 트리
- 문서 객체 모델의 구조를 체계화하여 나타냄
- 루트 노드인 <html>는 부모 줄기, 루트 노드인 태그들을 자식 나뭇가지, 요소 안의 콘텐츠는 잎에 해당
- 기본 원칙
1) 모든 HTML 태그는 요소(element) 노드
2) HTML 태그에서 사용하는 텍스트 내용은 자식 노드인 텍스트(text) 노드
3) HTML 태그의 속성은 자식 노드인 속성(attribute) 노드
4) 주석은 주석(comment) 노드
▶ DOM 요소에 접근 → 메서드 이용해 선택자(id, class)로 접근
- getElementById() 메서드 : 특정 id가 포함된 DOM 요소에 접근
- getElementsByClassName() 메서드 : 지정한 class 선택자 이름이 있는 DOM 요소에 접근
- getElementsByTagName() 메서드: class나 id 비지정시 태그명으로 DOM 요소에 접근
→ 반환값은 HTMLElement 객체로, HTML 요소만 저장된다.
- querySelector(): CSS 선택자와 일치하는 첫번째 요소 반환. 요소 노드 뿐 아니라 텍스트 노드, 속성 노드까지 제어 가능
- querySelectorAll(): 여러 값이 한꺼번에 반환
→ 반환값은 노드 or 노드 리스트(노드를 한꺼번에 여러개 저장한 것)
* getElementById() 와 querySelector의 차이점
둘 다 HTML 문서에서 특정 요소를 선택하는데 사용되는 메서드지만, querySelector가 더 다양한 선택지를 사용할 수 있다.
getElementById()는 id 선택자만 사용할 수 있다.
querySelector()는 태그 선택자(첫번째 p요소), 클래스 선택자(첫번째 class), id 선택자(첫번째 id), 속성 선택자(첫번째 속성) 등 다양한 CSS 선택자가 있다.
- innerText, innerHTML : 웹 요소의 내용을 수정하는 프로퍼티
innerText는 내용을 표시하고 innerHTML은 HTML 태그까지 반영해 표시한다.
▶ 속성 가져오기
- getAttribute() : 속성에 접근
- setAttribute() : 접근한 속성의 값을 바꾸기
▶ 이벤트 처리하기
- addEventListener(이벤트, 함수, 캡처 여부)
▶ CSS 속성 접근
- document. 요소명, style. 속성명
▶ 텍스트 노드를 사용하는 새로운 요소 추가
1) createElement() 새로운 요소 노드 만들기
2) createTextNode() 새로운 텍스트 노드 만들기
3) appendChild() 텍스트 노드를 요소 노드의 자식으로 연결
4) appendChild() 요소 노드를 DOM에 연결
▶ 속성값이 있는 새로운 요소 추가
1) createElement() 새로운 요소 노드 추가
2) createAttribute() 새로운 속성 노드 추가
3) 속성값 지정하기 → 속성값을 프로퍼티로 지정
4) setAttributeNode() 속성 노드를 요소 노드의 자식으로 연결
5) appendChild() 요소 노드를 DOM에 연결
예를 들어 더 보기 링크 누르면 이미지 뜨게 만들기
요소 노드 → img // 속성 노드 → src, alt // 속성값 → .value로 값 지정 // 요소 노드.appendChild (속성 노드)
▶ 노드 삭제
parentNode 프로퍼티로 부모 노드 찾아서 부모노드.removeChild(자식노드)
'IT 기초 > JavaScript' 카테고리의 다른 글
| 자바스크립트 기본 문제 풀기 (2) (0) | 2023.04.13 |
|---|---|
| 자바스크립트 기본 문제 풀기 (1) (0) | 2023.04.12 |
| 자바스크립트 관련 용어 정리(2) _ 프레임워크와 라이브러리 (0) | 2023.03.24 |
| 자바스크립트 관련 용어 정리(1) _ 자바스크립트, 객체, API (0) | 2023.03.24 |