반응형
자바스크립트는 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>
<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..
반응형
