JS - DOM

Document Object Model(DOM)은 HTML문서의 프로그래밍 인터페이스이다.
HTML문서 내 모든 요소를 정의하고 계층화 시켜 트리구조로 만든 객체 모델이라고 할 수 있다.

Javascript는 DOM을 이용해서 HTML을 조작할 수 있다.
이번 포스트에선 DOM의 데이터 타입 및 API를 알아보도록 하자

DOM 데이터 타입

1. document

• HTML문서의 전체. 즉, 객체모델의 루트값을 뜻한다.

2. element

• DOM을 통해 가져온 요소

<div id="test1">
</div>

const object = document.getElementById("test1");
console.log(object) // expect: div.test1

• 위 코드에서 DOM API를 통해 선택되어진 test1과 같은 것들을 element라고 한다.

3. nodeList

• 위 element들의 집합이다.

<div class="test2"></div>
<div class="test2"></div>
<div class="test2"></div>
<div class="test2"></div>

const object = document.getElementByClassName("test2"); 
// test2를 클래스로 가지고 있는 요소들의 집합

그 이외 attribute 및 namedNodeMap이 있다.

DOM 인터페이스

1. HTML Object Collection

DOM이 가지고 있는 객체집합(Object Collection)을 통해 HTML요소에 접근하는 방법이다.

const nav = document.nav; //<nav> 요소 선택

2. getElementById

해당 id를 가지고 있는 요소 중 첫번째 요소 하나만을 선택한다.

<div id="test1"></div>
<div id="test2"></div>

const el = document.getElementById("test1");
console.log(el) // expect: div.test1

3. getElementsByTagName

해당 태그 이름의 HTML 요소를 모두 선택한다.

<div class="division">
  <input id='1' />
  <input id='2' />
</div>

const els = document.getElementById("input"); // <input>을 모두 선택
}

4. getElementsByClassName

해당 클래스명을 가진 HTML 요소를 모두 선택한다.

<div class="test2"></div>
<div class="test2"></div>
<div class="test2"></div>
<div class="test2"></div>

const els = document.getElementByClassName("test2"); 
for (target of els){
	target.style.color = "red";  // test2 클래스명을 가진 모든 요소들의 폰트 컬러를 red로 바꿈
}

5. getElementsByName

해당 name속성을 가진 HTML 요소를 모두 선택한다.

<div name='myname'></div>
<div name='myname'></div>

const els = document.getElementsByName("myname");
for (target of els) {
	print(target)	//각각의 요소 출력
}

6. querySelectorAll

querySelectorAll은 css 선택자를 통해 HTML 요소를 선택한다.

<div class="class1"></div>
<div id="id1"></div>

const el1 = document.querySelector('.class1') // class="class1"인 요소 선택
const el2 = document.querySelector('#id1') // id="id1"인 요소 선택