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);