您的位置：首页 > 其它

Dom 经典实例

2015-10-01 16:54 441 查看 
<!-------------------- ----------------->
访问某个元素内的属性，用对象访问的形式,如，方法form元素内的action属性：document.forms[0].action 或是 document.getElementById('fm').action
document.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 或 false
window.scrollBy(100,100); //把窗口滚动到指定的位置
setTimeout("alert('5 seconds!')",5000);//5 秒后会显示一个消息框。
clearTimeout(t);//停止t = setTimeout(fn,5000) 设置的时间句柄。
document.write(document.URL);//返回当前文档的 URL
document.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.screenY
alert("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=0
var t
function timedCount()
{
document.getElementById('txt').value=c
c=c+1
t=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<10
m=checkTime(m)
s=checkTime(s)
document.getElementById('txt').innerHTML=h+":"+m+":"+s
t=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手册
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航