HTML DOM学习笔记 <html> <head> <title>HTML DOM学习笔记</title> <meta http-equiv="pragma" content="no-cache" /> <meta http-equiv="content-type" content="text/html; charset=gb2312" /> <script type="text/javascript"> function checkTime(i){ if (i<10) { i="0" + i } return i } function open_win(){ x=document.URL; window.open(x,"_blank","toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=no, copyhistory=no, width=400, height=400") } function disp_prompt(){ var name=prompt("请输入您的名字","iiiii") if (name!=null && name!=""){ alert("你好，" + name + "！我问候你") } } function show_confirm(){ var r=confirm("你确定?"); if (r==true){ //使用强制刷新,这个方法是从DiscuzX里面学到的。 top.window.location.href = top.window.location.href; //不使用强制刷新 //window.location.reload(); }else{ alert("下次想好了点我。"); } } function checkLen(x,y){ if(y.length==x.maxLength){ var next=x.tabIndex; //alert(document.getElementById("sninput").length); if (next<document.getElementById("sninput").length){ document.getElementById("sninput").elements[next].focus() } } } function toup(){ var x = document.getElementById('myList'); var i = x.options.selectedIndex; var j = i-1 if(i>0){ Temp_Text = x.options[j].text; Temp_Value = x.options[j].value; x.options[j].text = x.options[i].text; x.options[j].value = x.options[i].value; x.options[i].text = Temp_Text; x.options[i].value = Temp_Value; x.selectedIndex=j; } } function todown(){ var x = document.getElementById('myList'); var i = x.options.selectedIndex; var z = x.options.length-1; var j = i+1; if (i < z){ Temp_Text = x.options[i].text; Temp_Value = x.options[i].value; x.options[i].text = x.options[j].text; x.options[i].value = x.options[j].value; x.options[j].text = Temp_Text; x.options[j].value = Temp_Value; x.selectedIndex=j; } } function totop(){ var x = document.getElementById('myList'); var i = x.options.selectedIndex; if(i > 0){ Temp_Text=x.options[i].text; Temp_Value=x.options[i].value; for(j=i;j>0;j--){ x.options[j].text=x.options[j-1].text; x.options[j].value=x.options[j-1].value; } x.options[0].text=Temp_Text; x.options[0].value=Temp_Value; x.selectedIndex=0; } } function toend(){ var x = document.getElementById('myList'); var i = x.options.selectedIndex; var z = x.options.length if(i < z-1 ){ Temp_Text=x.options[i].text; Temp_Value=x.options[i].value; for(j=i;j<z-1;j++){ x.options[j].text=x.options[j+1].text; x.options[j].value=x.options[j+1].value; } x.options[z-1].value=Temp_Value; x.options[z-1].text=Temp_Text; x.selectedIndex=(z-1); } } function addinput(){ var x=document.getElementById('myList'); y=x.options.length; z=document.getElementById('favorite-value').value; o=document.getElementById('favorite').value; if ((!z)||(!o)){ alert("输入区域为NULL,请补完!"); return false; } //第一个TRUE是(默认被选项，即焦点的在项，只有一个)defaultselected，相当于 <option selected></option> //第二个TRUE是被选择项（可多行被选择），用于multiple模式 newoption=new Option(o,z,false,true); if(hasOption(o)){ alert("已经存在"); }else{ x.options[y]=newoption; alert(o+"已经添加"); //x.options.selectedIndex=y; } } function hasOption(str){ for(var i=0;i<document.getElementById('myList').options.length;i++){ x=document.getElementById('myList').options[i].text if(x == str){ return true; } } return false; } function delsel(){ var x=document.getElementById('myList').options.selectedIndex; if(x==-1){ alert("请先选中"); }else{ document.getElementById('myList').options[x] = null; } } function addopt(){ var x=document.getElementById('myList'); var index=x.options.length var newoption=new Option('Internet Explorer',index+1,false,false); if (hasOption('Internet Explorer')){ alert("你瞎子啊"); }else{ x.options[index]=newoption; alert("Internet Explorer已添加！"); x.options.selectedIndex=index; } } function delopt(){ nextindex=document.getElementById('myList').options.length; for(var i=0;i<nextindex;i++){ x=document.getElementById('myList').options[i].text; if(x == "Internet Explorer"){ document.getElementById('myList').options[i]=null; //也可以用x.remove(x.selectedIndex) alert("Internet Explorer已移除！"); return true; } } alert("你瞎子啊!"); } function checkform(){ alert("这个表单不允许提交"); //阻止提交表单 return false; } function whichButton(event){ //getEventType可以获取事件名称 switch(event.button){ case 0: { alert("左键") } break; case 1: { alert("中键") } break; case 2: { alert("右键") } break; default:{ alert("OOXX键") } } } function shownumb(){ var n=document.getElementById("youin").value; var x=document.getElementsByName(n); document.getElementById("result").value=x.length } function showtitle(){ if (document.getElementById('istitle').innerHTML == document.title){ document.getElementById('istitle').innerHTML=''; document.getElementById('buttontitle').value="显示标题" }else{ document.getElementById('istitle').innerHTML=document.title document.getElementById('buttontitle').value="隐藏标题" } } function getfocus(){ if (document.activeElement.id !== "myAnchor"){ document.getElementById('myAnchor').focus() //document.write(document.hasFocus()); //document.getElementById('buttonf').value="解除关注" //}else{ } } function losefocus(){ document.getElementById('myAnchor').blur() //document.getElementById('buttonf').value="再关注我" } function changeLink(){ var url=document.getElementById('myAnchor').href //var description=document.getElementById('myAnchor').innerHTML if (url == "http://google.com/"){ url="http://ihipop.info/" description="访问ihipop.info" buttoncvalue="变回去" }else{ url="http://google.com/" description="访问Google" buttoncvalue="再变一次" } document.getElementById('myAnchor').innerHTML=description document.getElementById('myAnchor').href=url document.getElementById('myAnchor').target="_blank" document.getElementById('buttonc').value=buttoncvalue } </script> </head> <body> <table align="center"> <tr> <td> <div id="istitle"></div> <script type="text/javascript"> document.getElementById('istitle').innerHTML=document.title </script> <!--这个函数只有在id为istitle的DOM生成以后才会起作用，所以要放在后面--> <a id="myAnchor" name="link" href="http://google.com/">访问Google</a> <input id="buttonc" type="button" onclick="changeLink()" value="点我改变连接"> <input id="buttonf" type="button" onclick="getfocus()" value="关注我"> <input id="buttond" type="button" onclick="losefocus()" value="不关注我"> <input id="refresh" type="button" onclick="show_confirm()" value="页面刷新"> <input id="inputvalue" type="button" onclick="disp_prompt()" value="问候你"> <input id="opennew" type="button" onclick="open_win()" value="在迷你中打开"> <input type="button" value="打印本页" onclick="window.print()" /> <br /> <input id="buttontitle" type="button" onclick="showtitle()" value="标题控制"> <!--resizeTo(500,300)则可以指定大小--> <input type="button" value="变形" onclick="window.resizeBy(-100,-100)" /> <script type="text/javascript"> document.write("<br />") document.write("网址是:") //和innerHTML一样，URL区分大小写 document.write(document.URL) document.write("<br />") document.write("引用页:") document.write(document.referrer) document.write("<br />") document.write("域名:") document.write(document.domain) </script> <br /> 有<input id="result" name="isinput" alt="isinput" type="text" size="5" onmouseover="shownumb()" readonly/>个名字叫<input id="youin" name="isinput" type="text" size="12" value="isinput" />的输入框？ <br /> <script type="text/javascript"> var txt="在这里用js增加一个锚点" document.write(txt.anchor("jsanchor")) </script> 所以目前有<script type="text/javascript">document.write(document.anchors.length)</script>个锚点。 <br /> 摸摸我你可以知道第一个锚点的innerHTML是:<div id="anchorshtml" onmouseover="this.innerHTML=document.anchors[0].innerHTML"><script type="text/javascript"> document.write(document.anchors[0].innerHTML) </script></div> <hr /> <!--onsubmit事件发生在submit之前，可以用来做提前的合法性检查--> <form id="Form1-id" name="Form1-name" method="POST" action="http://211.65.64.7/SysLogin.cgi" onsubmit="return checkform()" > <p>这个表单的名字是： <input name="inform" type="text" size="5" readonly onmouseover="this.value=document.forms[0].id;this.size=this.value.length" /></p> <input type="button" id="js-subit" name="js-subit-name" value="用this.parentNode.submit()提交这个表单,无法发生onsubmit事件" onclick="this.parentNode.submit()" /> <input type="submit" id="subit" name="subit-name" value="这是一个提交按钮,可以有onsubmit事件" /> <input type="button" id="js-onsubit" name="js-on-subit-name" value="用this.parentNode.onsubmit()提交这个表单,然后根据返回值提交表单值" onclick="if (this.parentNode.onsubmit()){this.parentNode.submit()}" /> </form> <form name="choose"> <!--onchange事件--> <table> <tr> <td valign="middle" align="center"><br /> <input type="button" onclick="toup()" value="↑"><br> <input type="button" onclick="todown()" value="↓"><br> <input type="button" onclick="totop()" value="♂"><br> <input type="button" onclick="toend()" value="♀"> </td> <td> <div><b>浏览器排行榜</b></div> <select size="5" id="myList" name="myList-name" onchange="var x=document.getElementById('myList');document.getElementById('favorite-value').value=x.options[x.selectedIndex].value;document.getElementById('favorite').value=x.options[x.selectedIndex].text"> <option value="1" >Mozilla Firefox</option> <option value="2" >Chrome</option> <option value="3" >Opera</option> <option value="4" >K-JAVA</option> <option value="5" >Open-Wave</option> </select> </td> <td valign="middle" align="center"><br /> <input type="button" onclick="addopt()" value="添加IE"><br> <input type="button" onclick="delopt()" value="移除IE"><br> <input type="button" onclick="delsel()" value="移除选中"><br> <input type="button" onclick="addinput()" value="添加输入"> </td> <td> <div><b>我选择：</b></div> <input type="text" id="favorite-value" size="2"> <input type="text" id="favorite" size="20"> </td> </tr> </table> </form> <script type="text/javascript"> document.write("页面包含： " + document.forms.length + " 个表单。") document.write('选择第一个表单内的对象的事件是'); document.write(document.forms[0].inform.onmouseover); </script> <hr /> <hr /> <div onmousedown="whichButton(event)">用鼠标点我,我知道你做了什么</div> <hr /> <input type="checkbox" id="myCheck" onclick="x=document.getElementById('word').value;if(x==''){x='在此输入搜索内容'}else{x=''};document.getElementById('word').value=x" />点我我就发飙。。。。 <!--注意onfocus和onblur的区别--> <input id="word" class="seachInput" value="在此输入搜索内容" onfocus="if (value =='在此输入搜索内容'){value =''}" onblur="if (value ==''){value='在此输入搜索内容'}" /> <input type="radio" name="browser" onclick="document.getElementById('word').value=(this.value)" value="Firefox">Firefox! <table> <tr> <td valign="middle" align="center"> 序列号模拟输入: </td> <td valign="middle" align="center"><br /> <form id="sninput"> <input size="5" tabindex="1" maxlength="5" onkeyup="checkLen(this,this.value)"> <input size="2" tabindex="2" maxlength="2" onkeyup="checkLen(this,this.value)"> <input size="5" tabindex="3" maxlength="5" onkeyup="checkLen(this,this.value)"> </form> </td> <td valign="middle" align="center"> <div id="txt"></div> <script type="text/javascript"> function startTime(){ var today=new Date() var h=today.getHours() var m=today.getMinutes() var s=today.getSeconds() // add a zero in front of numbers<10 m=checkTime(m) s=checkTime(s) document.getElementById('txt').innerHTML=h+":"+m+":"+s t=setTimeout('startTime()',500) } startTime(); </script> </td> </tr> </table> <hr /> <br /> </td> </tr> </table> </body> </html> 提示：你可以先修改部分代码再运行。 SEE :http://ihipop.info/i-service/javascript/htmldom.html Javascript常用运算符(Operators) 算[......] Read more