JavaScript 출력 방법 中 html DOM innerHTML

이전 게시글에서 document.write()를 다룬 적이 있었다.

https://aldkzm.tistory.com/433?category=738830

그 당시 필자는 이것만 알고 있으면 html에 무리 없이java 값을, 그것도 변경값을 반영할 수 있다 설명했다. 하지만 이는 도큐의 특성을 몰랐을 때 이야기다. 도큐의 특성은 재차 소환 되면 이전 도큐 내용들을 삭제하고 새로운 도큐를 불러온다는 것이다. 예를 들어 html 안에 document.write()를 작동하는 버튼을 만들었다 치고, 이를 누르면 도큐가 작성 된 구간에 새로운 객체가 생기는 것이 아니라, 마치 새로운 페이지에 이동하듯, 모든 내용이 사라지고 새롭게 작성 한 내용만 화면에 출력된다.

 

처음 코드가 읽혔을 때 도큐는 유효하지만, 막상 실시간으로 내용을 업데이트 할 때는 부적합하다.

이에 도큐를 다룰 때 은근슬쩍 넘어 가려했던 아이디를 설정하고 그 아이디를 기준으로 content나 속성값을 변경하는 방법에 대해 서술하도록 하겠다.

 

이름하야, html DOM innerHTML

사용법은 간단하다. 

document.getElementById('').value= ;

이렇게 쓰면 된다.

 

• document, 해당문서(우리가 작성하고 있는 문서) 안에 있는
• getElementById(‘’) 괄호 안에 있는 아이디와 일치하는 요소를 찾아서
• value value라는 태그 요소 값을‘=’ 뒤에 있는 값으로 대체한다.

 

 

html DOM innerHTML 특성상 문서가 작성 된 뒤에도 다른 요소들에 간섭 없이 해당 아이디로 맺어진 계약에 따라 그 요소 값만 변경한다.

예제는 왼쪽 오로치마루에서 vod, anime, webtoon/mangga를 따라가서 각 종 검색기를 참고하면 된다.

이전에는 도큐만을 사용하여, 새로고침을 해야 결과값을 참조할 수 있었지만, 지금은

새로고침 없이 북마크를 통한 변경 사항이 바로 적용 된다.(덤으로 요일도 북마크 되도록 집어넣었다.) 

지금 이 기술을 응용한다면 현재 북마크 5개 제한을 무한으로 늘릴 수 있지만 일단은 그만두기로 했다. 각 검색기마다 북마크를 5개 제약으로 걸어 놓은 이유는 여러 사이트를 이용하라는 의미다. 한쪽만 이용하면 한쪽만 흥하고 결국 다른 사이트는 사라지기 때문에 마루마루 같은 사태를 방지하기 위해서는 님들이 평소 한 두 개 이상 여러 사이트들을 이용해야 한다.

 

조금 더 구체적인 예를 든다면,

document.getElementById(‘대게’).value=’강구풍물지하어시장‘;

document.write(‘<input type=’button‘ id=’대게‘ value=’포항대게횟집‘/>’);

이정도로 작성하면 될 듯하다.

 

뒤의 .value는 각 태그마다 바꾸고자 하는 속성(요소) 값으로,(요소)값으로, 만약 width값을 바꾸고 싶다면,

document.getElementById().style.width=;

이렇게 기입하면 되고,

content 값을 바꾸고 싶다면,

document.getElementById().innerHTML=“”;

이렇게 작성하면 된다. 이렇게 한다면 태그 사이에 있는 content(innerHTML) 값이 변경된다..

이를 응용하면 <div> 태그 안에 새로운 html태그들을 작성하여 마치 도큐처럼 쓸 수 있지 않을까 생각해 봤지만 안 되는 듯하다.. 왠지 아쉽다.

 

물론 값을 넣을 수 있으면 반대로 값을 불러 올 수도 있다.

var value = document.getElementById().value;
var value = document.getElementById().innerHTML;

결국 코드값은 그저 주소 값을 이리저리 굴리는 것이니

당연한 결과이다.