[객체] 2. HTML DOM 객체 - 2) DOM 객체 다루기

- DOM 객체를 활용하여 HTML 페이지에 동적인 변화를 주는 방법

 

1. DOM 객체 구분, id 속성

- HTML 페이지 내에 같은 HTML 태그가 여러 개 있는 경우 id 속성 값으로 구분한다.

- ★ id 속성 값은 HTML 페이지 내에서 유일하도록 작성되어야 한다.

- 만일 동일한 id 값을 가진 태그가 여러 개 있는 경우 화면에 출력되는 것에는 문제가 없으나 

id 속성 값을 이용하여 DOM 객체를 찾을 때 HTML 페이지에 먼저 나온 태그가 항상 찾아지게 되는 문제가 있음

 

2. DOM 객체 찾기- document.getElementById()

- DOM 트리에서 특정 DOM 객체를 찾아내는 방법에서 가장 간단한 방법

document.getElementById(idVal)
//idVal : 찾고자 하는 객체의 id 속성 값, 문자열
//idVal 값을 가진 객체가 없다면 null을 리턴
// 같은 값을 가진 객체가 여러 개 있다면 HTML 페이지에 먼저 등장하는 객체를 리턴

- 자바스크립트 코드 사례

var p = document.getElementById("firstP"); //id 속성 값이 firstP인 DOM 객체 p 리턴
p.style.color = "red"; // p 객체의 글자 색을 red로 변경

- 이것은 한 줄로 작성할 수도 있음

document.getElementById("firstP").style.color = "red";

 

3. DOM 객체의 CSS3 스타일 동적 변경

- HTML 문서에서 CSS3 스타일 시트의 프로퍼티는 background-color나 border-bottom 등과 같이 하이픈(-)으로 구성되지만, style 객체에서는 하이픈(-) 없이 backgroundColor나 borderBottom 과 같은 이름의 프로퍼티를 사용함

obj.style.backgroundColor="green"; // DOM 객체 obj의 배경을 green 색으로 설정

// 또 다른 방법

obj.style.cssText="background-color :  green " ;

4. DOM 객체의 innerHTML 프로퍼티

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

 

5. this

- this는 객체 자신을 가리키는 자바스크립트 키워드로서, DOM 객체에서 객체 자신을 가리키는 용도로 사용된다.

<div onclick="this.style.backgroundColor='Orange'"></div>
//여기서 this는 div 객체 자신을 가리킨다.