수라의 티스토리

자바스크립트가 강력해 지면서 DOM을 다루는 스크립트를 많이 사용하곤 한다. Ajax를 하면 특히 많이 사용하기도 하고 그 외에 편리한 UI를 위해서 동적(Dynamic)으로 자바스크립트를 이용해서 HTML의 내용을 바꾸거나 구조를 변환하거나 한다. 여기서 동적이라는 의미는 HTML문서를 작성할때 HTML코드를 입력한 것이 아니라 HTML페이지의 랜더링 후에 페이지를 사용하면서 스크립트를 이용해서 순간순간 바꾼다는 뜻이다.

이런 부분이 자바스크립트가 재밌는 점이기도 하면서 잘 활용하면 여러가지 편리한 인터페이스나 효과를 제공할 수 있다.

하지만 이렇게 동적으로 바꾸었다고 하더라도 브라우저에서 제공하는 "소스보기"를 하면 처음 작성한 HTML코드만 나올뿐 동적으로 생성한 코드를 볼 수가 없다. 동적으로 생성한 HTML이 내가 의도한 대로 잘 안나오면 간단한 것은 스크립트 부분을 보면서 해결할 수 있지만 소스가 복잡하다면 스크립트코드만 보면서 생성되는 HTML코드를 예상하는 것은 생각처럼 만만치 않을 때가 있지만 실제로 생성된 HTML코드를 볼 수 있다면 디버깅하는데 훨씬 편리할 수 있다.(왠만한 HTML Syntax에러는 에디터에 붙혀만 넣어놔도 발견할 수 있으니까....)

이게 불가능 한 줄로만 알고 있었는데 동적으로 생성한 코드를 볼 수 있는 방법이 있다.

document.documentElement.innerHTML

위 코드를 실행하면 현재 눈에 보이는 랜더링상태의 HTML코드를 볼 수 있다.

간단하게는

alert(document.documentElement.innerHTML);

를 통해서 볼 수 있지만 이렇게 할 경우 일단 줄바꿈이 제대로 되지 않으며 alert창에서는 복사를 할 수도 없고 또 긴코드는 alert창으로 다 볼 수도 없다. alert창에는 스크롤이 없으므로....(테스트 중인게 아니라면 대개의 경우 alert에서 보여줄 수 있는 야을 넘어갈 것이다.

그래서 동적으로 생성되는 코드를 볼 수 있도록 간단한 예제를 만들어 보았다.

document.documentElement.innerHTML에서 나온값은(head~/body 까지 나온다.) html코드이기 때문에 일반적인 방법으로 페이지에 찍어내도 다시 렌더링 되어버려서 소스코드를 볼 수가 없다.(결국 이것도 동적으로 생성한 것이니까...) 소스를 볼 수 있는 <xmp></xmp>코드를 이용해서 HTML코드가 찍히도록 할 수도 있는데 보통의 HTML페이지 소스에서는 스크립트 코드가 당연히 들어가 있을 것이기 때문에 </script>부분에서 결국 깨져버린다.

위의 예제에서는 textarea를 이용했다. textarea에 찍으면 html코드도 그대로 찍히니까 가장 간단한 방법일 것이다. 복사해서 에디터쪽에 붙히기만 하면 되니까....  예제를 약간 설명(?)하면 div를 하나두고 그안에 있는 change버튼을 누르면 div안의 내용을 스크립트를 이용해서 바꾸어 주었고 소스보기 버튼을 누르면 현재상태의 html코드가 textarea에 찍히는데 change버튼을 누르기 전에 소스보기를 눌러보고 바꾼 후에 눌러보면 쉽게 달라진 점을 비교할 수 있을 것이다.

귀찮아서 그렇게 까지는 안했지만 일반적으로 게시판에디터에서 하듯이 document.documentElement.innerHTML에서 나온 값의 태그가 동작하지 않도록 &lt; &gt;등으로 바꾸어줘서 찍어주는 방법도 있을 것이다.

머 보여주는 방법보다는 일단 본수 있다는게 중요한거니까.. ㅎㅎㅎ