[JavaScript] 브라우저 제공 내장 객체 : DOM 객체

DOM (Document Object Model)

• 자바스크립트 입장에서 웹문서를 객체 형태로 다루는 모델
• HTML DOM은 객체는 브라우저가 HTML 태그마다 하나의 객체로 만든 것이다.
• <p> ... </p>로 구성된 요소는 p객체로, <div> ... </div>로 구성된 요소는 div 객체로 생성한다.
• 자바스크립트를 통해 DOM의 내용을 추가/변경 → HTML 문서의 태그, 콘텐츠, 디스플레이 되는 내용 변경

 

DOM의 트리구조

• 브라우저가 HTML 페이지를 로드하면서 HTML 태그의 포함 관계에 따라 DOM 객체들을 트리(tree)구조로 만든다. 자바스크립트 코드는 이 DOM 트리를 따라 DOM 객체들을 마음대로 접근할 수 있게 한다.
• 노드 : HTML 태그 요소 (속성, 속성값으로 구성)
• DOM 트리의 루트는 document 객체이다. 하지만 document객체는 DOM 객체는 아니다.
• HTML 태그의 포함관계에 따라 부모 자식 관계로 구성된다.
• HTML 태그로부터 먼저 DOM 객체를 생성하고 DOM 트리를 구성한 후, DOM 객체를 화면에 출력한다. HTML 페이지는 로드된 후 사라지며, 브라우저에는 DOM 객체와 DOM 트리만 존재한다.

 

DOM 트리의 루트는 document 객체.

 

DOM 객체의 구성요소

• 프로퍼티 (property) : DOM 객체의 멤버 변수. HTML 태그의 속성(attribute)들을 반영.
• 메소드 (method) : DOM 객체의 멤버 함수. HTML 태그를 제어.
• 컬렉션 (collection) : 동일한 HTML 태그 이름을 가진 DOM 객체들의 배열. [ ]와 인덱스를 이용하여 접근.
• 이벤트 리스너 (event listener) : 이벤트(사용자의 입력 행위)를 처리하는 자바스크립트 코드.
• CSS3 스타일

 

  < W3C에서 표준화한 DOM 객체의 주요 공통 프로퍼티, 컬렉션, 메소드 >

	프로퍼티	설명	r/w
기본	id	태그의 id 속성 값	r/w
	lang	태그의 lang 속성 값	r/w
	style	style 객체에 대한 레퍼런스	r/w
	title	태그의 title 속성 값	r/w
	tagName	태그 이름 문자열. 항상 대문자로 표시됨. (SPAN, DIV 등)	r
	innerHTML	시작 태그와 종료 태그 사이의 HTML 텍스트	r/w

 

DOM 트리 관련	childElementCount	자식 DOM 객체 개수	r
	firstElementChild	첫 번째 자식 객체	r
	lastElementChile	마지막 자식 객체	r
	nextElementSilbling	다음 형제 객체. 오른쪽 형제	r
	parentElement	부모 객체	r
	previousElementSibling	이전(왼쪽) 형제 객체	r

 

크기와 위치	offsetHeight	패딩, 테두리, 스크롤바를 포함한 높이	r
	offsetWidth	패딩, 테두리, 스크롤바를 포함한 폭	r
	offsetLeft	객체의 출력 위치. 수평 옵셋	r
	offsetTop	객체의 출력 위치. 수직 옵셋	r

 

컬렉션	설명
children	자식 DOM 객체들의 컬렉션 (자식들을 가리키는 레퍼런스 배열)

 

메소드	설명
addEventListener()	새로운 이벤트 리스너 등록
appendChild()	마지막 자식 뒤에 새로운 자식 추가
click()	사용자가 마우스를 클릭한 것과 동일한 작업 수행
focus()	키 입력을 받을 수 있도록 이 객체에 포커스 지정
setAttribute()	속성 추가
insertBefore()	지정된 자식 앞에 새 자식 추가
querySelector()	지정된 CSS3 셀렉터와 일치하는 첫 번째 자식 리턴
removeChild()	자식 삭제
replaceChild()	자식 대체
removeEventListener()	addEventListener()로 등록한 이벤트 리스너 제거
getAttribute()	속성 알아내기