DOM
实例:
1、点击页面‘+1’按钮后,使页面上显示的数字加1
<body>
<div>
<div id="num">1</div>
<input type="button" value="+1" onclick="add();"/> <!--点击button后,执行onclick后面的函数-->
</div>
<script type="text/javascript">
function add(){ //定义add()函数
var nid = document.getElementById(‘num‘); //获取id为num
var text = nid.innerText; //获取标签的文本值
text = parseInt(text); //字符串转换成整型
text +=1;
nid.innerText=text; //更改num的值
}
</script>
</body>
innerTEXT与innerHTML:
innerTEXT获取的是两个标签之间的纯text文本,不包含这其中的html标签
innerHTML获取的是两个标签之间的所有的内容,包括text和html标签
对于用户输入或选择的值,获取其中的值时使用value。
2、获取input 输入值
<div>
<input type="text" id="in1"/>
<input type="button" value="getvalue" onclick="getvalue();"/>
</div>
<script type="text/javascript">
function getvalue(){
var obj = document.getElementById(‘in1‘);
alert(obj.value);
}
</script>
3、搜索框实例
<div>
<input type="text" id="in2" value="input your search:" onfocus="Focus();" onblur="Blur();"/>
</div>
<script type="text/javascript">
function Focus(){
var nid = document.getElementById(‘in2‘);
var value = nid.value;
if(value == ‘input your search:‘){
nid.value = ‘‘;
}
}
function Blur(){
var nid = document.getElementById(‘in2‘);
var value = nid.value;
if(value.trim()== ‘‘){ //.trim()去空格
nid.value = ‘input your search:‘
}
}
</script>
原文:http://www.cnblogs.com/ahaii/p/5527952.html