[JavaScript] HTML DOM 객체 (Document Object Model)

저번 글로 자바스크립트의 객체 모델 두 가지 (DOM, BOM)에 대해 간략히 알아보는 글을 올렸었다. ▼

 

[JavaScript] 자바스크립트의 객체 모델 DOM, BOM

저번글 핵심요약

BOM 객체: 브라우저 창에 대한 객체 / BOM 객체의 최상위 객체는 window 객체

DOM 객체: 브라우저 안에 출력될 HTML 창에 대한 객체 / DOM 트리의 루트는 document 객체

 

이번에는 DOM 객체에 대해 더 자세히 알아보는 글을 쓰겠다.

 

 

 

DOM 객체의 구성요소

ㅁ HTML 태그의 요소

- 태그이름

- 속성

- css 스타일

- 이벤트 리스너 : HTML 태그에 발생한 이벤트

- 콘텐츠(innerHTML) : 시작 태그와 종료 태그 사이에 포함된 HTML 콘텐츠

 

위 5가지 정보들은 모두 DOM 객체의 구성요소가 된다.

 

 

ㅁ DOM 객체의 구성요소

- 프로퍼티 : DOM 객체의 멤버 변수. HTML 태그의 속성 반영

- 메소드 : DOM 객체의 멤버함수. HTML 태그를 제어

- 컬렉션 : 정보를 집합적으로 표현하는 일종의 배열. 예를 들어 childeren 컬렉션은 DOM 객체의 모든 자식 DOM 객체에 대한 주소를 가진다.

- 이벤트 리스너 : HTML태그에 작성된 이벤트 리스너를 그대로 가진다.

- 스타일 : style 프로퍼티를 통해 HTML 태그에 적용된 CSS 스타일 시트에 접근 가능

 

 

ㅁ HTML 태그와 DOM 객체 사이의 관계

 

DOM 객체들은 DOM 트리에서 포함관계를 가지며 서로 부모, 자식, 형제의 관계로 연결되어 있다.

이들은 다음 4가지 프로퍼티가 이용된다.

 

- parentElement - 부모 객체

- children - 직계 자식들의 컬렉션

- firstElementChild - 첫 번째 직계자식

- lastElementChild - 마지막 직계자식

 

그리고 같은 sibling 관계에 있는 DOM 객체들은 다음 2개의 프로퍼티로 접근한다.

 

- previousElementSibling

- nextElementSibling

 

모든 DOM 객체들은 위 6개의 프로퍼티를 가지고 다른 DOM 객체를 쉽게 접근할 수 있다.

아래는 예시 코드이다.

let div = document.getElementById("firstDiv")
let text = "div.id = " + div.id + "\n"
text += "div.childElementCount = "
			+ div.childElementCount + "\n" // id속성이 "fisrtDiv"인 태그를 찾아 자식요소 갯수 찾기

 

 

DOM 객체 다루기

 

ㅁ DOM 객체찾기 : document.getElementById()

 

DOM 트리에서 특정 DOM 객체를 찾아내고 싶을 때, id 속성값을 가지고 찾을 수 있다.

이 때 사용되는 게 getElementById() 함수이다. 이 함수도 document 객체의 멤버이다.

아래 예문을 보자.

let test = document.getElementById("testId") // id값이 "testId"인 태그를 찾아 변수에 저장
test.style.color = "red" // 해당 태그의 color 속성을 "red"로 변경

위의 코드처럼 어떤 객체들끼리 . 으로 연결해 변수 = 객체.객체(.getter()) 형식으로 가져오는 것은 getter,

변수명.속성명(.하위속성명) = "속성값" 형식으로 쓰면 setter가 내부적으로 자동 실행된다.

 

또 다른 방법은 다음과 같이 cssText 프로퍼티에 스타일 시트를 직접 주어도 된다.

teset.style.cssText = "background-color : gray"

 

 

ㅁ innerHTML 프로퍼티

innerHTML 프로퍼티는 시작태그와 종료태그 사이에 들어있는 HTML 콘텐츠를 나타내는 문자열 정보이다.

이 태그를 이용하여 내용을 바꿀수도 있다.

let test = document.getElementById("testId")
test.innerHTML = "바꾸고자 하는 내용의 텍스트"

그런데 단순 텍스트 뿐만 아니라 또다른 태그도 전달해 반영시킬 수 있다.

test.innerHTML = "바꾸고 싶은 <img src='cute.jpg'> 텍스트"

위와 같은 코드를 이용하면 텍스트 사이에 이미지를 삽입한 콘텐츠가 반영되게 된다.

 

 

ㅁ this

Java, C++과 같은 객체지향 언어를 배워본 적 있다면 익숙한 개념일 것이다.

 

this는 객체 자신을 가리키는 자바스크립트 키워드이다.

DOM 객체에서 객체 자신을 가리키는 용도로 사용된다.

<div onclick = "this.style.backgroundColor = 'orange'">

위와 같은 코드가 있다고 했을 때, onclick은 객체를 클릭하는 이벤트가 발생했을 때를 뜻하며

클릭 시 '이 객체의 / style 속성을 / 배경색=오렌지'로 바꾸라는 뜻이 된다.

 

 

 

DOM 객체에 대해 알아보았으니

다음은 document 객체에 대해 좀더 자세히 알아보는 글을 쓰겠다.