포인문으로 엘레먼트의 "속살" 보기

자바스크립트 포인문으로 엘레먼트의 속살을 보는 방법입니다.

http://www.mediaplayer.kr/main/bbs/html_editor.php

위 에디터의 좌측창에 코드를 붙여넣고 결과보기 클릭하면 오른쪽 창에

엘레먼트의 속성과 데이터값이 아주 적나라하게 보여집니다.

먼저 div 를 한번 볼까요?

div 에 아이디를 하나 주고 그 아이디를 가지고서 포인문으로 추적해 봅니다.

괄호안으로는 데이터까지 추출해 보았습니다.

불린이냐, 스트링(문자형)이냐, 넘버(숫자형)이냐, 등등 이런 것이 괄호 안으로 들어갑니다.

-----

<div id=my></div>
<br>
<script>
n = 0;
for (i in my) {
    n++;
    document.write(n + ". " + i + " : " + my[i] + " (" + typeof my[i] + ")<br>");
}
</script>

-----

와우 무려 303개의 기본속성이 div 안에 들어가 있네요.

span 으로 바꾸어 볼까요? 코드의 가장 첫 줄만 아래처럼 바꿔보세요.

<span id=my></span>

img 나 input 같이 태그에 마감이 필요없는 것은 마감을 빼고 살펴보세요.

<span id=my>

<input id=my>

----------

html5 부터는 엘레먼트를 마음대로 만들 수 있습니다.

<wittazzurri id=my></wittazzurri>

그런데 이렇게 임의로 만든 엘레먼트의 속살을 살펴보니...

<span> 태그와 똑같다는 걸 알 수 있습니다.