자바스크립트 getElementById()

코딩하는망아치 2021. 3. 12. 14:35

먼저 getElementById()라는 메서드를 알아보겠다.

말그대로 getElementById()는 id로 element를 가져온다 라는뜻

코드

<!DOCTYPE html>
<html>
<body>

<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>

실행 전 모습

실행 후 모습

위의 코드에서 보았듯이 <p>태그의 id가 demo인걸 알수있고 버튼을 클릭하면 onclick='document.getElementById("demo").innerHTML = "Hello JavaScript!"' 이부분에 의해서 p태그 안의 내용이 바뀌는걸 알수 있다.

텍스트 뿐만 아니라 이미지 태그도 적용가능하다

코드

<!DOCTYPE html>
<html>
<body>

<h2>What Can JavaScript Do?</h2>

<p>JavaScript can change HTML attribute values.</p>

<p>In this case JavaScript changes the value of the src (source) attribute of an image.</p>

<button onclick="document.getElementById('myImage').src='pic_bulbon.gif'">Turn on the light</button>

<img id="myImage" src="pic_bulboff.gif" style="width:100px">

<button onclick="document.getElementById('myImage').src='pic_bulboff.gif'">
	Turn off the light
</button>

</body>
</html>

실행전 모습

실행후 모습