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

DOM 객체 찾기, document.getElementById()

<p id="firstP"> 안녕하세요 </p>
<p id="secondP"> 안녕하세요 </p>

/* id 속성 값이 firstP인 DOM 객체를 찾아 글자 색을 red로 변경 */
var p = codument.getElementByID("firstP");
p.style.color = "red" ;

 

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

var span = document.getElementById("mySpan");

span.style.color = "green";
span.style.fontSize = "30px";
span.style.display = "block";
span.style.width = "6em";
span.style.border = "3px dotted magenta";
span.style.margin = "20px";

 

DOM 객체의 CSS3 스타일 프로퍼티 읽기

<span id="mySpan" style="color:red"> 문장입니다. </span>

/* 전형적인 방법 */
var span = document.getElementById("mySpan");
var style = window.getComputedStyle(span);
var value = style.getPropertyValue("color");

/* 간단한 방법. 그러나 셀렉터를 이용하여 CSS3 스타일이 지정된 경우, 사용 불가 */
var span = document.getElementById("mySpan");
var color = span.style.color;

 

 

DOM 객체의 innerHTML 프로퍼티

<p id="firstP" style="color:blue">
	여기에 <span style="color:red"> 클릭하세요. </span>
</p>

var p = document.getElementById("firstP");

var text = p.innerHTML;		
// 변수 text에 <p></p> 사이의 HTML 텍스트를 담을 수 있음.

p.innerHTML = "나의 <img src='puppy.jpg'> 강아지입니다.";		
// <p> 태그의 텍스트를 지우고 강아지 이미지를 삽입.

 

this

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

<!-- this는 button 객체 자신을 가리키며, 버튼이 클릭되면 자신의 배경색을 orange로 바꾼다 -->
<button onclick="this.style.backgroundColor='orange'">