脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-Dom 学习总结及其实例，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。
2、
（1、*setInterval每隔一段时间执行指定的代码，第一个参数为代码的字符串，第二个参数为间隔时间（单位毫秒），返回值为定时器的标识。如：
setInterval("alert('hello')",5000);
*clearInterval取消setInterval的定时执行，相当于Timer中的Enabled=False。因为setInterval可以设定多个定时，所以clearInterval要指定清除那个定时器的标识，即setInterval的返回值。
VAR intervalld= setInterval("alert('hello')",5000);
clearInterval(intervalld);
（2、setTimeout也是定时执行，但是不像setInterval那样是定时执行，而是设定时间后只执行一次，clearTimeout也是清除定时。
很好区分：Interval是定时；Timeout是超时之意。
var timeoutld=setTimeout("alert('hello')",2000);
（3、案例：实现标题栏走马灯的效果，也就是浏览器的标题文字每隔500ms向右滚动一下
跑马灯效果
1 <!DOCTYPE HTML PubLIC "-//W3C//DTD HTML 4.0 TransITional//EN">
2 <html>
3 <head>
4 <title>欢迎来到DAOmul的博客，欢迎再来，谢谢</title>
5 <script type="text/javascript">
6 function scroll() {
7 var title = document.title;
8 var First = title.charAt(0);
9 var last = title.substring(1, title.length);
10 document.title = last+first;
11 }
12 setInterval("scroll()",500);
13 </script>
14 </head>
15 <body>
16
17 </body>
18 </html>3、
（1、onload:网页加载完毕时触发，浏览器是一边下载文档、一边解析执行，可能会出现JavaScript执行时需要操作某个元素，这个元素还没有加载，如果这样就要把操作的代码放到body的onload事件中，或者可以把JavaScript放到元素之后。元素的onload事件是元素自己加载完毕时触发，而body 里的onload才是全部加载完成。
（2、onunload：网页关闭（或者离开）后触发。onbeforeunload：窗口离开（比如前进、后退、关闭之前）就会弹出确认消息。如： <body onbeforeunload="Window.event.returnValue='真的要放弃发贴退出吗？'">
4、
除了有特有的属性之外，当然还有通用的HTML元素的事件：onclick(单击)、ondblclick(双击)、onkeydown(按键按下)、onkeyup(按键释放)、onkeyPress(点击按键)、onmousedown(鼠标按下)、onmouSEMove(鼠标移动)、onmouseout(鼠标离开元素范围)、
onmouseover(鼠标移动到元素范围)、onmouseup(鼠标按键释放)等。
5、window对象的属性
（1、window.location.href="http://www.sina.COM.cn",重新导向新的地址，和navigate方法效果一样。window.location.reload()刷新页面。
（2、window.event是非常重要的属性，用来获得发生事件时的信息，事件不局限于window对象的事件，所有元素的事件都可以通过event属性取到相关信息。
a、altKey属性，boot类型，表示发生事件时alt键是否被按下，类似的还有ctrlKey、shiftKey属性
windows事件样例
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html XMlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <title></title>
5 </head>
6 <body>
7 <input type="button" value="href" onclick="alert(location.href)" />
8 <input type="button" value="重定向" onclick="location.href='页面1.htm'" />
9 <input type="button" value="点击" onclick="if(window.event.ctrlKey){alert('按下了Ctrl')}else{alert('普通点击')}" /><a
10 href="http://www.baidu.com" onclick="alert('禁止访问！');window.event.returnValue=false;"></a>
11 <form action="daomul.aspx">
12 <input type="submit" value="提交" onclick="alert('数据有问题!');window.event.returnValue=false;" />
13 </form>
14 </body>
15 </html>
b、 clientX、clientY 发生事件时鼠标在客户区（浏览器界页面内）的坐标；screenX、screenY发生事件时鼠标在屏幕上的坐标；offsetX、offsetY发生事件时鼠标相对于事件源（按钮button内）的坐标。
c、returnValue属性，如果将returnValue设置为false，就会取消默认事件的处理。
d、srcElement:获得事件源对象
e、KeyCode：发生时间时的按键值
f、button：发生时间时鼠标的按键，1为左键，2为右键，3为左右键同时按。
<body onmousedown="if(event.button==2){alert('禁止复制')}">
6、clipboardData对象，对粘贴板的操作。clearData("Text")清空粘贴板；getData("Text")读取粘贴板的值，返回值为粘贴板中的内容；setData("Text",val),设置粘贴板中的值。
（1、当复制的时候body的oncopy方法被触发，直接return false就是禁止复制。<body oncopy="alert('禁止复制！');return false;">
（2、很多元素也有oncopy、onpaste事件。
例子1：禁止复制
<body oncopy="alert('禁止复制！');return false;">
例子2：给粘贴板赋值：复制地址给好友
<input type="button" value="分享本页给好友" onclick="clipboardData.setData('Text','我发现一个很实用的网站，计算机方面的!'+
location.href);alert(' 已经将地址放到粘贴板中，赶快通过QQ传递给你的好友吧！');" />
例子3：禁止粘贴到文本框
请输入您的手机号码：<input type="text" />
请您再次输入手机号码：<input type="text" onpaste="alert('为保证您充值到正确的手机号，请勿粘贴手机号，请直接填！');return false;"/>:
例子4：复制时附带内容
在网站中复制文章的时候，为了防止那些拷贝党不添加文章来源，自动在复制的内容后添加版权声明。
function modifyClipboard(){
clipboardData.setData('Text',clipboardData.getData('Text')+'本文来自博客园技术专区，转载请注明来源。'+location.href);
}
oncopy="setTimeout(';modifyClipboard()',100)"。
用户复制动作发生0.1秒以后再去修改粘贴板中的内容。100ms只是一个经常取值，写1000、10、50、20……都行。不能直接在oncopy中执行对粘贴板的操作，因此设定定时器，0.1秒以后执行，这样就不再oncopy的执行调用栈上了。
7、页面前进、后退：history操作历史记录
window.history.back()后退；
window.history.forward()前进。也可以用window.history.go(-1)表前进；window.history.go(1)表后退。
实例1：
<body>这里是第2页<a href="javascript:window.history.back()">后退</a><input type="button" value="后退" onclick="window.history.go(-1)" />
</body>
8、document属性（最复杂的属性）document是window对象的一个属性，因为使用window对象成员的时候可以省略window,所以一般直接写document。
（1、write:向文档中写入内容。writeln和write差不多，只不过最后添加一个回车
（2、<input type="button" value="点击" onclick="document.write('<font color=blue>您好</font>')" />
（3、在onclick等事件中写的代码会冲掉页面中的内容，只有在页面加载过程中write才会与原有内容融合在一起
（4、<script type="text/javascript">
document.write("<font color=red>您好</font>");
</script>
案例1：
getElementById
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <title>getElementById</title>
5 <script type="text/javascript">
6 //不建议直接通过id操作元素，而是通过getElementById根据元素的Id获得对象
7 function BTnClick() {
8 //alert(textbox1.value);
9 var txt = document.getElementById("textbox1");
10 alert(txt.value);
11 }
12 function btnClick2() {
13 //alert(form1.textbox2.value);//要显示表单里的信息需添加表单名称
14 var txt = document.getElementById("textbox2");
15 alert(txt.value);
16 }
17 </script>
18 </head>
19 <body>
20 <input type="text" id="textbox1" />
21 <input type="button" value="点击我" onclick="btnClick()" />
22 <form action="页面1.htm" id="form1">
23 <input type="text" id="textbox2" />
24 <input type="button" value="显示刚输入的内容" onclick="btnClick2()" />
25 </form>
26 </body>
27 </html>案例2：
getElementByName
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <title>getElementByName的例子</title>
5 <script type="text/javascript">
6 function btnClick() {
7 var radios = document.getElementsByName("gender");
8 /*//在JS中for(var r in radios)不像C#中的foreach,并不会遍历每个元素,而是遍历的key
9 for (var r in radios) {
10 alert(r.value);
11 }*/
12 for (var i = 0; i < radios.length; i++) {
13 var radio = radios[i];
14 alert(radio.value);
15 }
16 }
17 function btnClick2() {
18 var inputs = document.getelementsbytagname("input");
19 for (var i = 0; i < inputs.length; i++) {
20 var input = inputs(i);
21 input.value = "welcome to my room";
22 }
23 }
24 </script>
25 </head>
26 <body>
27 <input type="radio" name="gender" value="男" />男
28 <input type="radio" name="gender" value="女" />女
29 <input type="radio" name="gender" value="保密" />保密
30 <input type="button" value="click" onclick="btnClick()" />
31 <br />
32 <input type="text" /><br />
33 <input type="text" /><br />
34 <input type="text" /><br />
35 <input type="text" /><br />
36 <input type="text" /><br />
37 <input type="button" value="bytagname" onclick="btnClick2()" />
38 </body>
39 </html>案例3：
getElementByTagName
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <title>getElementByTagName</title>
5 <script type="text/javascript">
6 function initEvent() {
7 var inputs = document.getElementsByTagName("input");
8 for (var i = 0; i < inputs.length; i++) {
9 var input = inputs[i];
10 input.onclick = btnClick;
11 }
12 }
13 function btnClick() {
14 var inputs = document.getElementsByTagName("input");
15 for (var i = 0; i < inputs.length; i++) {
16 var input = inputs[i];
17 //window.event.srcElement//取得引发事件的控件
18 if (input == window.event.srcElement) {
19 input.value = "哈哈"; //以下五个按钮，点到的那个就变为“哈哈”，其余都为“呜呜”，点“呜呜”就变为“哈哈”
20 }
21 else {
22 input.value = "呜呜";
23 }
24 }
25 }
26 </script>
27 </head>
28 <body onload="initEvent()">
29 <input type="button" value="欢迎进入" />
30 <input type="button" value="欢迎进入" />
31 <input type="button" value="欢迎进入" />
32 <input type="button" value="欢迎进入" />
33 <input type="button" value="欢迎进入" />
34 </body>
35 </html>案例4：
阅读协议等待计时器
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
2 <html>
3 <head>
4 <title>欢迎来到daomul的博客，欢迎再来，谢谢</title>
5 <script type="text/javascript">
6
7 var leftTime = 10;
8 var TimeiD;
9 function scroll() {//alert(222);
10 var btn = document.getElementById("btnAgree");
11 //如果网页速度非常慢的话，可能定时器运行的时候控件还没有加载！
12 if (btn) {//alert(11);
13 if (leftTime <= 0) {
14 btn.value = "同意";
15 btn.disabled = "";
16 clearInterval(TimeID);
17 }
18 else {
19 btn.value = "请阅读协议，同意（还剩下"+leftTime+"秒）";
20 leftTime--;
21 }
22 }
23 }
24 TimeID=setInterval("scroll()", 1000);
25 </script>
26 </head>
27 <body>
28 <textarea id="TextArea1" cols="20" rows="2"></textarea>
29 <input id="btnAgree" type="button" value="同意" disabled="disabled"/>
30 </body>
31 </html>案例5：
美女时钟
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <title>欢迎来到daomul的博客，欢迎再来，谢谢</title>
5 <script type="text/javascript">
6 //var now = new Date();不能放在这，否则取得时间不变
7 function Fill2Len(i) {
8 if (i < 10) {
9 return "0" + i;
10 }
11 else {
12 return i;
13 }
14 }
15 function Refresh() {
16 var imgMM = document.getElementById("imgMM");
17 if (!imgMM) {
18 return; //没加载就直接return
19 }
20 var now = new Date(); //每次刷新时取得时间
21 var filename = Fill2Len(now.getHours()) + "_" + Fill2Len(now.getSeconds()) + ".jpg";
22 imgMM.src = "MMclock/" + filename;
23 }
24 setInterval("Refresh()", 1000);
25 </script>
26 </head>
27 <body onload="Refresh()">
28 <img id="imgMM" src="" />
29 </body>
30 </html>案例6：
五角星评分
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
2 <html>
3 <head>
4 <title>欢迎来到daomul的博客，欢迎再来，谢谢</title>
5 <script type="text/javascript">
6 function indexOf(arr,element) {
7 for (var i = 0; i < arr.length; i++) {
8 if (arr[i] == element) {
9 return i;
10 }
11 }
12 return -1;
13 }
14
15 function myload() {
16 //获得table下面的所有td
17 var table1 = document.getElementById("NewTalbeId");
18 var td1 = table1.getElementsByTagName("td");
19 for (var i = 0; i < td1.length; i++) {
20 td1[i].onclick = onmyBlur;
21 //鼠标移到上面变手势
22 td1[i].style.cursor = "pointer";
23 }
24 }
25
26 function onmyBlur() {
27 var table1 = document.getElementById("NewTalbeId");
28 var td1 = table1.getElementsByTagName("td");
29 var index = indexOf(td1, this);
30 for (var i = 0; i <= index; i++) {
31 td1[i].style.background = "yellow";
32 }
33 for (var i = index + 1; i < td1.length; i++) {
34 td1[i].style.background = "white";
35 }
36 }
37 </script>
38 </head>
39 <body onload="myload()">
40 <table border="0" cellpadding="0" cellspacing="0" id="NewTalbeId">
41 <tr>
42 <td>☆</td><td>☆</td><td>☆</td><td>☆</td><td>☆</td>
43 </tr>
44 </table>
45 </body>
46 </html>
9、Dom的动态创建
（1、document.write只能在页面加载过程中才能动态创建。
（2、可以调用document的createElement方法来创建具有指定标签的DOM对象，然后通过调用某个元素的appendChild方法将新创建元素添加到相应的元素下
动态创建按钮
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <title>欢迎来到daomul的博客，欢迎再来，谢谢</title>
5 <script type="text/javascript">
6 function clickButton() {
7 var pMain = document.getElementById("pMain"); //获得层
8 var btn = document.createElement("input"); //创建一个标签名为input的元素（这时还没添加到任何元素上，所以没有显示）
9 btn.type = "button";
10 btn.value = "新动态按钮";
11 pMain.appendChild(btn); //将动态产生的元素添加到pMain层（容器）
12 }
13 </script>
14 </head>
15 <body>
16 <p id="pMain"></p>
17 <input type="button" value="OK" onclick="clickButton()" />
18 </body>
19 </html>10、innerText与innerHTML
（1、几乎所有DOM元素都有innerText与innerHTML属性（注意大小写），分别是元素标签内内容的文本表示形式和HTML源代码，这两个属性是可读可写的。
<a href="http://cnblog.com/daomul/" id="link1">博<font color="red"/>客</font>园</a>
<input type="button" value="innerXXX" onclick="alert(document.getElementById('link1').innerText);
alert(document.getElementById('link1').innerHTML);" />
（2、用innerHTML也可以替代createElement,属于简单、粗放型、后果自负的创建。
function createInput() {
var pMain = document.getElementById('pMain');
pMain.innerHTML="<a href='http://cnbLOG.com/daomul/'>daomul的博客</a>";
}
11、浏览器兼容性问题：
（1、IE6、IE7对table.appendChlid("tr")的支持和IE8不一样，用insertRow、 insertCell来代替或者为表格添加tbody，然后向tbody中添加tr。个人比较喜欢
下面的Insert方式，它不是不兼容火狐浏览器，它也是基本兼容的了，只是 (FF)不支持innerText，但是支持innerHtml。
实例：动态增加双行网站列表
采用InsertRow和insertCell
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <title>动态创建表格的兼容性</title>
5 <script type="text/javascript">
6
7 function LoadData() {//方法一
8 var data = { "百度": "http://www.baidu.com", "新浪": "http://www.sina.com", "淘宝": "http://www.taobao.com" };
9 var tableLinks2 = document.getElementById("tableLinks2");
10 for (var key in data) {
11 var value = data[key];
12 var tr = tableLinks2.insertRow(-1); //在表格最后插入一行，并且返回插入行的对象。联想Winform中TreeNode node=treeNode.AddNode("hello")
13
14 var td1 = tr.insertCell(-1); //在tr中增加一个td，并且返回增加的td，然后td中放入内容
15 td1.innerText = key; //FF不支持innerText
16 var td2 = tr.insertCell(-1);
17 td2.innerHTML = "<a href='" + value + "'>" + value + "</a>"; //也可以用createElement
18 }
19 }
20 </script>
21 </head>
22 <body>
23 <table id="tableLinks">
24 <tbody>
25 </tbody>
26 </table>
27 <table id="tableLinks2">
28 </table>
29 <input type="button" value="非兼容性加载数据" onclick="LoadData()" />
30 </body>
31 </html>采用appendChild方法
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <title>动态创建表格的兼容性</title>
5 <script type="text/javascript">
6
7
8 function LoadDataGood() {//方法二
9 var data = { "百度": "http://www.baidu.com", "新浪": "http://www.sina.com", "淘宝": "http://www.taobao.com" };
10 var tableLinks = document.getElementById("tableLinks");
11 for (var key in data) {
12 var value = data[key];
13 var tr = document.createElement("tr");
14
15 var td1 = document.createElement("td"); //先创建td,在td中放入内容，再加入tr
16 td1.innerText = key;
17 tr.appendChild(td1);
18
19 var td2 = document.createElement("td");
20 td2.innerHTML = "<a href='" + value + "'>" + value + "</a>";
21 tr.appendChild(td2);
22
23 tableLinks.tBodies[0].appendChild(tr); //并且在<table>标签里要加上<tbody></tbody>
24 }
25 } //动态产生的元素，查看源代码是看不到的。但可以通过DebugBar->Dom->Document->HTML可以看到
26
27
28
29 </script>
30 </head>
31 <body>
32 <table id="tableLinks">
33 <tbody>
34 </tbody>
35 </table>
36 <table id="tableLinks2">
37 </table>
38 <input type="button" value="兼容性 加载数据" onclick="LoadDataGood()" />
39 </body>
40 </html> 12、事件冒泡
如过元素A嵌套在元素B中，那么A被点击不仅A的onclick事件会被触发，B也会，顺序是由内而外。
13、事件中的this
除了可以使用event.srcElement在事件响应函数中，this表示发生事件的控件。只有在事件响应函数才能使用this获得发生事件的控件，在事件响应函数调用的函数 中不能使用，如果要使用则要将this传递给函数或者使用event.srcElement.
案例：
this事件
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
2 <html>
3 <head>
4 <title>欢迎来到daomul的博客，欢迎再来，谢谢</title>
5 <script type="text/javascript">
6 <script type="text/javascript">
7 function btnClick3() {//在事件响应函数调用的函数里就不能通过this获得事件对象了
8 alert(this.value);//弹出undefined
9 }
10 function btnClick4(btn) {//在事件响应函数中将this传过来就可以
11 alert(btn.value);
12 }
13 function btnClick5() {//this与event.srcElement语义是不一样的，this就表示当前监听事件的这个对象，event.srcElement是引发事件的对象
14 alert(event.srcElement.value);
15 }
16 </script>
17 </head>
18 <body>
19 <input type="button" value="Logan" onclick="alert(event.srcElement.value)" />
20 <input type="button" value="Logan2" onclick="alert(this.value)" />
21 <input type="button" value="Logan3" onclick="btnClick3()" />
22 <input type="button" value="Logan4" onclick="btnClick4(this)" />
23 <input type="button" value="Logan5" onclick="btnClick5()" />
24 </body>
25 </html>14、Dom修改样式
（1、Dom中修改css样式，必须是通过classname而不是class(可能是因为作为关键字)
例如：onclick="document.getElementById('htmlpID').className='cssID'; "
例如：获得body的css样式id：document.body.className
（2、单独修改样式的属性使用“style.属性名”，不过要注意存在“-”的属性，因为javascript中横线代表减号
案例1：ontextBlur()是myload的响应函数，而不是被响应函数调用的函数，所以可以用this来获得
修改Dom样式-鼠标移离
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
2 <html>
3 <head>
4 <title>欢迎来到daomul的博客，欢迎再来，谢谢</title>
5 <script type="text/javascript">
6 function myload() {//alert(1);
7 var texts = document.getElementsByTagName("textarea");
8 for (var i = 0; i < texts.length; i++) {
9 //alert(2);
10 var text = texts[i];
11 text.onblur = ontextBlur;
12 }
13 }
14
15 function ontextBlur() {
16 //alert(3);
17 if (this.value <= 0) {
18 //alert(4);
19 this.style.background = "red";
20 }
21 else {
22 this.style.background = "write";
23 }
24 }
25 </script>
26 </head>
27 <body onload="myload()">
28 <textarea id="TextArea1" cols="20" rows="2" ></textarea>
29 </body>
30 </html>案例2：评分
评分
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
2 <html>
3 <head>
4 <title>欢迎来到daomul的博客，欢迎再来，谢谢</title>
5 <script type="text/javascript">
6 function indexOf(arr,element) {
7 for (var i = 0; i < arr.length; i++) {
8 if (arr[i] == element) {
9 return i;
10 }
11 }
12 return -1;
13 }
14
15 function myload() {
16 //获得table下面的所有td
17 var table1 = document.getElementById("NewTalbeId");
18 var td1 = table1.getElementsByTagName("td");
19 for (var i = 0; i < td1.length; i++) {
20 td1[i].onclick = onmyBlur;
21 //鼠标移到上面变手势
22 td1[i].style.curser = "pointer";
23 }
24 }
25
26 function onmyBlur() {
27 var table1 = document.getElementById("NewTalbeId");
28 var td1 = table1.getElementsByTagName("td");
29 var index = indexOf(td1, this);
30 for (var i = 0; i <= index; i++) {
31 td1[i].style.background = "yellow";
32 }
33 for (var i = index + 1; i < td1.length; i++) {
34 td1[i].style.background = "white";
35 }
36 }
37 </script>
38 </head>
39 <body onload="myload()">
40 <table border="0" cellpadding="0" cellspacing="0" id="NewTalbeId">
41 <tr>
42 <td>☆</td><td>☆</td><td>☆</td><td>☆</td><td>☆</td>
43 </tr>
44 </table>
45 </body>
46 </html> 15、编程控制层
（1、元素的position样式值：static（无定位，显示在默认位置）、absolute(绝对位置)、fixed（相对于窗口的固定定位，位置不会随着浏览器的滚动而变化，IE6不支持）、relative(相对元素默认位置的定位)。如果要通过代码修改元素的坐标则一般使用absolute，然后修改元素的top（上边缘距离）、left（左边缘距离）两个样式值。
（2、createElement的两种用法，注意innerHTML的问题，
var input=document.createElement("<a href=‘http://www.cnblogs.com/daomul’>文本</a>")文本部分不会被识别
（3、设定一些DOm元素属性名的特殊属性：例如
label.setattribute("for","username"); label.setAttribute("aaa","111");
案例1：高级选项的显示隐藏
高级选项的显示隐藏
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
2 <html>
3 <head>
4 <title>欢迎来到daomul的博客，欢迎再来，谢谢</title>
5 <script type="text/javascript">
6 function showSomething(sb) {
7 var p1 = document.getElementById("p1");
8 if (sb.checked) {
9 p1.style.display = "";
10 }
11 else {
12 p1.style.display = "none";
13 }
14 }
15 </script>
16 </head>
17 <body>
18 <input type="checkbox" id="checkin" onclick="showSomething(this)"/><label for="">显示高级选项</label>
19 <p id="p1" style="display:none">
20 显示被隐藏的高级选项
21 </p>
22 </body>
23 </html> 案例2：鼠标移动（1）
鼠标移动图片
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
2 <html>
3 <head>
4 <title>欢迎来到daomul的博客，欢迎再来，谢谢</title>
5 <script type="text/javascript">
6 document.onmousemove = function () {
7 var x = window.event.clientX;
8 var y = window.event.clientY;
9 var p1 = document.getElementById("p1");
10
11 if (!p1) { return; }
12 p1.style.left = x;
13 p1.style.top = y;
14 }
15 </script>
16 </head>
17 <body>
18 <p id="p1" style="position:absolute">
19 <img src="images/DSCF0762.JPG" alt="Alternate Text" style="width:100px;height:100px"/>
20 <br/>美女与你同在
21 </p>
22 </body>
23 </html> 案例3：鼠标移动显示信息（2）
鼠标移动显示信息
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
2 <html>
3 <head>
4 <title>欢迎来到daomul的博客，欢迎再来，谢谢</title>
5 <style type="text/css">
6 .myp
7 {
8 border-style:dotted;
9 border-width:2px;
10 border-color:Green;
11 background-color:Gray;
12 }
13 </style>
14 <script type="text/javascript">
15 function InitLoad() {
16 var links=document.getElementsByTagName("a");
17 for (var i = 0; i < links.length; i++) {
18 links[i].onmouseover = linkMouseOver;
19 links[i].onmouseout=linkMouseOut;
20 }
21 }
22 function linkMouseOut() {
23 var p2 = document.getElementsByTagName("p");
24 for (var i = 0; i < p2.length; i++) {
25 if (p2[i].className == "myp") {
26
27 document.body.removeChild(p2[i]); //remove的是p2[i]不是p2
28 //p2.style.dispaly = "none"; //只是隐藏没有消去
29 }
30 }
31 }
32
33 function linkMouseOver() {
34 var p1 = document.createElement("p");
35 p1.className = "myp";
36 p1.style.position = "absolute";
37 p1.style.left = window.event.clientX;
38 p1.style.top = window.event.clientY;
39 p1.innerHTML = "nimei nimie nimei nimei ";
40
41 document.body.appendChild(p1);
42 }
43
44
45 </script>
46 </head>
47 <body onload="InitLoad()">
48 <a href="#">daomul</a>
49 <a href="#">ddddd</a>
50 <a href="#">aaaaa</a>
51 <a href="#">bbbbb</a>
52 </body>
53 </html> 案例4：小图片显示大图片
小图片显示大图片
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
2 <html>
3 <head>
4 <title>欢迎来到daomul的博客，欢迎再来，谢谢(小图片显示大图片1)</title>
5 <script type="text/javascript">
6 function InitLoad() {
7 var data = { "images/1小.bmp": ["images/1.JPG", "zzz", "21"],
8 "images/2小.bmp": ["images/2.jpg", "yyy", "22"],
9 "images/3小.bmp": ["images/3.JPG", "xxx", "23"]
10 };
11 for(var smallImg in data){
12 //创建
13 var smallIm=document.createElement("img");
14 //属性(因为图片的路径在存入和取出的过程中不同，
15 //所以还是自定义属性，)
16 smallIm.src = smallImg;
17 smallIm.style.width = "100px";
18 smallIm.style.height = "100px";
19 smallIm.setAttribute("a1",data[smallImg][0]);
20 smallIm.setAttribute("a2",data[smallImg][1]);
21 smallIm.setAttribute("a3",data[smallImg][2]);
22
23 //方法
24 smallIm.onmouseover = function () {
25 //
26 document.getElementById("imgId").src = this.getAttribute("a1");
27 document.getElementById("NameId").innerHTML = this.getAttribute("a2");
28 document.getElementById("AgeId").innerHTML = this.getAttribute("a3");
29 //显示DIV
30 var p1 = document.getElementById("showDivId");
31 p1.style.left = window.event.clientX;
32 p1.style.top = window.event.clientY;
33 p1.style.display = '';
34 //alert(1);
35 };
36 //关联绑定
37 document.body.appendChild(smallIm);
38 }
39 }
40
41 </script>
42 </head>
43 <body onload="InitLoad()">
44 <p style="display:none;position:absolute;" id="showDivId">
45 <img src="" alt="error Pic ,please call the Admin" id="imgId" style="width:200px;height:200px;"/>
46 <p id="NameId"></p>
47 <p id="AgeId"></p>
48 </p>
49 </body>
50 </html> 案例5：评分控件改进
评分控件改进
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
2 <html>
3 <head>
4 <title>欢迎来到daomul的博客，欢迎再来，谢谢(评分改进2)</title>
5 <script type="text/javascript">
6 function indexOf(arr,element) {
7 for (var i = 0; i < arr.length; i++) {
8 if(arr[i]==element){
9 return i;
10 }
11 }
12 return -1;
13 }
14
15
16 function InitLoad() {
17 var table1 = document.getElementById("myTable");
18 var td1 = table1.getElementsByTagName("td");
19 for (var i = 0; i < td1.length; i++) {
20 td1[i].style.cursor = 'pointer';
21 td1[i].onmouseover = function () {
22
23 var table1 = document.getElementById("myTable");
24 var td1 = table1.getElementsByTagName("td");
25 var index = indexOf(td1, this);
26 for (var i = 0; i <= index; i++) {
27 td1[i].innerText = "★";
28 }
29 for (var i = index + 1; i < td1.length; i++) {
30 td1[i].innerText = "☆";
31 }
32 };
33 }
34 }
35
36 </script>
37 </head>
38 <body onload="InitLoad()">
39 <table border="0" cellpadding="0" cellspacing="0" id="myTable">
40 <tr>
41 <td>☆
42 </td>
43 <td>☆
44 </td>
45 <td>☆
46 </td>
47 <td>☆
48 </td>
49 <td>☆
50 </td>
51 </tr>
52 </table>
53 </body>
54 </html>案例6：搜索框关键字搜索
搜索框关键字搜索
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
2 <html>
3 <head>
4 <title>欢迎来到daomul的博客，欢迎再来，谢谢(文本框关键字3)</title>
5 <script type="text/javascript">
6 function inputBlur(keyword) {
7 if (keyword.value.length <= 0) {
8 keyword.value = "请输入搜索关键词";
9 keyword.style.color = 'Gray';
10 }
11 }
12 function inputFocus(keyword) {
13 //var keyword = document.getElementById("keyword");把this传给两个方法，省去了getElementById依赖id
14 if (keyword.value == "请输入搜索关键词") {
15 keyword.value = "";
16 keyword.style.color = 'Black';
17 }
18 }
19 </script>
20 </head>
21 <body onload="InitLoad()">
22 <input onblur="inputBlur(this)" onfocus="inputFocus(this)" value="请输入搜索关键词" style="color: Gray" />
23 <input type="button" value="搜索" />
24 </body>
25 </html>16、Form表单： Form 对象是表单的 Dom 对象。
方法： submit() 提交表单，但是不会触发 onsubmit 事件。 实现 autopost ，也就是焦点离开控件以后页面立即提交，而不是 只有提交 submit 按钮以后才提交，当光标离开的时候触发 onblur 事件，在 onblur 中调用 form 的 submit 方法。在点击 submit 后 form 的 onsubmit 事件被触发 ，在 onsubmit 中可以 进行数据校验，数据有问题， 返回 false 即可取消提交。
案例1：
Form表单
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
2 <html>
3 <head>
4 <title>欢迎来到daomul的博客，欢迎再来，谢谢(Form表单提交4)</title>
5 <script type="text/javascript">
6
7 </script>
8 </head>
9 <body onload="InitLoad()">
10 <form action="default.aspx" id="form1" onsubmit="return false;">
11 <!--通过click函数"欺骗"其他按钮触发-->
12 <input type="button" id="btn1" onclick="alert('触发了其他button了')" value="按钮" />
13 <input type="button" onclick="document.getElementById('btn1').click()" value="同样提交" />
14 <!--因为return false，所以不可提交表单，但是调用submit(),却可以触发方法-->
15 <input type="submit" onclick="document.getElementById('form1').submit()" value="可提交的submit" />
16 <input type="submit" value="不可提交的submit" />
17 <!--类似于asp.net中的autopostback(相同的还有文本框输入后移开的onblur方法的submit调用)-->
18 <select id="Select1" onchange="document.getElementById('form1').submit()">
19 <option>111</option>
20 <option>222</option>
21 <option>333</option>
22 <option>444</option>
23 </select>
24 </form>
25 </body>
26 </html>17、正则表达式
*JavaScript 中创建正则表达式类的方法：
var regex = new RegExp("//d{5}") 或者 var regex = //d{5}/
/ 表达式 / 是 JavaScript 中专门为简化正则表达式编写而提供的语法，
写在 // 中的正则表达式就不用管转义符了。
*RegExp 对象的方法：
** test(str) 判断字符串 str 是否匹配正则表达式，相当于 IsMatch
var regex = /.+@.+/;
alert(regex.test("a@b.com"));
alert(regex.test("ab.com"));
** exec(str) 进行搜索匹配，返回值为匹配结果 ( * )
** compile 编译表达式，提高运行速度。 ( * )
*String 对象中提供了一些与正则表达式相关的方法，相当于对于
RegExp 类的包装，简化调用：
match(regexp) ,相当于调用 exec
var s = "aaa@163.com";
var regex = /(.+)@(.+)/;
var match = s.match(regex);
alert(RegExp.$1 + " ，服务器： " + RegExp.$2);
案例1：
正则表达式
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
2 <html>
3 <head>
4 <title>欢迎来到daomul的博客，欢迎再来，谢谢</title>
5 <script type="text/javascript">
6 var s = "4444@163.com";
7 var regex = /(.+)@(.+)/;
8 s.match(regex);
9 alert(RegExp.$1); //取得第一组即@前面的部分
10 alert(RegExp.$2); //取得@后面的部分
11 </script>
12 </head>
13 <body>
14 </body>
15 </html> 18、不同浏览器的差异
<!--
（1、appendChild，insertCell，px
（2、获取网页中哪个元素触发事件
IE中使用srcElement
FireFox使用target
（3、使用Dom获取标签文本
IE中使用innerText
FireFox使用textContent
（4、动态网页绑定
Id:attachEvent
FireFox:addEventListener
（5、不同浏览器css样式支持不同：
哀悼网页使用的css只有IE才支持，FF不支持
（6、jquery进行封装：可在不同浏览器中进行封装
解决不同浏览器中Dom的不同-->
19、键盘码操作以及金融框案例:
案例1：
财务相关系统中涉及到金额的文本框有如下要求：
*进入金额文本文本框不使用中文输入法 不能输入非数字 焦点在文本框中时文本框左对齐；焦点离开文本框时文本框右对齐，显示千 分位 禁用输入法： style="ime-mode:disabled"
*禁止键入非法值，只有这些才能被键入 (k == 9) || (k == 13) ||
(k==46)||(k==8)||(k==189)||(k==109)||(k==190)||(k==110)|| (k>=48 &&
k<=57)||(k>=96 && k<=105)||(k>=37 && k<=40) 。 onkeydown="return
numonKeyDown()" 不要写成 onkeydown="numonKeyDown()" 区分事件响应函数 和事件响应函数调用的函数。
* 禁止粘贴 ( 伟大的 Tester) ， <input onpaste="return false;" ，太暴力，应该只是禁止粘贴非法值。在 onpaste 中通过 clipboardData.getData('Text')
取到粘贴板中的值，然后遍历每个字符，看是否是合法的值，如果全部是合法值才允许粘贴，只要有一个非法值就禁止粘贴。 charAt 、 charCodeAt添加千分位 的方法
* 焦点在的时候左对齐没有千分位，焦点不在时右对齐千分位：this.style.textAlign='right'
金融文本框设置
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3
4 <head>
5 <title>欢迎来到daomul的博客，欢迎再来，谢谢</title>
6 <script type="text/javascript">
7
8 //非数字
9 function numonKeyDown() {
10 var k = window.event.keyCode;
11 return isValidNum(k);
12 }
13 //判断k是否为合法的Ascii
14 function isValidNum(k) {
15 return ((k == 9) || (k == 13) || (k == 46) || (k == 8) || (k == 189) || (k == 109) || (k == 190) || (k == 110) || (k >= 48 && k <= 57) || (k >= 96 && k <= 105) || (k >= 37 && k <= 40));
16 }
17 //添加千分位
18 function commafy(n) {
19 //var re = //d{1,3}(?=(/d{3})+$)/g;
20 //var n1 = n.replace(/^(/d+)/((/./d+)?)$/,function(s,s1,s2){return s1.replace(re,"$,")+s2;});
21 re = /(/d{1,3})(?=(/d{3})+(?:$|/D))/g;
22 n1 = n.replace(re, "$1,")
23 return n1;
24 }
25 //处理粘贴板数据
26 function numPaste() {
27 var text = window.clipboardData.getData("Text");
28 for (var i = 0; i < text.length; i++) {
29 var asc = text.charCodeAt(i); //charAt→"3",charCodeAt()取到的是ASCII码
30 if (!isValidNum(asc)) { //遇到一个非法值就认为要粘贴的内容是非法的return false
31 return false;
32 }
33 }
34 }
35 </script>
36 </head>
37 <body onkeydown="if(window.event.keyCode==13){window.event.keyCode=9;}">
38 不能输入非数字:
39 <input type="text" style="text-align: right" onkeydown="var k=window.event.keyCode; if((k == 9) || (k == 13) || (k==46)||(k==8)||(k==189)||(k==109)||(k==190)||(k==110)|| (k>=48 && k<=57)||(k>=96 && k<=105)||(k>=37 && k<=40)){}else{return false;}" />
40 <br />
41 禁用输入法:
42 <input type="text" style="text-align: right; ime-mode: disabled;" />
43 <br />
44 不能输入和粘贴非数字:
45 <input type="text" style="text-align: right;" onpaste="return numPaste()" onkeydown="return numonKeyDown()" />
46 <br />
47 添加去掉千分位:
48 <input id="t" type="text" value="95654784.75"
49 onblur="this.value=commafy(this.value);this.style.textAlign='right';"
50 onfocus="this.style.textAlign='left';this.value=this.value.replace(/,/g,'')" />
51 <br />
52 </body>
53 </html>省市选择
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <!--
4 案例：实现省市选择界面。请选择省的处理，从后向前删。
5 -->
6 <head>
7 <title>欢迎来到daomul的博客，欢迎再来，谢谢（省市选择）</title>
8 <script type="text/javascript">
9 var data = { "山东": ["济南", "青岛", "潍坊"], "河南": ["郑州", "洛阳", "三门峡"], "辽宁": ["沈阳", "鞍山", "大连"] };
10 function loadPRov() {
11 var prov = document.getElementById("prov");
12 for (var key in data) {
13 var option = document.createElement("option");
14 option.value = key;
15 option.innerText = key;
16 prov.appendChild(option);
17 }
18 }
19 function provChange() {
20 var prov = document.getElementById("prov");
21 var city = document.getElementById("city");
22 /* 先清除旧的市列表
23 可以采取这种方式city.option.length=0;
24 遍历select的所有子节点，如果从前往后删，每次都会有漏网之鱼，因为有重新排号的问题
25 从后向前删就没顺序问题了 */
26 for (var i = city.childNodes.length - 1; i >= 0; i--) {
27 var option = city.childNodes[i];
28 city.removeChild(option);
29 }
30
31 var provName = prov.value;
32 var cities = data[provName]; //取出的内容["济南", "青岛", "潍坊"]
33 for (var i = 0; i < cities.length; i++) {
34 var option = document.createElement("option");
35 option.value = cities[i];
36 option.innerText = cities[i];
37 city.appendChild(option);
38 }
39 }
40 </script>
41 </head>
42 <body onload="loadProv()">
43 <select id="prov" onchange="provChange()">
44 <option value="请选择省">--请选择省--</option>
45 </select>
46 <select id="city">
47 </select>
48 </body>
49 </html> 案例3：复选框实现全选、全不选、反选
复选框选择
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <title>欢迎来到daomul的博客，欢迎再来，谢谢（歌曲选择）</title>
5 <script type="text/javascript">
6 function selAll() {
7 var p1 = document.getElementById("playlist");
8 var input1 = p1.getElementsByTagName("input");
9 for (var i = 0; i < input1.length; i++) {
10 if (input1[i].type == "checkbox") {
11 input1[i].checked = "checked";
12 }
13 }
14 }
15 function deSelAll() {
16 var p1 = document.getElementById("playlist");
17 var input1 = p1.getElementsByTagName("input");
18 for (var i = 0; i < input1.length; i++) {
19 if (input1[i].type == "checkbox") {
20 input1[i].checked = "";
21 }
22 }
23 }
24 function reverseSel() {
25 var p1 = document.getElementById("playlist");
26 var input1 = p1.getElementsByTagName("input");
27 for (var i = 0; i < input1.length; i++) {
28 if (input1[i].type == "checkbox") {
29 if (input1[i].checked == true) {
30 input1[i].checked = false;
31 }
32 else{
33 input1[i].checked = true;
34 }
35 }
36 }
37 }
38 </script>
39 </head>
40 <body>
41 <p id="playlist">
42 <input type="checkbox" id="p1" /><label for="p1">leaving into the dog</label><br />
43 <input type="checkbox" id="p2" /><label for="p1">take a shower</label><br />
44 <input type="checkbox" id="P3" /><label for="p1">fire heart</label><br />
45 <input type="checkbox" id="p4" /><label for="p1">china</label><br />
46 <p>
47 <input type="button" onclick="selAll()" value="全选" />
48 <input type="button" onclick="deSelAll()" value="全不选" />
49 <input type="button" onclick="reverseSel()" value="反选" />
50 </p>
51 </p>
52 </body>
53 </html>案例4：权限选择
权限选择
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <title>欢迎来到daomul的博客，欢迎再来，谢谢（权限选择）</title>
5 <script type="text/javascript">
6 function moveSelected(selectedSrc, selectedLast) {
7 for (var i = selectedSrc.childNodes.length - 1; i >= 0; i--) {
8 var newOption = selectedSrc.childNodes[i];
9 if (newOption.selected == true) {
10 selectedSrc.removeChild(newOption);
11 newOption.selected = false;
12 selectedLast.appendChild(newOption);
13 }
14 }
15 }
16 function moveAll(selectedSrc, selectedLast) {
17 for (var i = selectedSrc.childNodes.length - 1; i >= 0; i--) {
18 var newOption = selectedSrc.childNodes[i];
19 selectedSrc.removeChild(newOption);
20 selectedLast.appendChild(newOption);
21 }
22 }
23 </script>
24 </head>
25 <body>
26 <select style="float:left;width:15%;height:100px;" id="select1" multiple="multiple">
27 <option>添加</option>
28 <option>删除</option>
29 <option>修改</option>
30 <option>查询</option>
31 <option>打印</option>
32 </select>
33 <p style="float:left">
34 <input style="float:left;width:100%;" type="button" value=">" onclick="moveSelected(document.getElementById('select1'),document.getElementById('select2'))" />
35 <input style="float:left;width:100%;" type="button" value="<" onclick="moveSelected(document.getElementById('select2'),document.getElementById('select1'))" />
36 <input style="float:left;width:100%;" type="button" value=">>" onclick="moveAll(document.getElementById('select1'),document.getElementById('select2'))" />
37 <input style="float:left;width:100%;" type="button" value="<<" onclick="moveAll(document.getElementById('select2'),document.getElementById('select1'))" />
38 </p>
39 <select style="float:left;width:15%;height:100px;" id="select2" multiple="multiple"></select>
40 </body>
41 </html>
觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ js脚本，巧夺天工，精雕玉琢。小宝典献丑了！
以上是脚本宝典为你收集整理的javascript代码实例教程-Dom 学习总结及其实例全部内容，希望文章能够帮你解决javascript代码实例教程-Dom 学习总结及其实例所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。