오늘도 어제에 이어서 html DOM에 대하여 알아보도록 하겠습니다.

DOM 객체 다루기

DOM 객체를 이용하여 HTML 페이지에 동적 변화를 주는 방법입니다.

HTML 페이지 내에 같은 태그가 여러개 있다면 id 속성 값으로 구분합니다.

id 속성 값은 html 페이지에서 상호간 고유하게 부여합니다.

같은 id명이라면 문제는 없지만, id를 이용하여 dom 객체를 찾으면 먼저 나온 태그가 찾아지게 됩니다.

DOM 객체를 찾으려면, document.getElementById()를 이용합니다.

document.getElementById("id").style.color = "black";

id 값이 "id"인 dom 객체를 반환하면서 이 스타일 속성의 색상을 검은색으로 바꿉니다.

DOM 객체 CSS 속성 읽기

var value = style.getPropertyValue(“color”);

style 객체의 색상 속성의 값을 가져올 수 있습니다.

innerHTML 속성

시작 태그와 종료 태그 사이에 들어있는 html 내용입니다.

var p = document.getElementById("id");
p.innerHTML= "innerHTML으로 넣습니다.”;

this

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

DOM 객체에서 객체 자신을 가르키는 용도로 사용합니다.

다음편에서 계속됩니다.