javascript - DOM问题：点击按钮的时候，修改input元素的value属性值，为什么在HTML结构上没有变化？
代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
span{background:lime;}
</style>
<script>
window.onload=function(){
//获取input、span
var oTxt=document.getElementsByTagName('input')[0];
var oBtn=document.getElementsByTagName('span')[0];
//span在点击的时候，修改input的value值，
//且给input加一个类“on”
oBtn.onclick=function(){
oTxt.value=10;
oTxt.className='on';
};
};
</script>
</head>
<body>
<input type="text" value="哈哈" />
<span>onclick</span>
</body>
</html>未点击onclick时，input元素的状态（下图）：
点击onclick，修改input的value属性，并且加个class，名为“on”。此时input元素的状态（下图）：
**input元素的class=“on”，oTxt.className='on';语句生效。
input元素的value=“哈哈”没有发生变化，但是页面显示中，value已经是10。都是修改input的属性，请问为什么className能在HTML中有所体现，而value却仅仅在页面中发生变化呢？谢谢！**
