[JavaScript] DOM(Document Object Model)

DOM(Document Object Mode)

  - 웹 브라우저가 HTML 페이지를 인식하는 방식

  - document 객체와 관련된 객체 집합

  - 모든 태그를 제어 가능하다

  - DOM Level 1 > DOM Level 2 > DOM Level 3

  - 계층 구조로 표현됨

출처: http://www.tcpschool.com/javascript/js_dom_concept

 

 

BOM과 가장 큰 차이

  - BOM은 트리 구조가 고정이기 때문에 태그를 접근하는 방식도 고정되어있다.

  - DOM의 구조는 문서의 태그를 보고 직접 생성하기 때문에 태그를 접근하는 방식이 다양하다.

 

 

DOM에서 제공하는 태그 검색 도구

1. id 검색

//BOM
document.form1.txt1.value = '확인';

//DOM
document.getElementaryById('txt1').value = 'Check';

//BOM으로 찾은 박스와 DOM으로 찾은 박스가 같을까?
alert(document.form1.txt1 == document.getElementById('txt1'));  //true

//모든 태그를 찾아 검색할 수 있다. 제목태그 찾아 가운데 정렬하기
document.getElementaryById('title').align = 'Center';

DOM을 아이디로 검색하는 도구는 document.getElementById('id') 를 사용한다.

태그를 BOM으로 검색하든 DOM으로 검색하든 찾고 난 후의 결과는 동일한 객체이다. 

 

 

2. class 검색

DOM을 클래스로 검색하는 도구는 document.getElementsByClassName('class')를 사용한다.

ID는 유일하니 단수, class는 Elements와 같이 복수로 쓴다. 

//배열 반환
var txts = document.getElementsByClassName('txts');

for(var i=0; i<txts.length; i++) {
	txts[i].value = i;
}

 

 

3. name 검색

호환성 때문에 남겨둔 기능으로 거의 사용하지 않는다.

DOM을 이름으로 검색하는 도구는 document.getElementsByName('name')을 사용한다.

document.getElementsByName('txt1')[0].value = 'BOM';

 

 

4. 태그명 검색

DOM을 태그명으로 검색하는 도구는 document.getElementsByTagName('tag')을 사용한다.

범위가 넓어 원하는 태그만 찾는 것은 힘들기 때문에 많이 쓰이지는 않는다.

var list = document.getElementsByTagName('input');

for (var i=0; i<list.length; i++) {
	list[i].value = i;
}

 

 

5. 선택자 검색

DOM을 선택자로 검색하는 도구는 단수형일때 document.querySelector('selector') / 복수형일때 document.querySelectorALL('selector') 를 사용한다.

//CSS 선택자를 사용해서 JavaScript 검색을 지원
document.querySelector('#txt1').value = 'OK';
document.querySelector('h1').align = 'Center';
document.querySelector('input:last-child').value = 'Last';