자바스크립트로 HTML에서 특정 id의 텍스트 바꾸기

자바스크립트는 HTML을 조작할 수 있는 프로그래밍 언어임

 

바로 예제 갈길게여

<h1 id="insa">
  안녕?
</h1>

<script>
  document.getElementById('hello').innerHTML = '안녕하세요?';
</script>

위 예제를 돌리면 우리는 insa라는 id를 가진 태그의 내용물을 '안녕하세요?'라는 텍스트로 바꿀 수 있음

 

이게 가능한 이유가 저기 <script>태그 안에 들어있는 자바스크립트 코드 덕분인데

눈치빠른 사람들은 바로 알겠지만 자바스크립트 코드가

document.getElementById('태그명').innerHTML = '텍스트';

형태로 작성되어있다.

 

여기서 document는 HTML문서를 의미하고

getElementById는 앞에 붙어있는 document와 결합하여 HTML문서에서 ID를 기준으로 태그를 선택해준다.

 

그리고 innerHTML을 이용하여 선택한 태그의 내용물을 바꿔줄 수 있다.

 

아주 간단함.

 

아 물론 딴것도 바꿔줄 수 있는데

<h1 id="insa">
  안녕?
</h1>

<script>
  document.getElementById('hello').style.color = 'yellow';
</script>

이렇게 글자 색도 바꿔줄 수 있음.

style 옵션 뒤에 color도 넣을 수 있고, background-color, font-size 등 CSS 옵션을 넣을 수 있다.

 

아주 간단함.