[강좌 002] 자바스크립트로 할 수 있는 것은 뭘까요?



자바스크립트는 DOM(HTML 요소들에 접근하기 위한 기준 모델)을 사용함으로써 HTML을 변화시키고 제어할 수 있습니다. 즉 HTML의 내용, 속성, Style, 기타등등 것들을 직접적으로 변경시키거나 조절 가능하다는 말입니다.

내용을 바꾸는 예시

document.getElementById("test").innerHTML = "요것은 테스트 입니다.";
위의 예제는 document.getElementById()를 이용해서 "test"라는 id를 찾아서 텍스트를 바꾸는 내용입니다.

스타일을 바꾸는 예시
document.getElementById("test").style.fontSize = "30px";
태그 id중에 "test"를 찾아서 폰트크기를 30px로 바꾸라는 내용입니다.
★ 자바스크립트는 대소문자를 구분하는 언어입니다. 따라서 getElementById를 GETelementbyID로 쓰게 되면  에러가 납니다. (Case-sensitive Language)


위의 예시를 실행 보죠.

나는 HTML P태그 입니다.



<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <button type="button" onclick="myTest_text()">text변경</button>
  <button type="button" onclick="myTest_style()">style변경</button>
  <p id="test">나는 HTML P태그 입니다.</p>
 
  <script>
    function myTest_text(){ document.getElementById("test").innerHTML="This is Test."; }
    function myTest_style(){ document.getElementById("test").style.fontSize = "30px";  }
  </script>

</body>
</html>


즐거운 하루되세요. Vanxy..


자바스크립트/Learn 다른 글

댓글 2

*

*