1. 문서 객체 모델

• 문서 객체 모델(DOM: document object model) : 자바스크립트를 이용하여 웹 문서에 접근하고 제어할 수 있도록 객체를 사용해 웹 문서를 체계적으로 정리하는 방법. DOM은 웹 문서, 그 안의 모든 요소를 ‘객체’로 인식하고 처리.
• 브라우저에서 제공하는 객체로 사용자가 따로 선언할 필요 없이 사용 가능.
• DOM 트리
  • DOM은 웹 문서의 요소, 요소에 사용된 내용과 속성을 부모 요소와 자식 요소로 구분.
  • DOM의 기본 원칙
    • 1. 모든 HTML 태그는 요소(element) 노드이다.
    • 2. HTML 태그에서 사용하는 텍스트 내용은 자식 노드인 텍스트(text) 노드이다.
    • 3. HTML 태그에 있는 속성은 자식 노드인 속성(attribute) 노드이다.
    • 4. 주석은 주석(comment) 노드이다.
• ex) <img src="doit.jpg" alt="공부하는 이미지"> 의 태그에서 alt 속성이 <img> 의 자식 요소

2. DOM에 접근하기

• getElementById() 메서드 : id 선택자로 DOM요소에 접근.

요소명.getElementById("id명")

• getElementByClassName() 메서드 : class 값으로 DOM요소에 접근.

요소명.getElementsByClassName("class명")

• getElementsByTagName() 메서드 : 태그 이름값으로 DOM요소에 접근.

요소명.getElementsByTagName("태그명")

• querySelector(), querySelectorAll() 메서드

노드.querySelector(선택자)
노드.querySelectorAll(선택자 또는 태그)

• DOM 트리의 텍스트, 속성 노드까지 자유롭게 제어 가능.

• querySelector() 메서드 : 반환값이 하나 (첫번째 거)

  • id를 선택 : querySelector('#id명'); (유일할 때 사용)
  • class를 선택 : querySelector('.class명'); (여러개일 때 주로 사용)
  • 자손 태그 선택 : querySelector('div span');
    • div의 자손(후손)인 span을 선택
  • 자식 태그 선택 : querySelector('div>span');
    • div의 자식인 span을 선택

• querySelectorAll() 메서드 : 여러 값이 한꺼번에 반환. 객체처럼 내부에 있는 요소들이 보임.

  (유사 배열 : 배열처럼 생긴 객체 - document.querySelectAll, Arguments)