[JavaScript] BOM 과 DOM(Document Object Model)

JS는 화면을 구성하는 모든 것들을 Object로 생성하고 관리

 

BOM(Browser Object Model)

1. window
   - 참조 : https://developer.mozilla.org/ko/docs/Web/API/Window
   - 최상위 객체 (참조변수명은 생략 가능)
   a. document      : HTML 문서 관리
   b. location      : URL 관리
   c. history       : 뒤로, 앞으로 가기...
   d. navigator     : Web Browser 정보
   e. screen        : 클라이언트의 모니터 화면
2.  location
   - 주요 변수
   1) href        : 변수에 저장된 URL 주소로 요청이 발생

---

DOM(Document Object Model)

DOM이란

- 문서 객체 모델(The Document Object Model, 이하 DOM) 은 HTML, XML 문서의 프로그래밍 interface 이다.

- DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다.

- DOM 은 nodes와 objects로 문서를 표현한다. 이들은 웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할을 담당한다.

1. Element 선택(Selector)

 

1) ID 선택자
- window.document.getElementById('id명') 

2) Class 선택자
- window.document.getElementsByClassName('클래스명')
- 리턴 타입은 배열임, 클래스명이 한 개라도 배열로 리턴

3) Tag 선택자 
- window.document.getElementsByTagName('Tag명')
- 리턴 타입은 배열임, 클래스명이 한 개라도 배열로 리턴

---

2. 선택자로 선택한 Element의 내부에 있는 Contents를 가지고 오거나 변경

 

 A. GET
  1) 선택자.innerHTML     : 변수, 선택한 Element의 자식 태그들 전부 반환
  2) 선택자.innerText     : 변수, 선택한 Element의 내부의 모든 Text 반환

 B. SET
  1) 선택자.innerHTML = 값
  2) 선택자.innerText = 값

---

3. 선택자로 선택한 Element의 속성의 값을 가지고 오거나 변경

 

 A. GET
  1) 선택자.속성명
  2) 선택자.getAttribute("속성명");

 B. SET
  1) 선택자.속성명 = 값;
  2) 선택자.setAttribute("속성명");

 C. class 속성
  1) class의 이름(값) 가져오기
   a. 선택자.className : 변수
   b. 선택자.classList : 변수, 여러개, 배열

  2) class의 이름(값) 변경하기
   a. 선택자.className = 값  : 한개
   b. 선택자.classList.replace('변경 전 클래스명', '변경할 클래스명') : 여러개 중 하나 변경

  3) class의 이름(값) 추가
   a. 선택자.classList.add('추가할 클래스명')                      : 한 개 추가
   b. 선택자.classList.add('추가할 클래스명1', '추가할 클래스명2')  : 여러 개 추가

  4) class의 이름(값) Toggle
  - 클래스명이 없으면 추가, 있으면 삭제
   a. 선택자.classList.toggle('클래스명')
   b. 선택자.classList.toggle('클래스명', 조건식 또는 boolean)

  5) class의 이름(값) 삭제
   a. 선택자.classList.remove('삭제할 클래스명')
   b. 선택자.classList.remove('삭제할 클래스명1', '삭제할 클래스명2')