[JavaScript] DOM(문서 객체 모델), document 객체

1. DOM(Document Object Model)

- 문서 객체 모델(DOM : Document Object Model)

- XML이나 HTML 문서에 접근하기 위한 인터페이스, 문서 내의 모든 요소를 정의하고 각각의 요소에 접근하는 방법을 제공

- 자바 스크립트에서 HTML을 접근하기 위해서는 DOM을 사용

2. document 객체

- 웹 페이지 그 자체를 의미

- 웹 페이지에 존재하는 HTML 요소에 접근하고자 할 때에는 반드시 document 객체부터 시작

3. document 메소드

• HTML 요소 선택용
  - getElementById("아이디명") : 해당 아이디를 가진 요소를 선택해서 객체로 가져오는 함수
  - getElementsByTagName("태그명") : 해당 태그인 요소들을 선택해서 배열로 가져오는 함수
  - getElementsByClassName("클래스명") : 해당 클래스를 가진 요소들을 선택해서 배열로 가져오는 함수
  - querySelectorAll("CSS 선택자") : 선택자에 해당하는 요소들을 배열로 가져오는 함수
  
  getElementById("test") === querySelectorAll(".test")
• HTML 요소 내용 변경
  - innerHTML 프로퍼티를 이용해서 간단하게 요소의 내용을 변경할 수 있음
  태그객체.innerHTML = "새로운 내용";
  태그객체.innerHTML.includes("텍스트"); : innerHTML안에 "텍스트"가 포함되어 있는지(boolean)
• HTML 요소 스타일 변경
  태그객체.style.속성명 = 속성값;
  - 속성명은 CSS와 다른 속성명도 있기에 찾아서 하는 게 더 좋음
  
• HTML 요소 클래스
  - 태그객체에 스타일을 하나하나씩 줄 수 있지만 줘야 되는 태그가 많아지면 힘들 수 있다.
  - 그렇기에 스타일을 하나하나씩 주기보다는 CSS로 스타일을 지정해놓고 태그객체에 CSS에 지정해놓은 클래스를 줄지 안줄지를 한다.
  
  태그객체.classList : 태그객체의 클래스 값들을 담고 있는 배열(같은 거)
  태그객체.classList.add("클래스명") : 태그객체에 클래스를 추가
  태그객체.classList.remove("클래스명") : 태그객체에 클래스 제거
  태그객체.classList.contains("클래스명") : 태그객체에 클래스가 있는지 없는지(boolean)

4. 예시