DOM 프로퍼티 값의 타입

태그속성의 값의 타입은 문자열이다.
DOM객체 프로퍼티 값의 타입은 여러가지다.

<input id="input" type="checkbox" checked> checkbox

<script>
  alert(input.getAttribute('checked')); // 속성 값: 빈 문자열
  alert(input.checked); // 프로퍼티 값: true
</script>

boolean, string, number의 원시값을 가질 수 있다.

<div id="div" style="color:red;font-size:120%">Hello</div>

<script>
  // string
  alert(div.getAttribute('style')); // color:red;font-size:120%

  // object
  alert(div.style); // [object CSSStyleDeclaration]
  alert(div.style.color); // red
</script>

스타일속성값의 타입은 문자열이지만 DOM객체 프로퍼티값의 타입은 객체다.

<a id="a" href="#hello">link</a>
<script>
  // 속성
  alert(a.getAttribute('href')); // #hello

  // 프로퍼티
  alert(a.href ); // 실행되는 사이트 주소에 따라 http://site.com/page#hello 형태로 값이 저장됨
</script>

a태그 속성은 '#hello' 문자열이지만 a객체 프로퍼티는 http://site.com/page#hello 형태로 url이 추가된다.