HTML DOM을 이용한 HTML 변경

JS와 HTML DOM에 대해 처음부터 언급할 때 7가지의 내용이 있었는데요.
간략하게 빠르게 정리하면, HTML안의 요소나 속성의 값을 추가, 제거, 변경할 수 있고, 스타일도 변경할 수 있으며, 이벤트에 대한 처리, 추가도 가능했습니다.

다음은 JS로 HTML을 변경하는 방법에 대해 알아보겠습니다.

document.write()

HTML 아웃풋 스트림으로 바로 값을 쓸 수가 있는데, 이미 document가 로딩이 완료된 상황에서 쓰면 document 전체가 덮어쓰기 될 수 있으니 조심해야 합니다.

document.write(Date());

innerHTML

계속해서 적었지만 태그안의 내용물을 바꿀 때는 innerHTML을 사용합니다.

document.getElementById(id).innerHTML = new HTML

attribute

속성값을 바꿀때는 attribute를 사용합니다.

document.getElementById(id).attribute = new value

예를 들어 myImg라는 아이디를 쓰는 이미지에 대한 attribute를 추가한다고 가정해봅시다.
1. HTML 문서는 id="myImg"인 <img> 요소를 포함하고 있습니다.
2. HTML DOM을 사용해 id="myImg"를 가지는 <img> 요소를 가져옵니다.
3. Javascript를 이용해 DOM을 가져와서, 속성 부분을 바꿔줍니다.