JavaScript DOM
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>
4、JS提交表单
<div> <form id="form1" action="https://www.sogou.com/web" method="get"> <input name="query" type="text"/> <div onclick="Submit();">提交</div> </form> </div> <script type="text/javascript"> function Submit(){ document.getElementById('form1').submit(); } </script>
加入判断，表格内容为空时，禁止提交
<body> <form action="http://www.sogou.com/web" method="get"> <input name="query" type="text"/> <input type="submit" onclick=" return sub();" value="submit"/> </form> <script> function sub(){ var q = document.getElementsByName('query')[0]; if(q.value.trim()){ return true; }else { alert('wrong'); return false; } } </script> </body
5、跑马灯 计时器:setInterval()
<script> setInterval('run()',1000); //定时器，每1000毫秒执行一次run()函数 function run(){ var text = document.title; //获取title值，html中只有一个title，可以直接获取 var FisrtChar = text.charAt(0); //获取title值的第一个字符 var subText = texbText + FisrtChar;//拼接成新的title document.title = newTitle;//赋值 } </script>
停止定时器 clearInterval()
<body> <input type="submit" value="STOP" onclick="stopinterval();"/> <script>
obj = setInterval('run()',1000); //定时器，每1000毫秒执行一次run()函数 function run(){ var text = document.title; //获取title值，html中只有一个title，可以直接获取 var FisrtChar = text.charAt(0); //获取title值的第一个字符 var subText = text.substring(1,text.length);//获取title值第二个到最后的字符 var newTitle = subText + FisrtChar;//拼接成新的title document.title = newTitle;//赋值 } function stopinterval(){ clearInterval(obj); }
</script>
只执行一次定时器
setTimeout('run()',1000);
