Dom 经典实例

来源：互联网发布：linux默认用户名密码编辑：程序博客网时间：2024/06/06 10:17
<!-------------------- -----------------> 访问某个元素内的属性，用对象访问的形式,如，方法form元素内的action属性：document.forms[0].action 或是 document.getElementById('fm').actiondocument.getElementById("myButton").disabled=true;//设置按钮失效document.getElementById("myCheck").checked=true;//设置checkbox被选中document.getElementById("myForm").reset();//myForm表单被重置<form action="/example/hdom/hdom_submitpage.html" onsubmit="return validatefn()"></form>;//注意加上return，这样才在验证有误后，不会提交表单window.top.location=URL ; //跳出原来的框架window.location; //获取浏览器的URL 和 document.URL 相同效果；window.location.reload();//重新加载页面下拉列表select属性 ：size ,length,options,id,selectedIndex ; // document.getElementById("mySelect").options[i].text;document.getElementById('myTable').rows[0].cells[0].innerHTML; //显示表格单元值。document.getElementById('myTable').rows[0].innerHTML ;//获取表格第一行name = prompt("请输入",default) ;//跳出输入框,返回输入的内容confirm(‘提示的内容’);//显示确认框,返回true 或 falsewindow.scrollBy(100,100); //把窗口滚动到指定的位置setTimeout("alert('5 seconds!')",5000);//5 秒后会显示一个消息框。clearTimeout(t);//停止t = setTimeout(fn,5000) 设置的时间句柄。document.write(document.URL);//返回当前文档的 URLdocument.write(document.referrer);//referrer 属性返回加载本文档的文档的 URL。<!-------------------- -----------------> <!DOCTYPE html><html><body onload="checkCookies()"><script>function checkCookies(){if (navigator.cookieEnabled==true){alert("Cookies are enabled")}else{alert("Cookies are not enabled")}}</script><p>弹出的提示框会告诉你浏览器是否已启用 cookie。</p></body></html><!-------------------- -----------------> <html><head><script>function myFunction(){var x=document.getElementById("fname");x.value=x.value.toUpperCase();}</script></head><body>请输入你的英文名：<input type="text" id="fname" onchange="myFunction()"><p>当你离开输入框时，被触发的函数会把你输入的文本转换为大写字母。</p></body></html><!-------------------- -----------------> <html><body><a name="first">第一个锚</a><br /><a name="second">第二个锚</a><br /><a name="third">第三个锚</a><br /><br />文档中锚的数目：<script type="text/javascript">document.write(document.anchors.length)</script></body></html>拓展：document.write(document.anchors[0].innerHTML);//本文档中第一个锚的 InnerHTML <!-------------------- -----------------> <html><head><script type="text/javascript">function whichButton(event){alert(event.keyCode)}</script></head><body onkeyup="whichButton(event)"><p><b>注释：</b>在测试这个例子时，要确保右侧的框架获得了焦点。</p><p>在键盘上按一个键。消息框会提示出该按键的 unicode。</p></body></html><!-------------------- -----------------> onmousedown --->onmouseup-->onclick<html><head><script type="text/javascript">function coordinates(event){x=event.screenX //相对于屏幕的坐标，而x=event.clientX；y=event.clientY 是相对于浏览器y=event.screenYalert("X=" + x + " Y=" + y)}</script></head><body onmouseup="coordinates(event)"><p>在文档中点击某个位置。消息框会提示出指针相对于屏幕的 x 和 y 坐标。</p></body></html><!-------------------- -----------------> <html><head><script type="text/javascript">function checkLen(x,y){if (y.length==x.maxLength){var next=x.tabIndex ; // tabIndex是form属性if (next<document.getElementById("myForm").length) //或者 next < document.getElementsByTagName("input").length{document.getElementById("myForm").elements[next].focus() //或者 document.getElementsByTagName("input")[next].focus()}}}</script></head><body><p>这段脚本在达到文本框的最大长度时跳到下一个文本框：</p><form id="myForm"><input size="3" tabindex="1" maxlength="3" onkeyup="checkLen(this,this.value)"><input size="2" tabindex="2" maxlength="2" onkeyup="checkLen(this,this.value)"><input size="3" tabindex="3" maxlength="3" onkeyup="checkLen(this,this.value)"></form></body></html><!--------------------从表格删除行 -----------------> <html><head><script type="text/javascript">function deleteRow(r)  {  var i=r.parentNode.parentNode.rowIndex  document.getElementById('myTable').deleteRow(i)  }</script></head><body><table id="myTable" border="1"><tr>  <td>Row 1</td>  <td><input type="button" value="删除" onclick="deleteRow(this)"></td></tr><tr>  <td>Row 2</td>  <td><input type="button" value="删除" onclick="deleteRow(this)"></td></tr><tr>  <td>Row 3</td>  <td><input type="button" value="删除" onclick="deleteRow(this)"></td></tr></table></body></html><!--------------------向表格添加新行 - 然后向其添加内容 -----------------> <html><head><script type="text/javascript">function insRow()  {  var x=document.getElementById('myTable').insertRow(0)  var y=x.insertCell(0)  var z=x.insertCell(1)  y.innerHTML="NEW CELL1"  z.innerHTML="NEW CELL2"  }</script></head><body><table id="myTable" border="1"><tr><td>Row1 cell1</td><td>Row1 cell2</td></tr><tr><td>Row2 cell1</td><td>Row2 cell2</td></tr><tr><td>Row3 cell1</td><td>Row3 cell2</td></tr></table><br /><input type="button" onclick="insRow()" value="插入行"></body></html><!--------------------无穷循环中的计时 - 带有一个停止按钮 -----------------> <html><head><script type="text/javascript">var c=0var tfunction timedCount(){document.getElementById('txt').value=cc=c+1t=setTimeout("timedCount()",1000)}function stopCount(){clearTimeout(t)}</script></head><body><form><input type="button" value="开始计时！" onClick="timedCount()"><input type="text" id="txt"><input type="button" value="停止计时！" onClick="stopCount()"></form><p>请点击上面的“开始计时”按钮。输入框会从 0 开始一直进行计时。点击“停止计时”可停止计时。</p></body></html><!--------------------一个时钟 -----------------> <html><head><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<10m=checkTime(m)s=checkTime(s)document.getElementById('txt').innerHTML=h+":"+m+":"+st=setTimeout('startTime()',500)}function checkTime(i){if (i<10)   {i="0" + i}  return i}</script></head><body onload="startTime()"><div id="txt"></div></body></html>
来自：w3c手册
0 0