Dom说白了就是一些对HTML元素添加的动作：
动态添加事件如下
先定义方法： function f1(){
alert("我是中国人！！");
}
然后再在控件的onclick 事件中调用f1
<input type="button" onclick="document.codblclick=f1()"value="关联方法f1了"/>
同样对于dom中的特定函数 confirm 方法显示“确定”、”取消“对话框若点【确定】返回ture否则就是false 也是这样用如下
<script type="text/javascript">
function confirmon(){
if(confirm("是否进入系统？？")){
alert("你已进入了");
}
else
{alert("你已退出系统");}
}
</script>
window 对象中还有个方法是 navigate 是重新导航用法如下
<input type="button" onclik="navigate("htmlpage.htm")"/>
setinterval interval 间隔的意思
用法如下 也要定义个函数 function startinterval(){
setinterval("alert('定时显示了')"，2000);
}
再按个东西调它就可以了如<input type="button" value="开始计时" onclic="startinterval()"/>
若要停止的话可以用clearInterval（intervalid）;方法如上
var intervalid;
function(){
intervalid=setInterval("alert('没事一会就停止啦')",4000);
}
<input type="button" value="stopInterval" click="clearInterval(interalid)"/>
浏览器是一边下载一边解析执行的所以这就用到了onload 事件它是在网页加载完毕后触发的如下就会报错：
<html >
<head>
<title>mysite</title>
<script type="text/javascript">
btn.value = "ok";
</script>
</head>
<body>
<input type="button" value="你好啊" id="btn" />
</body>
</html>
而写成这样就没事啦：
<html>
<head>
<title>mysite</title>
</head>
<body onload="btn.value="ok"">
<input type="button" value="你好啊" id="btn" />
</body>
</html>
但然单个元素也有onload 事件不过是在它自己本身加载完毕后就触发而在 body 中的onload是指全部网页加载完后触发的
要想出现对话框显示是否关闭yes or no 的话就要用到 onbeforeunload=“window.event.returnValue='你是否要离开！';”
window 的对象 location 用途有下
一可以用到 在一个按钮的onclick事件中如 <input typt="button"
onclick="alert(location.href)"/>
还可以给window.location.href赋值也就是可以通过它而使页面跳转到别的页面去如
<input type="button" value="页面跳转" onclick="location.href='www.baidu.com'"这其实就和navigate差不多用法为navigate("www.baidu.com");
还可以用window.location.reload()方法来刷新页面如下：
<input type="button" value="刷新页面" onload="window.location.reload()"
window.event是非常重要的属性，用来获得发生事件的信息，事件不局限于window 对象的事件，所有元素的事件都可以通过event属性来取到相关信息。
altKey ctrlKey shiftKey 等等属性返回值为bool 表示的事件发生时本键是否被按下可以用来当按下这键时做一事而在没有按下时来发生另外一件事如下：
<input type="button" value="mykey" onload="if(window.event.ctrlKey){alert('ctrl被按下了')}else{alert('ctrl没有被按下')}"
还有的就是clientX ,与clientY 表示发生事件时鼠标在客户区的坐标；而screenX ,screenY 是指发生事件时鼠标在整个屏幕上的坐标
还有一个重要的属性就是returnValue，如果将returnVale设置为false,就会取消默认的事件的处理。在超链接的onclick里面禁止访问href的页面。在表单校验的时候禁止提交表单到服务器用法如下：
<a href="http://www.baidu.com" onclick="alert('禁止访问！');window.event.returnValue=false;">浏览百度就知道<a/>
】
定时器为：setInterval(要处理的事件,每隔多少毫秒做一次如:500毫秒)
下面做个定时器走马灯例子：
<html>
<head>
<title>北京欢迎您</title>
<script type="text/javascript">
var title=document.title;
varlastCh=title.charAt(title.length-1);
var leftStr=title.substring(0,title.length-1);
document.title=lastCh+laftStr;
</script>
</head>
</html>
window 的另一个对象是screen 可以得屏的分辨率用法如下：
alert("分辨率"+window.screen.wedth+window.screen.height);
哈哈又一个对象window 的是clipboarData 对粘贴板操作。clearData("Text")是清空粘贴板；getData("Text");是读取粘贴板的值返回值为粘贴板中的内容；setData("Text",val);设制粘贴板中的值。
<input type="button" value="分享本页给好友" onclick="clipboardData.setData('Text','这网页在真的有好玩的呀！很黄很暴力！'+window.location.href);alert('本网页地址已在你的粘贴板在了可以通过粘贴发给你好友啦！！！');"/>
这网页在真的有好玩的呀！很黄很暴力！http://localhost:21064/WebSite2/HTMLPage.htm
当复制body的内容的时候它的oncopy事件就会被触发，而直接return false 就是禁止复制。 可以这样写如下
<body oncopy="alert('禁止复制！');return false;">
其实很多其它元素也有oncopy事件如用户帐号等等用法一样。
要想做像有些网站上的复制内容时会自动加上本网的网址可以如下所用：
<script type="text/javascript">
function modifyClipboard()
{
var txt=clipboardData.getData("Text");
txt=txt+"本文章转载自强人社区，其来源为："+window.location.href;
clipboardData.setData("Text",txt);
}
</script>
<body oncopy="setTimeout('modifyClipboard()',100);">
window 的另一个对象是history有下面几种用法：
window.history.back() 后退；window.history.forward()前进。也可以用window.history.go(-1)：也就是前一个网页而window.history.go(1) 就是前进。用法如下：
在一个网页中如下写：
<html >
<head>
<title>第一个网页</title>
</head>
<body>
<a href="HTMLPage2.htm" >跳到第二页</a>
</body>
</html>
另一个网页中这样写:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>第二个网页</title>
</head>
<body>
<a href="javascript:window.history.back()">后退</a>
<input type="button" value="后退" onclick="window.history.go(-1)" />
</body>
</html>
window的最重要的一个属性是document 它有如下方法：
一:write 就是向文档写内容
<script type="text/javascript">
document.write("<a href='HTMLPage3.htm'>自家网站</a>");
document.write("<br/>");
document.write("<a href='HTMLPage2.htm'>俺家的网站</a>");
</script>
也就是说可以在任何位置向网页中添加内容但必须写在<script></script>中这是当然的啦呵呵
还要注意的是在onclick等事件中写的代码会冲掉页面中的内容，只有在页面加载过程中write才会与原有内容融合在一起：如下
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>document</title>
<script type="text/javascript">
document.write("<a href='HTMLPage3.htm'>自家网站</a>");
document.write("<br/>");
document.write("<a href='HTMLPage2.htm'>俺家的网站</a>");
</script>
</head>
<body>
<input type="button" value="你好呀" onclick="document.write('大家好！')"/>
</body>
</html>
这样的最后结果为只有一个 “大家好！”了
document 的取得各控件的内容时就要先取得本人无控件可以用document.getElementById("要取的的元素的id值");
也可以用document.getElementByName("要想取得的元素的Name的值");
用法如下：这样就算是放在了form 表单里面的也没事
<html >
<head>
<title>呵呵呵呵</title>
<script type="text/javascript">
function btnclick() {
var txt = document.getElementById("txt2");
alert(txt.value);
alert(txt1.value);
}
function btnclick2() {
alert(form1.txt2.value);
}
</script>
</head>
<body>
<input type="text" id="txt1" />
<input type="button" value="点我了" onclick="btnclick()" />
<form action="ok.aspx" id="form1">
<input type="text" id="txt2" />
<input type="button" value="点我呀" onclick="btnclick2()" />
</form>
</body>
</html>
而当用getElementByName();时返回的是所有元素的数组：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>getElementById</title>
<script type="text/javascript">
function btnclick() {
var radios = document.getElementsByName("gender");
for (var i = 0; i < radios.length; i++) {
alert(radios[i].value);
}
}
</script>
</head>
<body>
<input type="radio" name="gender" value="男" /> 男
<input type="radio" name="gender" value="女" /> 女
<input type="radio" name="gender" value="保密"? />保密
<input type="button" value="提交" onclick="btnclick()" />
</body>
</html>
要想得到是哪个元素是当前引发的事件时就可以用到
当要给某按钮添加动态事件时也就是先在一个方法中得其，再给其的onclick事件加个方法即可但加的方法不带括号也就是
function initEvent() {
var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
input.onclick = btnclick; }
}
function btnclick() {
var inputs = document.getElementsByTagName("input");
for (var i = 0; i <inputs.length; i++) {
var input = inputs[i];
if (input == window.event.srcElement) {
input.value = "呜呜";
}
else {
input.value = "哈哈";
}
}
}
</head>
<body onload="initEvent()">
<input type="button" value="哈哈" />
<input type="button" value="哈哈" />
<input type="button" value="哈哈" />
<input type="button" value="哈哈" />
</body>
</html>
if(someElement==window.event.srcElement)
{
//do something
}
当为网页加一个倒计时的阅读协议时其实也不难其方法如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>新用户注册</title>
<script type="text/javascript">
var leftTime=10;
var setIntervalId;
function countDown(){
var button=document.getElementById("btnTag");
if(button)
{
if(leftTime<=0){
button.value="同意";
button.disabled=false;
clearInterval(setIntervalId);
}
else {
button.value="请仔细阅读协议，还剩时间为： "+leftTime+"秒";
leftTime--;
}
}
}
setIntervalId= setInterval(countDown,1000);
</script>
</head>
<body>
<textarea cols=20 rows=20></textarea>
<input type="button" id="btnTag" value="同意" disabled="disabled" />
</body>
</html>
哈哈做个美女时钟吧
只不过是在<img id="imgMM" src=""/>
中改下它的src且是动态的方法如下：
<script type="text/javascript">
function time2(i){
if(i<=10)
return "0"+i;
}
function reflesh()
{
var imgmm=document.getElementById("imgMM");
var time=new Date();
var path="MM/"+time.getHours()+"_"+time2(time.getSeconds())+".jpg";
imgmm.src=path;
}
setInterval('reflesh()',1000);
</script>
在网页中动态的生成元素方法如下：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>动态生成新元素</title>
<script type="text/javascript">
function btnclick() {
var divmain = document.getElementById("idmain");
var input = document.createElement("input");
input.type = "button";
input.value = "俺是动态生成的";
divmain.appendChild(input);
}
</script>
</head>
<body>
<div id="idmain"></div>
<input type="button" value="添加新按钮"onclick="btnclick()"/>
</body>
</html>也就是先在下边的有个地接着要新生成的在js脚本中生成之后再用下接者的someElement.appendChild(生成的新元素名);
其实每个dom对象都有innerText 和innerHTML 属性它们会分别返回
元素的本身的值 与连同其中包含的其它的html元素的值如下
<a href="www.baidu.com" id="link" >百度<font color="red">知</font>道</a>
<input type="button" value="取值" onclick="alert(document.getElementById('link').innerText);alert(document.getElementById('link').innerHTML);" />
则结果为：一：百度知道 二：百度<font color="red">知</font>道
这样就可以动态的改变一元素的html内容了用法如下：
<html>
<head>
<script type="text/javascript">
function creatElement() {
var idmain = document.getElementById("idmain");
idmain.innerHTML = "<input type='button' value='新加按钮'/>";
}
</script>
</head>
<body>
<div id="idmain"></div>
<input type="button" value="addnew" onclick="creatElement()"/>
</body>
</html>
注意当动态添加一链接时不要给添加的元素的value赋值而是它的innerText 其用法如下：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>动态添加链接</title>
<script type="text/javascript">
function createLink() {
var divmain = document.getElementById("divmain");
var link = document.createElement("a");
link.href = "HTMLPage6.htm";
link.innerText = "百度知道";
divmain.appendChild(link);
}
</script>
</head>
<body>
<div id="divmain"></div>
<input type="button" value="添一个" onclick="createLink()"/>
</body>
</html>
动态产生的元素，查看代码是看不到的。不过通过DebugBar->Dom->
文档->HTML就可以看到 它是通过分析代码的innerHTML得到的。
下面是个动态的在网页中加表格的例子一列放网站名一列放网址
但要注意在IE6 .IE7中是不支持appendChild()方法的 注意在没有在
<table id="tablelinks"></table> 中添加<tbody></tbody> 的时候是不可以的而添加了后再在 js 中的添加行时加上tablelinks.tBodys[0].appendChild(要添加的元素);就可以啦例子如下所示哈哈高兴呀！！！%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>动态添加表格</title>
<script type="text/javascript">
function addtable() {
var data = { "百度知道": "http://www.baidu.com", "新浪购物": "http://www.sinabuy.com", "大家网": "http://www.hostbest.com" };
var tablelinks = document.getElementById("tablelinks");
for (var key in data) {
var value=data[key];
var tr = document.createElement("tr");
var td1 = document.createElement("td");
td1.innerText=key;
tr.appendChild(td1);
var td2 = document.createElement("td");
td2.innerHTML = "<a href='" + value + "'>" + value + "</a>";
tr.appendChild(td2);
tablelinks.tBodies[0].appendChild(tr);
}
}
</script>
</head>
<body>
<table id="tablelinks">
<tbody></tbody>
</table>
<input type="button" value="添加" onclick="addtable()" />
</body>
</html>
还有一个实现的方法是用到了也就是直接加table 的
var tr = table.insertRow(-1);
var td=tr.insertCell(-1);
再对td 的innerText 或者innerHTML 赋值就可以了
<script>
function addnew() {
var data = { "个人网站": "http://www.sunyebao.com", "电驴网": "http://www.verycd.com", "新华电影网": "vod.dxsst.cn" };
var table = document.getElementById("table");
for(var key in data)
{
var value = data[key];
var tr = table.insertRow(-1);
var td1 = tr.insertCell(-1);
td1.innerText = key;
var td2 = tr.insertCell(-1);
td2.innerHTML = "<a href='"+value+"'>"+value+"</a>";
}
}
</script>
</head>
<body>
<table id="table"></table>
<input type="button" value="再来一杯"onclick="addnew()" />
</body>
</html>
而就无须再再<table></table>中添加<tbody></tbody>表签了
无刷新在网页中添加评论哈哈也只不过就是将text 或者是textarea中的内容先取出再赋给table 的td 并加到tr中 再用 <table>.tBodies.appendChild(tr);即可如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
function addConment() {
var nickname = document.getElementById("nickname").value;
var txtConment = document.getElementById("txtConment").value;
var tr = document.createElement("tr");
var tdnick = document.createElement("td");
tdnick.innerText = nickname;
var tdConment = document.createElement("td");
tdConment.innerText = txtConment;
tr.appendChild(tdnick);
tr.appendChild(tdConment);
var table = document.getElementById("tabConment");
table.tBodies[0].appendChild(tr);
}
</script>
</head>
<body>
<table id="tabConment">
<tbody></tbody>
</table>
昵称：<input type="text" id="nickname" />
<br />
<textarea id="txtConment" cols=20 rows=20></textarea>
<input type="button" value="提交" onclick="addConment()"/>
</body>
</html>
三：事件冒泡
事件冒泡【Bubble Event】： 如果元素A嵌套在B中，那么当A被点击时不仅A的onclick 事件会被触发，而且B的onclick 事件也会被触发。并且被触发的顺序是“由内而外的”。要不还是来个小例吧
例子如下：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body onclick="alert('body onclick')">
<table onclick="alert('table onclick')">
<tr onclick="alert('tr onclick')">
<td onclick="alert('td onclick')"> 这是一个没有夜晚的夏天 没有老婆的时间</td>
</tr>
</table>
</body>
</html>
四：事件中的this
事件中的this 。除了可以使用event.srcElement在事件响应函数据中，this也可以表示发生事件的控件。只有在事件响应函数中才能使用this获得发生事件的控件，在事件响应函数调用的函数中是不能使用的，如果使用则要将this 传给函数this或者使用event.srcElement.
excaple :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>use this</title>
<script type="text/javascript">
function btnclick(btn) { //把this传过来就行了
alert(btn.value);
}
</script>
</head>
<body>
<input type="button" value="第一个按钮" onclick="alert(event.srcElement.value)" />
<input type="button" value="第二个按钮" onclick="alert(this.value)" />
<input type="button" value="第三个按钮" onclick="btnclick(this)" />
</body>
</html>
不过还有一点要注意的是this 与evnet.srcElement的语义是不一样的，this就是指当前监听事件的这个对象,也就是当前谁是事件引发者就跟谁，而event.srcElement是指引发事件的对象，只认准自己的娘啦呵呵死心眼，这就与前边的冒泡事件有关了有可能点了一个<td>的事件而进而触发了<tr> <table><body>的事件