value 와 text, 그리고 innerHTML

value 와 text, 그리고 innerHTML

아래 태그들에 대해서 value, text, innerHTML 값을 알아봅니다.


div 태그에도 value 속성을 줄 수 있습니다. span 태그도 div 태그와 결과가 동일합니다.
화면 제어용 컨트롤 태그가 아닌 경우 모두 동일하게 적용되는 것으로 보입니다.
<div value="123" onClick="alert('value:'+this.value+'\ntext:'+this.text+'\ninnerHTML:'+this.innerHTML)">abc</div>
 


input 태그는 type 이 checkbox/radio/text/password 등 어떤 것이든 다음과 같이 나옵니다.
주의할 것은 radio 타입을 사용할 때는 name 이 동일하면 같은 그룹으로 묶이고 정상적으로 사용되지만,
checkBox 타입인 경우에는 정상적으로 작동하지 않을 수 있습니다. 배열 개념을 사용하면 되지만.. 아무튼 조심.
file 타입인 경우 최초에는 value 가 없지만, 파일을 선택한 다음에는 해당 파일의 fileSpec (경로 포함 파일명)이 됩니다.
<input name="c1" type="checkbox" value="123" onClick="alert('value:'+this.value+'\ntext:'+this.text+'\ninnerHTML:'+this.innerHTML)">abc</input>
<input name="c1" type="checkbox" value="123" onClick="alert('value:'+this.value+'\ntext:'+this.text+'\ninnerHTML:'+this.innerHTML)">abc</input>
<input name="r1" type="radio" value="123" onClick="alert('value:'+this.value+'\ntext:'+this.text+'\ninnerHTML:'+this.innerHTML)">abc</input>
<input name="r1" type="radio" value="123" onClick="alert('value:'+this.value+'\ntext:'+this.text+'\ninnerHTML:'+this.innerHTML)">abc</input>
<input type="text" value="123" onClick="alert('value:'+this.value+'\ntext:'+this.text+'\ninnerHTML:'+this.innerHTML)">abc</input>
<input type="password" value="123" onClick="alert('value:'+this.value+'\ntext:'+this.text+'\ninnerHTML:'+this.innerHTML)">abc</input>



textarea 태그는 value 속성을 설정해 주었음에도 불구하고 value 에 innerHTML 과 동일한 값이 들어갑니다.
<textarea value="123" onClick="alert('value:'+this.value+'\ntext:'+this.text+'\ninnerHTML:'+this.innerHTML)">abc</textarea><br>



img 태그는 input 태그와 동일한 방응을 합니다.
<img src="http://icon.daum-img.net/top/cms/news/2009/10/nano116483833044956.jpg" value="123" onClick="alert('value:'+this.value+'\ntext:'+this.text+'\ninnerHTML:'+this.innerHTML)">abc</img>



select 태그도 재미있습니다.
<select onChange="alert('value:'+this.value+'\ntext:'+this.text+'\ninnerHTML:'+this.innerHTML)">
<option value="1">a</option>
<option value="2">b</option>
<option value="3">c</option>
</select>



()()   v
(~.~)()
이상입니다. 행복하세요..