JavaScript - DOM

1. DOM

(1) DOM이란?

• DOM은 문서 객체 모델을 의미한다.
  : 웹페이지를 구성하는 JavaScript 객체들의 집합이다.

(2) Document(문서)
: 문서는 문서 객체 모델 내에서 하나의 객체를 의미한다.

2. getElementById

: 요소 선택을 도와주는 메서드로써 요소를 대상으로 하는 동작이다.

해당 메서드는 요소를 선택하는 메서드이며, getElementById 이다.
document에서 사용하며, 이 메서드에 문자열을 전달하게되면 일치하는 id를 가진 요소를 찾아낸다.

3. getElementsByTagName

:document에 내장되어 있는 메서드.

그렇다면 왜 getElementById와 달리 복수형일까?

무조건 1개 이상을 선택해야 하기 때문이다.

즉, 이 클래스에 해당하는 모든 요소를 찾거나, 앵커 태그, 이미지 태그의 모든 요소를 찾는다고 생각하면 편하다.

---

getElemntByTagName 활용법

1. getElemntByTagName을 호출하고 태그 이름을 전달해준다.
2. 태그 이름을 전달하면 바로 HTMLCollection을 반환시켜준다.

HTMLCollection이 반환하는 항목은 뭘까?

Element는 JavaScript에서 반환되는 객체이다.
하나의 HTML요소를 나타내는 모든 특성을 지닌 객체이기도 하다.(배열 같은 객체이지만 실제론 배열은 아님)

예시)

document.getElementsByTagName('a')
HTMLCollection(24) ~~~	// (24)가 의미하는 바는 24개의 Element가 반환된 것이라고 볼 수 있다.

4. getElementsByClassName

: 말그대로 클래스로 선택할 때 사용하는 메서드이다.

위와 기능은 동일하나 태그 이름을 넣느냐, 클래스를 넣느냐의 차이이다.
if) 없는 클래스를 전달하면 null을 반환한다.

• getElementsByClassName / getElementsByTagName 과 getElementById 차이점

앞선 클래스, 태그의 갯수에 따라 여러 Element들을 반환한다. 하지만 getElementById는 페이지당 1개만 존재하기 때문에 Element 하나만 반환한다.