1. HTML 요소 내용을 바꿀 수 있다.
getElementById() : 특정 태그 ID 의 요소
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- 자바스크립트는 HTML 요소 내용을 바꿀 수 있다 -->
<h2>What Can JavaScript Do?</h2>
<p id = "demo">JavaScript can change HTML content.</p>
<button type="button" onclick="document.getElementById('demo').innerHTML = 'Hello JavaScript'">
Click Me!
</button>
</body>
</html>
처음 나타는 화면에서는 id= 'demo'의 초기 설정 값이 나타남.
<p id = "demo">JavaScript can change HTML content.</p>
버튼 클릭시 : Id ="demo"의 값이 hello JavaScript로 변경되어 있음.
2. HTML 속성을 바꿀 수 있다.
img 태그의 속성(src) 값을 바꿈
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h2>How Are you?</h2>
<button onclick="document.getElementById('myImage').src='../../images/smile.png'">smile</button>
<img alt="" src="../../images/smile.png" style="width:100px" id="myImage">
<button onclick="document.getElementById('myImage').src='../../images/sad.png'">sad</button>
</body>
</html>
3. HTML 스타일(CSS)를 바꿀 수 있다.
버튼 클릭시 (id=demo)의 요소에 style.display='none'를 반영해줌.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h2>What Can JavaScript Do?</h2>
<p id = "demo">JavaScript can hide HTML elements</p>
<button type="button" onclick="document.getElementById('demo').style.display='none'">Click Me!</button>
</body>
</html>
